score:2
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]
.
score:0
You can add a fake column series with differently colored points and set yAxis.maxPadding to 0:
chart: {
polar: true,
events: {
load: function() {
var chart = 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.column https://api.highcharts.com/highcharts/yAxis.maxPadding
Source: stackoverflow.com
Related Query
- Highcharts Polar Chart: Multiple pane segment colors
- Toggling 2nd pane data within a Multiple Series Highcharts Chart
- Highchart Polar chart multiple background colors to SVG
- highcharts - chart names for multiple pie chart series in one chart
- Link multiple chart controls in HighCharts
- Highcharts polar spider with multiple y-axis scale
- exporting highcharts polar chart to PDF with phantomjs
- Update Chart Colors When Using Styled HighCharts Version
- highcharts pie chart multiple sections selection
- Highcharts Grouped Column Chart with Multiple Groups?
- Timeline chart with highcharts using x-range with multiple stacks
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
- Highcharts - Negative color with 'line' type polar chart
- Change chart type and redraw with multiple series in Highcharts
- R highcharts multiple stacked bar chart
- HighCharts Stock Chart error code 18
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- HighCharts Data Structure - Multiple Independent Series, Stacked Column Chart
- how to sync height & y-axis baseline of multiple chart in highcharts
- Multiple timelines on one chart in highcharts
- Highstocks chart multiple pane width and y axis alignment issue
- Highcharts - In area chart how to use gradient color for multiple series?
- Highcharts polar chart - zero at centre
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- How to generate highcharts chart from multiple local json files
- Highcharts - removing a segment from a pie chart
- Highcharts cannot reload multiple series chart
- Multiple Highcharts in one page - only one chart displays
- Multiple pie-charts in the same chart with HighCharts
- Highcharts polar chart wind rose data from JSON
More Query from same tag
- show the sum of total time of a state in highcharts
- Using HighchartsPHP library in CakePHP
- Highstock doesn't support custom (3 days) tickInterval with formatting
- How do I create a bar chart instead of line chart with HighCharts?
- add markers for specific values in streaming multi line in highcharts
- Highcharts - On and Off over Time
- child_process.execFile is not working with phantomjs and highcharts-convert.js
- Exporting chart with Highchart display a badly formed chart
- Formatting dataLabels in Highcharts
- Vue.js - Highmaps - change variable's value from inside chart
- Chart not visible
- Highcharts: how to separate stacked columns on datetime axis
- AngularJS ng-repeat freezes browser while HighCharts render
- Highcharts speedometer gauge change label
- Convert Highchart to multiple y axis
- Highcharts Dynamic Chart (Updating over certain interval) PHP+MySql Example
- Add average to highchart dynamically by zoom level for every series on chart
- Bar chart with wrong bar height
- Highchart plot from two vectors: split the vectors?
- Handling two ajax calls on single page to pull data into Highcharts on another page
- Memory leak using Highcharts + AngularJS
- Generate JSON files for Hightcharts with PHP from a TCP string
- Limiting the Number of Datapoints in HighCharts
- Ionic app doesn't show custom buttons from Highchart library
- Sending Generated Highchart image via email
- How to add extra tears(ticks) in highcharts?
- line and column chart in grouped categories in highcharts
- How to implement HighChart thousandsSep() for android(JAVA) on Hi-chart WordCloud
- Highcharts reloading issue with Backbone.js
- How could I edit the color of the data elements in highchart graphic?