Accepted answer

The following thread on the highcharts forum has a solution: with a fiddle 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";
        stroke: '#FF00FF'
    chart.legend.colorizeItem(series, series.visible);
    $.each(, function(i, point) {
            fill: '#FF00FF'

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


Did you even look at the console?

ReferenceError: series is not defined
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


it's simple, you can use this code

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

Related Query

More Query from same tag