1

I made a donut chart in chart.js (3.9.1) using vue2. (In fact, I made it using primevue, but primevue says chart.js) I made as many buttons as the length of data in the data set, and when I mouse hover this button, I want the tooltip of the chart sequence corresponding to the index of the button to be displayed. So I made a function that works when the button is pressed, and the logic inside the function is as follows.

I put only part of the text below. but you will understand. I was hoping this would cause the third tooltip of the chart to appear when hovering over the button.

But the following error pops up. Uncaught TypeError: Cannot read properties of null (reading 'getLabelAndValue') The location where this error occurs was function createTooltipItem (line 8443) in chart.mjs.

As I guess, it seems to be an error because the controller object of the createTooltipItem function is not created because the button outside the chart is hovered. How to solve it?

I wish you could help me.

ps. I wrote this article using translator. I hope you understand.

let chartValue = this.$refs.doughnut.chart;

document.getElementById(button_x).onmouseover = function (event) {
  chartValue.tooltip.setActiveElements([
    {datasetIndex: 0, index: 3}
  ]);

  this.$refs.doughnut.refresh();
}
jwj
  • 11
  • 1
  • Your approach seems correct. Try replacing `this.$refs.doughnut.refresh();` with `chartValue.update()`. I don't know what `this.$refs.doughnut.refresh();` does exactly - probably it calls `chartValue.update()`,but it's possible it does more "refreshing" so you end with the chart in the original state. – kikon Jul 15 '23 at 10:48
  • The error you get, indicates that the dataset does not exist, which is unexpected for `datasetIndex: 0`. Now, I don't understand how you get the chart instance through `this.$refs`, neither how `this` inside the `onmouseover` handler seems to be the same with `this` outside of it; you may want to share your code for a precise solution. Meanwhile, here's a [stackblitz](https://stackblitz.com/edit/26kuhy?file=src%2FApp.vue) with a simple example that shows that your solution should work. – kikon Jul 16 '23 at 00:47
  • 1
    @kikon Thank you very much. I was able to solve this problem by referring to your code. You are best!! – jwj Jul 17 '23 at 01:50

0 Answers0