How to disable the on-hover color change in Highcharts?

Question

I am using the column charts for my project. I have written a custom function that colors each bar of the chart based upon its y value. This works fine when I initialize the chart. As I hover over the chart, the color of the bar goes back to the default and my custom colors never return.

I have tries disabling on hover but that doesn't seem to work. I don't want the color to change even when hovered over the bar. Any suggestions?

Answer 1

You are looking for this option:

   plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },

Fiddle here.

EDITS

Instead of modifying the SVG directly to set your colors, do it within the api:

    var max = 200;
    var seriesData = $.map([107, 31, 635, 203, 2],function(datum, i){
        return {
            color: datum > max ? 'red' : '#2f7ed8',
            y: datum
        };
    });


  $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        series: [{
            name: 'Year 1800',
            data: seriesData
        }]
    });

New fiddle.

Answer 2

You are updating color in a wrong way, use point.update() instead: http://jsfiddle.net/CaPG9/8/

    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }]
    },function(chart){

        var max = 200;

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

            if(data.y > max)
                data.update({
                    color:'red'
                });

        });

    });