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..
See https://jsfiddle.net/Abeeee/8df305xg/20/ for a running example
- Chartjs-Why is my ChartJs grid not matching up with points?
- Chartjs-Custom Tailwind CSS colors in chart.js
Source:stackexchange.com