How to increase the line width when hovering the cursor in chart.js?

Question

I know that I can change the width of the line and its points with borderWidth: 1, pointRadius: 1, it works fine.

But how to increase the width of the line and its points when hovering the mouse cursor over a line? I tried hoverBorderWidth: 2, hoverRadius: 2 as suggested in the docs but with no success.

I tested in Google Apps Script by adding these lines to the html file:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>

score 0 · Answer 1 · answered Jul 01 '23 at 05:59

0

Your code is almost right, but you are forgetting to add Chart.js datalables plugin which is essential for using hoverBorderWidth or hoverRadius.

Include

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

answered Jul 01 '23 at 05:59

Prateek

1
2

It doesn't work. – Neret Jul 01 '23 at 12:53
Can you provide me the code you have used so that I could clarify you with the problem i.e. in configuration or in way you are using it – Prateek Jul 01 '23 at 17:20
Please add the code you have that works to your answer or remove it. – Neret Jul 01 '23 at 17:26
I've added please to give it a close look – Prateek Jul 02 '23 at 02:48

How to increase the line width when hovering the cursor in chart.js?

1 Answers1