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 th

Answer 1

it's simple, you can use this code

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

Answer 2

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 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.