I want to change the color of the area chart after it is initially rendered.
In the JSFiddle demo after clicking the button you can see the color has changed when you either mouseover the data point or toggle the display by clicking on the legend to hide and then show again.
In both of these the main area color has not updated but the data points and legend has.
JSFiddle Demo: http://jsfiddle.net/simonweston/tLwy5/
Any help would be greatly appreciated.
To change the background color of the chart you have to set in the chart. backgroundColor property. Bar colors in the series color property. Check the example with your chart I posted below.
You can also set the color individually for each point/bar if you change the data array to be configuration objects instead of numbers.
You can change it dynamically but you need to manipulate the SVG DOM elements instead of the chart object:
$($('.highcharts-series').children()[0]).attr('fill','blue')
Produces:
I have also tried changing it without luck, the only way is to re-create the chart as seen here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With