Image as a pointStyle with ChartJS in React

Question

I'm using chartjs / react-chartjs-s to draw some plots in React/NextJS. I want to use an image for the pointStyle for one plot in specific. In plain JavaScript, an image can be created using const i = new Image() and used as a pointStyle in ChartJS.

In React I get an error ReferenceError: Image is not defined . If I try to import Image from next/image and use that, then the image does not appear on initial render (like here which interestingly can use new Image() ), and if I click on a datum on the chart I get an error Error: Rendered more hooks than during the previous render.

TLDR: Does anyone know how to use an image/icon as a pointStyle using Next.js, ChartJS, and react-chartjs-2? Thanks!

I'm using:

1. react v. 18.2.0
2. react-dom v. 18.2.0
3. next v 13.0.05
4. chart.js v. 4.1.1
5. react-chartjs-2 v. 5.1.0

Answer 1

Solution:

new Image() reference the DOM, but since Next uses SSR, you have to utilize the useRef , useState , and useEffect hooks to circumvent the issue of trying to access the DOM.

import React, { useEffect, useRef, useState } from "react";
import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
} from "chart.js";
import { Radar } from "../node_modules/react-chartjs-2/dist";

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

function App() {
  // useRef lets you reference a DOM object, persistent between renders
  const ref = useRef();
  const [onClient, setOnClient] = useState();
  
  // On first render, set onClient flag to true
  useEffect(() => {
    setOnClient(true);
  }, []);

  // On first render, set the current value of the ref to the image
  useEffect(() => {
    ref.current = new Image(25, 25);
    ref.current.src = "https://i.stack.imgur.com/gXQrT.png";
  }, []);

  const data = {
    labels: ["Business 1", "Business 2", "Business 3"],
    datasets: [
      {
        label: "Number of Businesses",
        data: [1300, 400, 160],
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,
        // Set the value of pointStyle to the ref value
        pointStyle: ref.current
      }
    ]
  };

  return (
    <div className="App">
      // Return the graph if rendering is happening on the client
      {onClient && <Radar data={data} />}

      <form>
        <input type="text" placeholder="Label" />
        <input type="text" placeholder="Dataset" />
        <button>Add Data</button>
      </form>
    </div>
  );
}

export default App;