Highcharts Polar Chart: Multiple Pane Segment Colors
Solution 1:
To my knowledge there is no easy way to do this within the API.
I'll present a solution that utilizes the chart.renderer
to draw a single color for each slice of your polar chart:
var colors = [ "pink", "yellow", "blue", "red", "green", "cyan", "teal", "indigo" ];
var parts = 8;
for(var i = 0; i < parts; i++) {
chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0],
chart.plotTop + chart.yAxis[0].center[1],
chart.yAxis[0].height,
0,
-Math.PI + (Math.PI/(parts/2) * i),
-Math.PI + (Math.PI/(parts/2) * (i+1))).attr({
fill: colors[i % colors.length],
'stroke-width': 1,
'opacity': 1
}).add();
}
Click this JSFiddle link to see a live demonstration.
It uses the renderer.arc
to draw each slice with the information from chart
about center and axis height. The arcs are drawn using start and end angle, given in radians. The various slices can be colored using the colors
array, and the number of slices can be controlled with the parts
variable.
If there are more parts than colors it will start from the beginning of the colors
array when it runs out of colors, using colors[i % colors.length]
.
Solution 2:
You can add a fake column series with differently colored points and set yAxis.maxPadding to 0:
chart: {
polar:true,
events: {
load:function() {
varchart=this,
max=chart.yAxis[0].max;chart.addSeries({
type:'column',
data: [{
y:max,
color:'rgba(255, 255, 0, 0.2)'
}, {
y:max,
color:'rgba(255, 0, 255, 0.2)'
}, {
y:max,
color:'rgba(0, 255, 255, 0.2)'
}, {
y:max,
color:'rgba(255, 0, 0, 0.2)'
}, {
y:max,
color:'rgba(0, 255, 0, 0.2)'
}, {
y:max,
color:'rgba(0, 0, 255, 0.2)'
}, {
y:max,
color:'rgba(130, 70, 150, 0.2)'
}, {
y:max,
color:'rgba(0, 0, 0, 0.2)'
}],
pointPadding:0,
groupPadding:0,
zIndex:0,
showInLegend:false,
enableMouseTracking:false,
animation:false
})
}
}
},yAxis: {
maxPadding:0
},
jsFiddle: https://jsfiddle.net/BlackLabel/tsj9pomq
API Reference: https://api.highcharts.com/highcharts/series.columnhttps://api.highcharts.com/highcharts/yAxis.maxPadding
Post a Comment for "Highcharts Polar Chart: Multiple Pane Segment Colors"