Quantcast
Channel: User Mark - Stack Overflow
Viewing all articles
Browse latest Browse all 44

Hover/click area in filled line chart in chart.js

$
0
0

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.

example of filled line chart with chart.js (with stacking)

EDIT Here's a fiddle: https://jsfiddle.net/markv/rvqjkrp9/1/


Viewing all articles
Browse latest Browse all 44

Trending Articles