I have to create a semi circular gauge chart using high chart. I have got this one, but this one has a full circular dial. What is required is a semicircular dial, i.e., containing only the upper part of dial.
Asked
Active
Viewed 7,519 times
5 Answers
2
You can add center parameter to pane section,
pane : {
center: ['50%', '100%']
...
}
See the modified demo, http://jsfiddle.net/EjRLw/524/
Refer to API at High chart http://api.highcharts.com/highcharts#pane.center
Z.Xi
- 21
- 2
0
Change the last function like this and you will have upper part of the full dial
// Add some life
function(chart) {
setInterval(function() {
var point = chart.series[0].points[0],
newVal, inc = 100;
newVal = inc;
if (newVal < 0 || newVal > 100) {
newVal = 50;
}
point.update(newVal);
}, 3000);
});
Viral Shah
- 2,263
- 5
- 21
- 36
-
I do not think this is what he is asking for. That just moves the needle to the '100' point. The gauge is still a "full circle" with the actual charting area a half circle and black space on the bottom. – wergeld Aug 28 '12 at 12:54
-
1Check this plotBands: [{ from: 0, to: 100, innerRadius: '40%', outerRadius: '65%', color: {linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, stops: [ [0, '#fff'], [1, '#fff'] ]} // green }, { from: 0, to: 100, innerRadius: '45%', outerRadius: '60%', color: '#000' // red }] one change made `to:100`. this one you want? – Viral Shah Aug 29 '12 at 08:28
0
You can set the background shape to arc e.g.
pane:{
background:{
...
shape:'arc'
...
}
}
Then use this CSS to remove space below the semicircle
.chatcontainer > div {
margin-bottom: -35% !important
}
.chatcontainer > div.highcharts-container > svg {
margin-bottom: -35%; max-height: 65% !important;
}
0
Highcharts.chart('SemiCircularGauge', {
chart: {
type: 'gauge',
backgroundColor: '#e8e8e8',
plotBackgroundColor: {
stops: [
[0, '#FFF4C6'],
[50, '#FFFFFF'],
[100, '#FFF4C6']
]
},
height: 250
},
title: {
text: 'Semi Circular Gauge',
verticalAlign: 'bottom'
},
pane: [{
startAngle: -90,
endAngle: 90,
background: null,
center: ['50%', '100%'],
size: 300
}, {
startAngle: -90,
endAngle: 90,
background: null,
center: ['50%', '100%'],
size: 50
}],
exporting: {
enabled: true
},
tooltip: {
enabled: true
},
yAxis: [{
min: 0,
max: 100,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 20,
color: "#A45D5B"
}, {
from: 20,
to: 40,
color: "#C7A46F"
}, {
from: 40,
to: 60,
color: "#D0BF94"
}, {
from: 60,
to: 80,
color: "#71AA8D"
}, {
from: 80,
to: 100,
color: "#3E7873"
}],
//pane: 0,
title: {
text: '<span style="font-size:8px">Semi Circular Gauge</span>',
y: -20
}
}, {
min: 0,
max: 100,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 20,
innerRadius: '100%',
outerRadius: '105%',
color: "#A45D5B"
}, {
from: 20,
to: 40,
innerRadius: '100%',
outerRadius: '105%',
color: "#C7A46F"
}, {
from: 40,
to: 60,
innerRadius: '100%',
outerRadius: '105%',
color: "#D0BF94"
}, {
from: 60,
to: 80,
innerRadius: '100%',
outerRadius: '105%',
color: "#71AA8D"
}, {
from: 80,
to: 100,
innerRadius: '100%',
outerRadius: '105%',
color: "#3E7873"
}],
pane: 1,
title: {
text: ''
}
}],
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Semi Circular Gauge',
data: [68],
yAxis: 0
}, {
name: 'Semi Circular Gauge',
data: [68],
yAxis: 1
}]
},
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = 0;
newVal = point.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
Roshdy Abuzeid
- 71
- 1
- 3