Cannot read properties of null (reading 'addEventListener')

[nfort]

Hi, i have got the error in the console

import { useEffect, useRef } from "react";
import Chart from "chart.js/auto";
import "chartjs-adapter-date-fns";
import ChartDatasourcePrometheusPlugin from "chartjs-plugin-datasource-prometheus";
import "./styles.css";

export default function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const chartRef = useRef<Chart | null>(null);

  useEffect(() => {
    if (canvasRef.current) {
      chartRef.current = new Chart(canvasRef.current, {
        type: "line",
        data: {
          datasets: [],
        },
        plugins: [ChartDatasourcePrometheusPlugin],
        options: {
          plugins: {
            "datasource-prometheus": {
              prometheus: {
                endpoint: "https://prometheus.demo.do.prometheus.io",
                baseURL: "/api/v1", // default value
              },
              query: "sum by (job) (go_gc_duration_seconds)",
              timeRange: {
                type: "relative",
                // from 1 hours ago to now
                start: -1 * 60 * 60 * 1000,
                end: 0,
              },
            },
          },
        },
      });
    }

    return () => {
      chartRef.current?.destroy();
    };
  }, []);

  return <canvas ref={canvasRef}></canvas>;
}

Playground: https://codesandbox.io/p/sandbox/chartjs-prometheus-bug-4jq97s

[samber]

This error seems to be front chartjs. Did you search in their issues ?

[nfort]

@samber yes, i found only one issue, but it seems not relevant here

https://github.com/chartjs/Chart.js/issues/11295

[samber]

Do you try react-chartjs-2 ?

You're code seems good, but this library might be handling some special cases...

[nfort]

@samber yes, behaviour is same https://codesandbox.io/p/sandbox/react-chartjs-prometheus-bug-j8hpsm