highchartsstacked-area-chart

Highcharts stacked area - update tooltip only after exact area mouse over

I have stacked area-chart made with Highcharts.js. I want to update the tooltip only when the cursor crosses the border between areas. Currently, the tooltip updates when the distance between the cursor and the edge of one area makes closer than the distance between the cursor and the neighbor area edge (see the gif).

How can I reach this behaviour?

enter image description here

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            stacking: 'normal',
            trackByArea: true,
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Solution

  • Combination of setting trackByArea to true and stickyTracking to false is a solution which you are looking for.

    Demo: https://jsfiddle.net/BlackLabel/e9r2Lmtk/

      plotOptions: {
    series: {
      stacking: 'normal',
      trackByArea: true,
      stickyTracking: false // to show the difference in tracking
    }
  },

    API: https://api.highcharts.com/highcharts/series.area.trackByArea

    API: https://api.highcharts.com/highcharts/series.area.stickyTracking