Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change color of area chart programmatically in highcharts

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.

like image 967
westo Avatar asked Mar 20 '12 04:03

westo


People also ask

How do I change the chart color in Highcharts?

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.

Is it possible to have a separate Colour for each category in a bar graph?

You can also set the color individually for each point/bar if you change the data array to be configuration objects instead of numbers.


2 Answers

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:

enter image description here

like image 50
Mark Avatar answered Oct 28 '22 18:10

Mark


I have also tried changing it without luck, the only way is to re-create the chart as seen here

like image 32
epoch Avatar answered Oct 28 '22 19:10

epoch