Question

32

Changing series color in highcharts dynamically

rated 0 times [ 33] [ 1] / answers: 1 / hits: 52310 / 12 Years ago, fri, september 14, 2012, 12:00:00

I have been able to change the stroke color on a spline graph, but the points and the legend do not change color until after I hide and show the series by clicking it and then mousing over each of the points.

I have a fiddle here: http://jsfiddle.net/J56hm/2/

$(function () {

    var chart = new Highcharts.Chart({

        chart: {

            renderTo: 'container'

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },



        series: [{

            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        

        }]

    });



    // the button handler

    $('#button').click(function() {

        chart.series[0].color = #FF0000;

        chart.series[0].graph.attr({ stroke: '#FF0000' });



        $.each(chart.series[0].data, function(i, point) {

           point.graphic.attr({ fill: '#FF0000' });

         });

        chart.series[0].redraw();

        chart.redraw();

    });

});

Any idea why this is happening or a way to work around this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isaacvalentinn

Add To Favorites

Follow

Total Points: 325

Total Questions: 120

Total Answers: 131

Location: North Korea

Member since Tue, Jun 16, 2020

4 Years ago

isaacvalentinn questions

1 BrowserAuthError: interaction_in_progress - Unable to fix, regardles of solutions found

Tue, Aug 10, 21, 00:00, 3 Years ago

1 How to transform a Luxon DateTme object to a date

Mon, Jan 18, 21, 00:00, 3 Years ago

1 __dirname is not defined

Mon, Nov 23, 20, 00:00, 4 Years ago

1 How to get status code in angular observable

Wed, Sep 23, 20, 00:00, 4 Years ago

1 running node with loader ts-node/esm.js requires imports to have the .js extension

Wed, Sep 9, 20, 00:00, 4 Years ago

View All

answered 12 Years ago milor · Accepted Answer

The following thread on the highcharts forum has a solution:

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437 with a fiddle http://jsfiddle.net/G5Pk7/ that illustrates it.

var chart = new Highcharts.Chart({

    chart: {

        renderTo: 'container'

    },

    xAxis: {

        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

    },



    series: [{

        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        

    }]

});



$('#button').click(function() {

    var series = chart.series[0];

    series.color = #FF00FF;

    series.graph.attr({ 

        stroke: '#FF00FF'

    });

    chart.legend.colorizeItem(series, series.visible);

    $.each(series.data, function(i, point) {

        point.graphic.attr({

            fill: '#FF00FF'

        });

    });

    series.redraw();

});

This is clearly a dirty solution, but seems to work.