Search code examples
javascripthighchartshighmaps

HighCharts : How to add click event on colorAxis in heatmap

I need to add click event in colorAxis of HeatMap, but API show only two events "AfterSetExtremes" and "SetExtremes".

I added the 'click' listener in colorAxis events block and expected it to work, But it didn't.

Question: How do i add click event on colorAxis, so when we click on color-axis bar, the event will be listened by "click" listener.

Solution

  • As you noticed, there isn't click event available in events. It is still possible to add event click to a specific part of the axis. For example: 

        chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1,
        events: {
            load: function () {
            var axis = this.colorAxis[0];

            axis.legendGroup.on('click', function (e) {
                console.log('Click:', e);
            });
          }
        }
    },

    Demo: http://jsfiddle.net/ubjsgtdo/

    legendGroup is a group with all items of the colorAxis (scale, labels etc.). If you want, you can use legendSymbol to get click event only on the scale (rect).