Adding click event to plotLine in Highcharts

Question

I am trying to add a click event to a plot line in Highcharts.

According to the documentation this should be possible. Slightly editing the example from the documentation, it does not work for the band (working of the provided example with a band here, but same outcome for plot lines).

const report = document.getElementById('report');

Highcharts.chart('container', {
    xAxis: {
        plotBands: [{ // mark the weekend
            color: '#FCFFC5',
            from: Date.UTC(2010, 0, 2),
            to: Date.UTC(2010, 0, 4),
            events: {
                click: () => {
                    alert('Band click');
                }
            }
        }],
        tickInterval: 24 * 3600 * 1000,
        // one day
        type: 'datetime'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000,
        point: {
            events: {
              click: function () {
                alert('Series click');
              }
            }
        }
    }]
});

#container {
    height: 300px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
<div id="report"></div>

The click on the series throws the alert as expected. What am I doing wrong?

Answer 1

The issue is due to the pointer-events: fill CSS property applied to the .highcharts-plot-border element which is overlaid on top of the band in the chart.

Override that setting to fix the problem, for example to auto:

.highcharts-plot-border {
  pointer-events: auto;
}

I'd suggest raising this with HighCharts as a potential bug, as you should not have to apply this CSS change for events bound to a PlotBand to be handled.

Here's a full working example with the fix applied:

const report = document.getElementById('report');

Highcharts.chart('container', {
  xAxis: {
    plotBands: [{ // mark the weekend
      color: '#FCFFC5',
      from: Date.UTC(2010, 0, 2),
      to: Date.UTC(2010, 0, 4),
      events: {
        click: () => {
          alert('Band click');
        }
      }
    }],
    tickInterval: 24 * 3600 * 1000,
    // one day
    type: 'datetime'
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 24 * 3600 * 1000,
    point: {
      events: {
        click: function() {
          alert('Series click');
        }
      }
    }
  }]
});

#container {
  height: 300px;
}

.highcharts-plot-border {
  pointer-events: auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
<div id="report"></div>