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>

Answer 1

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>