CODEWITHSUNDEEP
javascriptjqueryhighcharts
Lars Ebert-Harlaar
Lars Ebert-Harlaar

Reputation: 3537

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!

Upvotes: 7

Views: 3554

Answers (4)

Hamund
Hamund

Reputation: 716

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)

Upvotes: 16

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

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

Upvotes: 1

d4vsanchez
d4vsanchez

Reputation: 1994

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

Upvotes: 1

schnill
schnill

Reputation: 955

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.

Upvotes: 0

Related Questions