How can I reset the styles given to series in Highcharts?

Question

I am using Highcharts to render some graphs to my website. 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 it this way:

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]
});

This you can see in this fiddle.

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

I can not simply replace the data, because the number of series is likely to change, so I have to remove all series and add the new ones.

How can I archive that the new series are styled like the replaced ones? (In my fiddle, the new series should have the colors lightblue, darkblue and some third color.)

Test cases

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

1. Remove two series and add two series
2. Remove two series and add three series
3. Remove three series and add two series

A solution would need to work with all these cases!

Answer 1

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

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

UPDATE: From version 4.0.3 and above the name of the counters 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]
});

Live example: http://jsfiddle.net/juuQs/18/

(Prior to version 4.0.3 you must use chart.counters.color = 0 and chart.counters.symbol = 0)

Answer 2

Use the colors options:

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

Live example: http://jsfiddle.net/juuQs/3/

Or use a static color for each series, like this:

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'
    });