Chartjs-How to show tooltip over colored/stacked region of stacked line chart in chartjs?

0👍

(assuming chartjs 4.3) Adding intersect:false seems to give the result.

Note that the hover popup is showing (top to bottom) Blue then Green – but the stacking is (top to bottom) Green then Blue… another thought is that if you can’t restrict the popup to show just the value then at least show the list in the same order as the chart.

Also adding plugins/tooltip/callbacks can customize the text in the hover – but I can’t work out how to show JUST the area you are hovering over….

plugins: {
  tooltip: {
    mode: 'index',
    intersect: false,
    callbacks: {
      label: function(context) {
        var datasetLabel = context.dataset.label || '';
        var value = context.raw.y;

        return context.datasetIndex + ' vs ' + context.dataIndex + ' ... ' + context.dataset.label + ' : ' + context.label + ' = ' + context.formattedValue;
      } // label
    } // end callbacks:
  } //end tooltip
} // end plugins

This will show a hover for all series (with a value on the date) in the chart..

enter image description here

See https://jsfiddle.net/Abeeee/8df305xg/20/ for a running example

Leave a comment