Search code examples
highchartstooltipreact-highcharts

Is there any way to disable tooltip if values are not available ? Right now it is showing the tooltip from the nearest point if values are not there

`Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  tooltip: {
    shared: true,
    formatter: function() {
      return this.points.reduce(function(s, point) {
      
        return s + '<br/>' + point.series.name + ': ' +
          point.y + '%';
      }, '<b>' + this.x + '</b>');
    },
  },
  series: [{
    data: [null, 30, 5, null, null, 30]
  }, {
    data: [null, 30, 55, null, null, 33]
  }, {
    data: [null, -12, 25, null, null, 23]
  }, {
    data: [null, -3.0, 10, null, null, 23]
  }, {
    data: [null, 7, 100, null, null, 23]
  }],


});
`

When I hover on the 3 or 4 xAxis, it shows the tooltip for 5 xAxis.

Please refer the jsfiddle code

I am expecting, if we don't have any Y value for any of x, no tooltip should display on hover for that particular point.

Solution

  • You are looking for stickyTracking property, which needs to be disabled:

      plotOptions: {
    series: {
      stickyTracking: false
    }
  }

    Live demo: https://jsfiddle.net/BlackLabel/t27gfbr1/

    API Reference: https://api.highcharts.com/highcharts/series.line.stickyTracking