How can I reset styles defined by series in Highcharts?

Question

I use Highcharts to display some graphs on my site. Sometimes I need to remove all series from the chart and add some new series to the chart because I requested some new data through ajax.

I am currently doing this:

var chart = $('#container').highcharts(); while(chart.series.length) { chart.series[0].remove(); } chart.addSeries({ data: [144.0, 176.0, 29.9, 71.5, 106.4, 129.2, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }); chart.addSeries({ data: [129.2, 106.4, 135.6, 95.6, 54.4, 148.5, 144.0, 176.0, 29.9, 71.5, 216.4, 194.1] }); chart.addSeries({ data: [106.4, 129.2, 135.6, 148.5, 144.0, 176.0, 29.9, 71.5, 194.1, 95.6, 54.4, 216.4] }); 

You can see it in this violin .

But my problem is that the new series gets completely different colors from the first.

I can't just replace the data because the number of episodes is likely to change, so I need to delete all episodes and add new ones.

How can I archive a new series in a style similar to replaced? (In my violin, the new series should have lightblue, darkblue and some third color.)

Test cases

I created some test cases to clarify the problem that I am facing. The top chart is how it should look, and the bottom chart is how it really looks. I want them to be the same!

• Delete two series and add two series.
• Delete two series and add three series
• Delete three series and add two series

The solution should work with all of these cases!

Answer 1

I found a solution in a pull request on GitHub ( https://github.com/highslide-software/highcharts.com/pull/203 ).

You just need to reset the Highcharts color counter after deleting the series. There is also a character counter.

UPDATE: From version 4.0.3 and above, the counter name has changed:

 var chart = $('#container').highcharts(); while(chart.series.length) { chart.series[0].remove(); } chart.colorCounter = 0; chart.symbolCounter = 0; chart.addSeries({ data: [144.0, 176.0, 29.9, 71.5, 106.4, 129.2, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }); chart.addSeries({ data: [129.2, 106.4, 135.6, 95.6, 54.4, 148.5, 144.0, 176.0, 29.9, 71.5, 216.4, 194.1] }); chart.addSeries({ data: [106.4, 129.2, 135.6, 148.5, 144.0, 176.0, 29.9, 71.5, 194.1, 95.6, 54.4, 216.4] }); 

Real-time example: http://jsfiddle.net/juuQs/18/

(Before version 4.0.3, you should use chart.counters.color = 0 and chart.counters.symbol = 0)

Answer 2

Use color options:

 $('#container').highcharts({ colors: ['#2f7ed8', '#0d233a', '#8bbc21'], series: … 

Real-time example: http://jsfiddle.net/juuQs/3/

Or use a static color for each series, for example:

 chart.addSeries({ data: [144.0, 176.0, 29.9, 71.5, 106.4, 129.2, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], color: '#2f7ed8' }); 

Answer 3

You can use my custom solution that reset colors in every click event.

http://jsfiddle.net/sbochan/gJvde/1/

  function setColors(chart){ var series = chart.series, colors = chart.options.colors, len = series.length-1; if(flag) { $.each(series,function(i,serie){ if(i==len) { flag != flag; serie.update({ color: colors[i] },true,true); } else { serie.update({ color: colors[i] },false); } }); } } 

Answer 4

try using the addClass () method. suppose your container is some element X with identifier Y. enter the style information inside head like,

 <style> XY { /* any style info */}; </style> 

then every time you add data to any element, add addClass ("Y") to this element.