0

I want to disable the hover effect on certain data points of a dataset under certain conditions using Chart.js.

I basically need to modify the dataset before drawing the line graph so it looks in the way i want. (e.g extending the line along x axis) And i don't want the hover effect to take place on some of those data points.

After implementing the business logic, I've looked for a scriptable option so i can use the context regarding the data point the user is on. I've came across solutions for basically cancelling all the hover effects on a single graph but not conditionally just like I've mentioned.

I've tried to use onHover with the context and set the hoverRadius conditionally and it looks as i expected but it gives me an error saying "Cannot assign to read only property 'hoverRadius' of object".

  // in the options object
  onHover: function (event, context) {
  if (!isEmpty(context)) {
    context[0]._options.hoverRadius = 0;
  }
}

Most probably, the regarding object has been made immutable intentionally.

So what's the correct way of implementing this behavior in Chart.js?

Furkan Kalaycioglu
  • 66
  • 4
  • 1
    Please edit your question to show the code with which you tried to set the hoverRadius conditionally – JayCodist Aug 09 '20 at 23:22
  • Done @JayCodist – Furkan Kalaycioglu Aug 10 '20 at 06:41
  • In the chartjs docs ( https://www.chartjs.org/docs/latest/charts/line.html ), I only see a reference to `hoverPointRadius` which is the radius of a point on the `Line Chart` when hovered upon. Is this the property you mean? – JayCodist Aug 10 '20 at 07:12
  • In the chartjs docs (https://www.chartjs.org/docs/latest/configuration/elements.html), there is a property called `hoverRadius` under Point configuration with the same description of `hoverPointRadius` you've mentioned. I stopped dealing with `onHover` actually and created a different dataset for the points i wanted to not have the hover effect on. I've configured that dataset to have `{...hoverRadius: 0}` and managed to solve the problem temporarily. But I'm still open to better solutions for the possible problematic use-cases. – Furkan Kalaycioglu Aug 11 '20 at 07:40
  • That was what I was going to suggest as solution. That's the way hoverRadius is supposed to be changed so there are no better solutions than that – JayCodist Aug 11 '20 at 07:44
  • You should probably post that as solution – JayCodist Aug 11 '20 at 07:44
  • So everytime i have to configure the hover effect on certain points of a dataset, I need to create another dataset composed of those points? That's not the solution i was looking for... There isn't anyway to set the configuration for the selected points (e.g. using an index or smt.) in the datasets array where we can use `hoverRadius` so I don't have to modify my datasets? – Furkan Kalaycioglu Aug 11 '20 at 07:50
  • Ya. . . That's inconvenient. Although, there isn't a way around it that I know for chartjs – JayCodist Aug 11 '20 at 07:57

0 Answers0