Given a line chart in chart.js with areas under the curve filled. Is there a way to get a useful event when the user hovers over or clicks the filled area?
var chart_canvas = document.getElementById("myChart");var stackedLine = new Chart(chart_canvas, { type: 'line', data: { labels: ["0.0", "0.2", "0.4", "0.6", "0.8", "1.0"], fill: true, datasets: [{ label: 'Usage', data: data[0], }, { label: 'Popularity', data: data[1], }] }, options: { onHover: function (elements) { console.log(elements); } // more stuff }});
I tried onHover
but when in the filled area, the only argument is an empty array.
I have a stacked, filled chart as in the image with curved lines. I would like an event when the mouse is anywhere in the light grey area.
EDIT Here's a fiddle: https://jsfiddle.net/markv/rvqjkrp9/1/