I have a column chart made using Highcharts.js. On click of a bar, it's color changes to orange. But when another bar is clicked, the color of previously clicked bar remains orange.

What I want is that on click of a bar, the color of all other bars should turn to default.

 $('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function(event) {
                        console.log(this);
                        this.update({ color: '#fe5800' }, true, false);
                        }
                }
            }
        }
    },

    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]
    }]
});

Fiddle link - Demo.

Thanks in advance.

I have a column chart made using Highcharts.js. On click of a bar, it's color changes to orange. But when another bar is clicked, the color of previously clicked bar remains orange.

What I want is that on click of a bar, the color of all other bars should turn to default.

 $('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function(event) {
                        console.log(this);
                        this.update({ color: '#fe5800' }, true, false);
                        }
                }
            }
        }
    },

    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]
    }]
});

Fiddle link - Demo.

Thanks in advance.

• javascript
• jquery
• html
• highcharts

3 Answers 3

Update in 2017:

There is now a built'in way to do that:

 series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2, -1, -2, -3],
        color: 'steelblue',
        negativeColor: 'indianred',
        states: {
            select: {
                color: 'blue'
            }
        },
        allowPointSelect: true
    }]

Fiddle: http://jsfiddle.net/nk1v22du/

You can save reference to the previous bar and when the next bar is clicked, you can restore the color for the previous bar.

$(function () {
    var previousPoint = null;
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                point: {
                    events: {
                        click: function(event) {
                            console.log(this);
                            if (previousPoint) {
                                previousPoint.update({ color: '#7cb5ec' });
                            }
                            previousPoint = this;
                            this.update({ color: '#fe5800' });
                            }
                    }
                }
            }
        },

        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]
        }]
    });

});

See http://jsfiddle.net/amyamy86/Xm4vW/1/

jsfiddle

var series = chart.series[0];
series.color = "#FF00FF";
chart.legend.colorizeItem(series, series.visible);
$.each(series.data, function(i, point) {
    point.graphic.attr({
        fill: '#FF00FF'
    });
});
series.redraw();