CODEWITHSUNDEEP
javascriptcanvaschartschart.js
AKFourSeven
AKFourSeven

Reputation: 1325

Emphasize a point in Chart.js

Is there a way to put the points on emphasis on the charts in chart.js? Like they would get bigger or be visible when hovered over ?

I am trying to build a fixed tooltip that you would constantly capture the points hovered and when clicking on the canvas it would capture the point clicked on, or the closest, and emphasize it and fixing the value of the tooltip. When clicking again the the tooltip should resume capturing the points hovered and the emphasis should disappear.

I try to find out a way to do this but couldn't reach anything conclusive. Using getPointsAtEvent gets me the points over but then to change the properties and have this updated on the canvas does not seem to bear fruits. I try updating or redrawing the canvas but that did not changed the canvas in any way.

Any help is most welcome.

EDIT

I have manage to do something. Through the custom tooltip I have created a fixed tooltip (as asked per the requirements). Then I use an click event on the div of the canvas that will use the getPointsAtEvent. There are a few issues with this, first it returns many values instead of one, making it not precise (a way to increase precision would be nice).

For the emphasis, I am supposed to create a canvas on top, but this canvas is deleted by my subsequent call to showtooltip.

Again any help is most welcome.

Upvotes: 1

Views: 2680

Answers (1)

markE
markE

Reputation: 105035

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.

Upvotes: 2

Related Questions