[Chartjs]-Emphasize a point in Chart.js

Here are 3 ways to emphasize a hovered chart-point in ChartJS:

1. ChartJS has built-in tooltips–check them out!

2. ChartJS also has built-in Hover emphasize by setting a chart’s highlight property(s). The highlight property is hightlight on some chart types and is highlightFill+highlightStroke on other chart types.

3. Alternatively, if you want to do some customized emphasis, you can use getPointsAtEvent inside a mousemove handler on the canvas. You need to listen for the canvas’s mousemove events because individual drawings (chart points) on the canvas do not raise their own individual events. This method is “expensive” because you must toggle point properties with every mousemove. You could make it less “expensive” by layering a second canvas over your chart canvas and draw your emphasis on that second top canvas. The top canvas can easily be cleared with each mousemove making it less “expensive” to maintain.