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
Related
Is it possible to remove/hide the concentric circles (yAxis plotLines) that Highcharts automatically draws in polar charts? Setting the yAxis lineWidth to zero did not work. Also, setting the yAxis plotLines to an empty array did not work.
These options successfully create a green plot band filling the chart, but do not create a red plot line in the chart. However, what appears to be a light grey y-axis plot line circle is drawn at y=5. This is the line I want to remove or hide.
{
colors: COMPETITOR_COLORS,
chart: {
polar: true,
backgroundColor: 'pink',
plotBackgroundColor: KAHN_DARK_GRAY_BG,
},
title: {
text: '',
},
tooltip: {
valueDecimals: 2,
headerFormat: '<br/>',
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
},
pane: {
startAngle: 0,
endAngle: 360,
},
xAxis: {
min: 0,
max: 360,
tickInterval: 45,
labels: {
format: '{}',
},
},
yAxis: {
min: 0,
max: 10,
plotLines: [{color: 'red', value: 7, width: 3}],
plotBands: [{color: 'green', from: 0, to: 10}],
labels: {
format: '{}',
},
},
plotOptions: {
series: {
pointStart: 45,
pointInterval: 90,
},
column: {
pointPadding: 0,
groupPadding: 0,
},
},
series: kahnSeries,
}
The lines that you want to remove are grid lines, not plot lines. To remove them use:
yAxis: {
gridLineWidth: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/46xvajn5/
API Reference: https://api.highcharts.com/highcharts/yAxis.gridLineWidth
I have a solid gauge that looks like this: https://jsfiddle.net/fb5Ltxbt/
These are the requirements I've achieved thus far:
Gauge range of 0 to 50
If value < 40, show in red, else in green
Display major ticks
This is what I want to add if it's possible:
Something to indicate Y-Axis stops as defined in the code
In other words, what I want is to ADD something like the "250" indicator from the following image:
It doesn't have to be an additional number, just something, anything, that marks each stop.
JSFiddle source code below:
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
// Add something to indicate each of these stops
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10, // Keep the labels for these ticks
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [30],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I have seen how to make specific labels outside gauge chart but it requires all normal ticks to be removed. I'd don't want them to be removed if possible but please say so if what I want is not possible too, thanks!
You can an additional yAxis to achieve additional ticks. The additional axis should be linked to the main axis. Then, it has the same scale as the main axis and you gain control over additional, independent ticks - you define specific ticks via tickPositions.
{
linkedTo: 0,
lineWidth: 0,
minorTickLength: 0,
tickPositions: [35],
tickLength: 75,
labels: {
x: 30,
y: -30,
style: {
fontSize: '25px'
}
}
}]
Live example and output
https://jsfiddle.net/ym2tvzy7/
If you want ticks with different color and styles, you can add more axes.
https://jsfiddle.net/ym2tvzy7/1/
If i understand your requirements correctly
May be this will help not exactly as your requirement anyway as an alternative
You can also try :-
plotBands: [{
from: 39.5,
to: 40.5,
color: '#55BF3B' // green
}]
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10,
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null,
plotBands: [{
from: 0,
to: 40,
color: '#55BF3B' // green
}]
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [31],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
}
},
dataLabels: {
enabled: true,
format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
style: {
textShadow: false,
width: 150,
fontSize: "16px"
},
}
},
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: borderWidth
},
},
series: [{
showInLegend: false,
type: 'column',
name: 'Column',
data: data
}],
credits: {
enabled: false
}
});
http://jsfiddle.net/c904atb3/
I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?
I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.
My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/
In this case, I added the following line to your yAxis:
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.
The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.
I hope this is helpful!
I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
padding: 50,
useHTML: true,
verticalAlign: 'middle',
format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
style: {
textShadow: false,
width: 250,
fontSize: '22px'
},
}
http://jsfiddle.net/c904atb3/2/
In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.
You can set label's coordinates like this:
var data = [{
name: "Label 1",
dataLabels: {
x:100,
y:100
},
y: 10,
color: "#9fe642"
},
http://jsfiddle.net/c904atb3/1/
At the top of doughnut charts with only 1 point in the series, there is always a tiny gap between the start and end of the slice:
http://jsfiddle.net/6E2Bx/
credits: {
enabled: false
},
chart: {
plotBackgroundColor: 'pink',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'See the gap at 0 degrees',
align: 'center',
verticalAlign: 'middle',
y: 0
},
plotOptions: {
pie: {
borderWidth: 0,
dataLabels: {
enabled: true,
distance: -30,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '70%',
data: [
['Full', 1]
]
}
Close up of the gap:
Am I missing some setting here?
I would prefer not to modify the drawing/svg elements directly, I feel like borderWidth: 0 should be handling this.
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