'Custom tooltip React ChartJs

I'm having an issue while creating a custom tooltip using react-chartjs-2 library where my chart rerenders whenever I hover the chart and change the state of the tooltip's future data. (currently tooltip doesn't exist I'm simply logging some data which Ill use later)

I referenced this question while trying to create a tooltip however they are using a class component and I use functional component but it shouldn't really change anything but anyway. I'd be really grateful of someone could provide a working example of a custom tooltip with react-chartjs-2 because I'm still not sure whether tooltip should be a separate jsx component or what is the proper way to create a custom tooltip in React. Thanks in advance

My code

 const GraphTooltip = ({ data }) => {
  return (
    <div
      style={{
        padding: 20,
        position: 'absolute',
        border: '1px solid',
        borderColor: '#fff8f9',
        backgroundColor: 'rgba(53,53,53,0.81)',
        borderRadius: 4,
        top: data.top,
        left: data.left,
      }}
    ></div>
  );
};

const LineChart = ({ values, labels }) => {
  const isSSR = useIsSSR();

  const [tooltipData, setTooltipData] = useState(null);

  console.log(tooltipData);

  const chartRef = useRef(null);

  const customTooltip = useCallback(tooltipModel => {
    if (tooltipModel.tooltip.opacity == 0) {
      setTooltipData(null);
      console.log('Hide tooltip');
      return;
    }
    console.log(tooltipModel);
    const chart = chartRef.current;
    const canvas = chart.canvas;

    console.log(canvas);

    if (canvas) {
      const position = canvas.getBoundingClientRect();

      // set position of tooltip
      const left = tooltipModel.tooltip.x;
      console.log(position.left);
      console.log(tooltipModel.tooltip);
      const top = tooltipModel.tooltip.y;

      tooltipData?.top != top && setTooltipData({ top: top, left: left });
    }
  });

  const options = useMemo(() => ({
    scales: {
      x: {
        ticks: {
          beginAtZero: true,
        },
        grid: {
          color: '#EEF5FF',
        },
      },
      y: {
        grid: {
          color: '#EEF5FF',
        },
      },
    },
    plugins: {
      legend: {
        display: false,
        position: 'right',
      },
      tooltip: {
        enabled: false,
        external: customTooltip,
      },
    },
  }));

  const data = {
    labels: labels,
    datasets: [
      {
        data: values,
        fill: false,
        backgroundColor: '#88B1DD',
        borderColor: '#88B1DD',
        pointRadius: 6,
        tension: 0.5,
      },
    ],
  };

  if (isSSR) return null;

  return (
    <>
      <div className="header"></div>
      <div className="relative">
        <Line data={data} options={options} ref={chartRef} />
        {tooltipData ? <GraphTooltip data={tooltipData} /> : <div />}
      </div>
    </>
  );
};

Solution 1:^[1]

Using https://www.npmjs.com/package/test-react-chartjs-2 actually fixed this. Some problems in the package itself.

Solution 2:^[2]

I have already answered similar question, please follow the link Thanks :)

https://stackoverflow.com/a/72039084/4283995

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	PCPbiscuit
Solution 2	Amit Rajbhandari

'Custom tooltip React ChartJs

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]