I've not found an API or previous question that addresses changing the width of the solid gauge data plot.
I can easily change the chart width, plot width, plot padding, arc background's inner and outer widths... but not the chart.
How do I prevent the chart (green) from overlapping the background (white)?
(Just created account, so can't insert images yet)
https://www.dropbox.com/s/dtvekgi9uyxvpww/arc.png
pane: {
center: ['50%', '70%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#fff',
innerRadius: '75%',
outerRadius: '100%',
shape: 'arc',
borderColor: 'transparent'
}
},
Adjusting the '130%' doesn't solve the issue.
UPDATE::: http://jsfiddle.net/jm8E4/3/
Thanks
You can use innerRadius on yAxis.
plotOptions: {
solidgauge: {
innerRadius: '75%',
dataLabels: {
y: -45,
borderWidth: 0,
useHTML: true
}
}
},
http://jsfiddle.net/jm8E4/6/
Try below code
EDITED
i have changed innerradius and outerradius
background: {
backgroundColor: '#fff',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc',
borderColor: 'transparent'
}
create chart with innerRadius same as outerRadius
outerRadius is the background radius on which chart will shown and innerRadius is chart radius.
Demo
Edited Fiddle
Related
I'm playing with bullet chart and can't make bullet higher and bands thinner.
What I have:
What I want:
I'm tried set thickness but it's not helps:
plotBands: [
{
from: 0,
to: 50,
color: "#61Cd8D",
thickness: '5%'
}
Here is example:
https://jsfiddle.net/e9z5rvat/2/.
Help me please
Plot lines occypy the entire height of the plot area, and series is not visible outside of it. As a solution, instead of using plot lines, you can add a stacked column series:
series: [{
stacking: 'normal',
type: 'column',
groupPadding: 0.1,
pointPadding: 0,
enableMouseTracking: false,
data: [{
x: 0,
y: 50,
color: "#61Cd8D"
},
{
x: 0,
y: 50,
color: "#E6E4A5"
},
{
x: 0,
y: 51,
color: "#F0A434"
}
]
}, {
data: [{
y: 0,
target: 45
}],
groupPadding: 0,
pointPadding: 0,
targetOptions: { // Options related with look and position of targets
width: '100%', // The width of the target
height: 5, // The height of the target
borderWidth: 0, // The border width of the target
borderColor: 'black', // The border color of the target
color: 'black' // The color of the target
}
}]
Live demo: https://jsfiddle.net/BlackLabel/wjyadh7f/
API Reference: https://api.highcharts.com/highcharts/series.column.groupPadding
I'm trying to create a chart that looks like the attached image.
I have come very close by using a bullet graph chart and I'm trying to get an arrow image dataLabel positioned on the series point but it sometimes goes to the right or left of the point. My intention is to have the series color transparent and have the datalabel visually replace the extending bar. not the target bar but the series bar itself. Buy my image not placed exactly on the point in the series OR is there another way to use an image or icon on top of the series point?
plotOptions: {
series: {
dataLabels: {
enabled:true,
useHTML:true,
x: -3,
y: 35,
format: '<img src="https://image.ibb.co/cqabM8/g3.png">'
},
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '300%'
}
}
}
Here is a JSFiddle used to try positioning the arrow...
Depending on how strict you are with how the data for this chart (in other words, where the arrow lies along the chart and how the colored zones are measured), there's a way to mimic this image using plot bands and line markers.
See my snippet below (or the fiddle at https://jsfiddle.net/brightmatrix/r78vz49a/).
I used plot bands to create the colored zones along an axis of 0 to 100 (assuming, for example, that 0% is fresh and 100% is totally rotten/inedible).
Then, there are two series: one with a marker that forms the arrowhead and a second that is simply a vertical line; both complete the arrow. So long as you keep the x-axis values for both the arrowhead and line consistent, the arrow would "move" along the line.
I hid the y-axis labels since they weren't relevant to your chart. If you wanted, you could also hide the x-axis labels and move your plot band labels below the chart.
Below is a screenshot of the final product. I hope this information is helpful for you in solving this challenge.
Highcharts.chart('container', {
title: { text: 'Freshness scale' },
xAxis: {
plotBands: [{
color: 'rgba(0,255,0,0.5)',
from: 0,
to: 33,
label: { text: 'Fresh', align: 'center', x: -10 }
},{
color: 'rgba(255,255,0,0.5)',
from: 33,
to: 67,
label: { text: 'Stale', align: 'center', x: -10
}
},{
color: 'rgba(255,0,0,0.5)',
from: 67,
to: 100,
label: { text: 'Moldy', align: 'center', x: -10
}
}],
min: 0,
max: 100
},
yAxis: {
min: 0,
max: 1,
tickInterval: 1,
title: { text: '' },
labels: { enabled: false }
},
legend: { enabled: false },
tooltip: { enabled: false },
series: [{
name: 'Freshness arrow',
data: [{x: 55, y: 0}],
lineWidth: 0,
color: 'black',
marker: { symbol: 'triangle-down', radius: 10, y: -10 }
},{
name: 'Freshness line',
data: [{x: 55, y: 0},{x: 55, y: 0.5},],
lineWidth: 4,
color: 'black'
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 150px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
I am currently laying out a page that uses multiple charts and I can't seem to remove the wasted space from a Highcharts Solid Gauge. I am only using 50% of the chart from range -90 to 90 yet the pane size is for 100% of the arc drawn. How can I reuduce the wasted space?
Current:
Desired:
I am using the following container:
<div id="container-ping" style="height: 20vh; width: 33.33%; float: left"></div>
These are the Solid Gauge parameters:
// Create the ping chart
$('#container-ping').highcharts({
chart: {
type: 'solidgauge'
},
tooltip: {
enabled: false
},
yAxis: {
min: 0,
max: 500,
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: null,
tickLength: 0,
tickPositions: [0, 500],
minorTickLength: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: 0
},
labels: {
enabled: true,
distance: 15,
align: 'center'
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 0,
borderWidth: 0,
useHTML: true
}
}
},
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'none',
borderColor: '#aaa',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
credits: {
enabled: false
},
title: {
text: processedData[0]['name']
},
series: [{
data: [processedData[0]['data'][0]],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:12px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>'
}
}]
});
User ppotaczek mentioned a way to resize the chart using another function. This helped me look in the right direction in adding the height to the chart settings. This sizes the chart how I needed and did not require a redraw.
chart: {
type: 'solidgauge',
height: (70) + '%',
},
As mentioned in the comment above, you should use height option for the chart. Also, you can use center and size properties to optimize the space occupied by the chart.
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90
}
Live demo: http://jsfiddle.net/BlackLabel/eo47dyam/
API Reference: https://api.highcharts.com/highcharts/pane.center
I am trying to use the highcharts solid gauge, and I would like to have a legend, however Highcharts developers seem to have removed the color option from solid gauge series, which I believe is what the legend pulls it's color from.
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
color: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}],
showInLegend:true
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}],
showInLegend:true
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}],
showInLegend:true
}]
Jsfiddle
Is there any way to get my legend to match the series colors?
I haven't been able to figure out how to color the marker in the legend, but to me the markers don't make sense in this case anyhow. So, I've turned them off in my fiddle.
To color the text, you can use the legend labelFormatter function.
legend: {
labelFormatter: function() {
return '<span style="text-weight:bold;color:' + this.userOptions.color + '">' + this.name + '</span>';
},
symbolWidth: 0
},
http://jsfiddle.net/9dq2p7dw/21/
Just to add, Barbara's answer is still valid in 2019.
However, to remove the marker, you'll have to add
squareSymbol: false
I would have added this as a comment in her answer but I do not have enough reputation points.
An interesting little "quirk" using the sample of the VU gauge. When I try to reposition the gauge pane, the numeric display will just disappear. If I keep the position <= 100%, the display will show, anything > 100% and the numeric display is gone.
I have repeatedly tried to force the display back into a position where it can be seen, but no luck. Any ideas? Here is the latest test fiddle:
VU Meter Fiddle
Adjusting the elements is easy, use the pane: section to move the entire gauge with the display pane, use the datalabel: section to move the numeric display.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF4C6'],
[0.3, '#FFFFFF'],
[1, '#FFF4C6']
]
},
plotBackgroundImage: null,
height: 200
},
title: {
text: 'Efficiencies'
},
/***
in order to move the gauge up or down in the pane, adjust the 'Y' element in
the center array. Adjusting this above 100% (to move the gauge DOWN)
will cause the numeric display to disappear
***/
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['25%', '100%'],
size: 200
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['75%', '105%'],
size: 200
}],
yAxis: [{
min: 0,
max: 110,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 70,
color: '#DF5353', // red
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 70,
to: 95,
color: '#DDDF0D', // yellow
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 95,
to: 110,
color: '#55BF3B', // green
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: '<span style="font-size:10px">OEE %</span><br/><span style="font-size:8px">Machine 001</span>',
y: -30
}
}, {
min: 0,
max: 110,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 70,
color: '#DF5353', // red
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 70,
to: 95,
color: '#DDDF0D', // yellow
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 95,
to: 110,
color: '#55BF3B', // green
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: '<span style="font-size:10px">Cycle Eff %</span><br/><span style="font-size:8px">Machine 001</span>',
y: -30
}
}],
plotOptions: {
gauge: {
/***
Adjusting the position of the numeric display is also easy
Change the y: component more negative move the display UP,
decreasing the value move the display DOWN
***/
dataLabels: {
enabled: true,
x: 0,
y: -120
},
dial: {
radius: '110%'
}
}
},
series: [{
data: [80],
yAxis: 0
}, {
data: [80],
yAxis: 1
}]
},
// Let the music play
function(chart) {
setInterval(function() {
var left = chart.series[0].points[0],
right = chart.series[1].points[0],
leftVal,
//inc = (Math.random() - 0.5) * 30;
inc1 = Math.random() * (30) + 70;
inc2 = Math.random() * (30) + 70;
leftVal = left.y + inc1;
rightVal = right.y + inc2; // / 3;
if (leftVal < 0 || leftVal > 110) {
//leftVal = left.y - inc;
leftVal = 110 - inc1;
}
if (rightVal < 0 || rightVal > 110) {
rightVal = 110 - inc2;
}
left.update(parseInt(leftVal),false);
right.update(parseInt(rightVal), false);//, false);
chart.redraw();
}, 1500);
});
});
If you use the dataLabels.crop = false option it will show up. But based on the API description it will also show up if the data label is outside the plot area as well, which you may not want. The behavior by highcharts is weird though because it looks at whether the series is outside the plot area and not where the datalabel is when hiding the labels, so I agree that it is a bug.
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.crop