Highcharts disable click on column

Question

I have a column chart. When clicking one of the vertical bars, the color of the selected bar changes. I want to disable this behaviour by disabling the detection of the 'click' event on the graph so when the user clicks there nothing happens. Anyone knows how to do that?

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        backgroundColor: 'transparent',
        container: {
            onclick : null
        }
    },
    colors: ['#27A1DE'],
    title: {
        text: null
    },
    credits : {
        enabled: false  
    },
    exporting : {
        enabled: false  
    },
    legend: {
        enabled: false  
    },
    xAxis: {
        title: {
            text: 'h',
            align: 'high',
            offset: -15
        },
        tickColor : 'transparent',
        labels: {
            style: {
            fontWeight:'bold'
        },
        y: 12,
        formatter: function() {
            var index = this.axis.categories.indexOf(this.value);
            var yValue = this.chart.series[0].yData[index];
            if (yValue === 0){
                return '<span>'+this.value+'</span>';
            } else {
                return '<span style="color:#009DE0;">'+this.value +'</span>';
            }
        }
        },
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        min: 0,
        labels: {
            enabled: false  
        },
        gridLineWidth: 0,
        lineWidth: 1,
        title: {
            align: 'high',
            rotation: 0,
            text: 'kWh',
            offset: 0,
            y: -2
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.05,
            groupPadding: 0,
            dataLabels : {
                enabled: true,
                crop :false,
                overflow: 'none',
                rotation: 270,
                x:2,
                y:-14,
                style: {
                    color: '#009DE0',
                    fontSize: 'xx-small',
                },
                formatter: function() {
                    if (this.y != 0){
                        return '<span>'+this.y +'</span>';
                    } else {
                        return '<span style="display:none;">'+this.y +'</span>';
                    }
                }
            },
            borderWidth: 0,
            events: {
                click: function(e){
                //this.update({ color: '#27a1de' }, true, false);
                e.preventDefault();
                return false;
                }
            }
        },
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                    }
                }
            }
        }
    },

    series: [{
        name: '',
        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]        
    }],
    tooltip: {
        enabled: false
    }
});

Fiddle : here

Thanks

Answer 1

the way I understood your problem, you want to remove the style change on mouse hover (as there is no color change on click in your fiddle unlike you described).

http://jsfiddle.net/6pur4o1w/

states: { hover: 'none' } 

in the series should do what you want.