score:1

Accepted answer

You can use customEvents plugin to attach events to labels. Then you can update fill for each of columns, see demo for first one: http://jsfiddle.net/6pLkv/5/

When you use axis.series, then in series array you have onyl series conected to that axis. You don't have to worry about indexes etc. 

            labels: {
                formatter: function() {
                    return this.value +' mm';
                },
                style: {
                    color: '#4572A7'
                },
                events: {
                    mouseover: function () {
                        this.axis.series[0].data[0].graphic.attr({
                            fill: 'red' 
                        });
                    },
                    mouseout: function() {
                        this.axis.series[0].data[0].graphic.attr({
                            fill: 'blue' 
                        });
                    }
                }
            },

score:1

Having looked at this there seems to be no easy way!

However you can target a particular series like this:

axisCount = 3;
seriesIWant = 1;
$(document).on('mouseover', '.highcharts-axis:eq(' + (axisCount - 1) + '), .highcharts-axis-labels:eq(' + (axisCount - 1) + ') ', function () {
    console.log('mouseover');
    $('.highcharts-series:nth-child(' + seriesIWant + ') rect').each(
    function (i, element) {
        $(element).css('fill', '#000');
    });
});

$(document).on('mouseout', '.highcharts-axis:eq(' + (axisCount - 1) + '), .highcharts-axis-labels:eq(' + (axisCount - 1) + ')', function () {
    $('.highcharts-series:nth-child(' + seriesIWant + ') rect').each(
    function (i, element) {
        $(element).css('fill', '#4572A7');
    });
});

axisCount is 1-based and here is reflecting the order of the axis you added in the JS (1 = x-axis, 2 = y-axis-1 (temperature) and 3 = y-axis-2 (Rainfall) ). seriesIWant is 1-based on the order of the series' being added in the JS, this specifies the "chart" of that series. So hence here 1 is your barchart. It seems to work ok. Demo: http://jsfiddle.net/robschmuecker/6pLkv/4/


Related Query

More Query from same tag