Changing series color in highcharts dynamically

Question

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?

Answer 1

Did you even look at the console?

ReferenceError: series is not defined
http://fiddle.jshell.net/J56hm/1/show/
Line 39

Changing into to following solved the issue

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

But now the opposite happens, when you hover over the points it goes blue again You are trying to directly manipulate the svg that is rendered by highcharts by setting color attributes. This isn't the correct way, as highchart may redraw the chart based on its rendering algorithm and all your changes may be lost.
After having said all that, I still don't know any supported method in highcharts to do this, will update the answer if I come up with something

@ jsFiddle

Answer 2

it's simple, you can use this code

chart.series[0].options.color = "#008800";
chart.series[0].update(chart.series[0].options);

Answer 3

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.