I'm trying to create a ref to the chart I'm building with chart.js and react-chartjs-2.

Here's the line where I'm trying to create the ref specifying the type: const chartRef = useRef<Line>(null);

And this is the error I get:

'Line' refers to a value, but is being used as a type here. Did you mean 'typeof Line'?

I found the following documentation but since I'm new to TypeScript I don't know how to interpret it yet. Here's the plete code I'm using:

import { Line } from "react-chartjs-2";

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { useRef } from "react";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      label: "First dataset",
      data: [33, 53, 85, 41, 44, 65],
      fill: true,
      backgroundColor: "rgba(75,192,192,0.2)",
      borderColor: "rgba(75,192,192,1)"
    },
    {
      label: "Second dataset",
      data: [33, 25, 35, 51, 54, 76],
      fill: false,
      borderColor: "#742774"
    }
  ]
};

export default function App() {
  const chartRef = useRef<Line>(null);

  return (
    <div className="App">
      <h1>This is a chart.</h1>
      <Line data={data} ref={chartRef} />
    </div>
  );
}

Can you point me in the right direction? Thanks!

I'm trying to create a ref to the chart I'm building with chart.js and react-chartjs-2.

Here's the line where I'm trying to create the ref specifying the type: const chartRef = useRef<Line>(null);

And this is the error I get:

'Line' refers to a value, but is being used as a type here. Did you mean 'typeof Line'?

I found the following documentation but since I'm new to TypeScript I don't know how to interpret it yet. Here's the plete code I'm using:

import { Line } from "react-chartjs-2";

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { useRef } from "react";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      label: "First dataset",
      data: [33, 53, 85, 41, 44, 65],
      fill: true,
      backgroundColor: "rgba(75,192,192,0.2)",
      borderColor: "rgba(75,192,192,1)"
    },
    {
      label: "Second dataset",
      data: [33, 25, 35, 51, 54, 76],
      fill: false,
      borderColor: "#742774"
    }
  ]
};

export default function App() {
  const chartRef = useRef<Line>(null);

  return (
    <div className="App">
      <h1>This is a chart.</h1>
      <Line data={data} ref={chartRef} />
    </div>
  );
}

Can you point me in the right direction? Thanks!

• javascript
• reactjs
• typescript
• chart.js

Share Improve this question Follow edited May 30, 2023 at 16:05 Steve G 13.5k77 gold badges4444 silver badges6060 bronze badges asked May 31, 2022 at 23:45 gglassesgglasses 8761212 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I'm not terribly familiar with ChartJS, but when I changed your existing code from const chartRef = useRef<Line>(null); to const chartRef = useRef<'line'>(null); (per the docs), the linter gave me a better idea as to the what needed to be fixed (on the ref).

In your case:

export function App() {
  const chartRef = useRef<ChartJS<"line", number[], string>>(null);

  return (
    <div className="App">
      <h1>This is a chart.</h1>
      <Line data={data} ref={chartRef} />
    </div>
  );
}

Working CodeSandbox