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

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!

Answers:

Answer

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

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

You can use my custom solution which reset colors in each 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

try using addClass() method. suppose your container is some element X having id Y. put style information inside head as,

<style>
      X.Y { /* any style info */};
</style>

then every time you are adding data to any element call addClass("Y") on that element.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.