Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Adding click event to plotLine in Highcharts

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Expanding Rory's correct answer to include the workaround for plot lines as well, one has to add

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

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

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

    to the css file.

    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');
                }
            }
        }],
        plotLines: [{
                    color: 'red', // Color value
                    dashStyle: 'longdashdot', // Sty
                    value: Date.UTC(2010, 0, 6),
                    width: 2, // Width of the line    
            events: {
                click: () => {
                    alert('Line 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;
}

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

.highcharts-plot-line {
  pointer-events: auto;
}
    <script src="https://code.highcharts.com/highcharts.js"></script>

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


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search