I am using Chart.js and am struggling to figure out how to overwrite the defaults when the user hovers over a data point on the graph. Currently when I hover the mouse over a data point the X and Y coordinates appear. Is there a way to change what is displayed.

Here is the for loop I am using for to give each data point its value.

 for (var j = 0; j < sub_array_scores.length; j++) {
                var data = {
                    x: new Date(sub_array_dates[j]),
                    y: sub_array_scores[j],
                    r: 5
                };
                coordinates.push(data);
            }

and here is an image of what appears when I hover over a point in the graph How would I change that to say instead your score is: Y

I am using Chart.js and am struggling to figure out how to overwrite the defaults when the user hovers over a data point on the graph. Currently when I hover the mouse over a data point the X and Y coordinates appear. Is there a way to change what is displayed.

Here is the for loop I am using for to give each data point its value.

 for (var j = 0; j < sub_array_scores.length; j++) {
                var data = {
                    x: new Date(sub_array_dates[j]),
                    y: sub_array_scores[j],
                    r: 5
                };
                coordinates.push(data);
            }

and here is an image of what appears when I hover over a point in the graph How would I change that to say instead your score is: Y

• javascript
• charts

• Would it be possible for you to post a minimal example via JSFiddle? – NickyTheWrench Commented Feb 16, 2018 at 22:33

1 Answer 1

are custom Tooltips what you're looking for?

http://www.chartjs/docs/latest/configuration/tooltip.html