Unable to use useRef in typescript

Question

I am unable to use the ref prop for the line chart and pie chart that I am working on.

I have tried to set different types for useRef and I am always getting the error

The following is the source code:-

import { useState,useRef, MouseEvent} from 'react';
declare const Data: { mark: unknown }[];
import {Chart, Line} from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { getElementAtEvent } from 'react-chartjs-2/dist/utils';


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


export default function App() {
  const [chartData, setChartData] = useState({
    labels: Data.map(item => item.mark), 
    datasets: [
      {
        label: 'Marks',
        data: Data.map(item => item.mark),
        backgroundColor: '#2a71d0',
        borderColor: 'black',
        borderWidth: 2
      }
    ]
  });
  const chartRef = useRef<ChartJS>(null);

  const onclick = (e:MouseEvent<HTMLCanvasElement>) => {
    if (chartRef.current) {
      console.log(getElementAtEvent(chartRef.current,e))
    }
  }
  return (
    <div className='PerformanceChart'>
      <Line ref={chartRef} data={chartData} onClick={onclick}   />
    </div>
  );
}

Are <Line /> and <canvas /> the same?

Konrad
– Konrad

2022-12-27 14:23:11 +00:00
Commented Dec 27, 2022 at 14:23 — Konrad
– Konrad, Commented Dec 27, 2022 at 14:23

Farnam H · Accepted Answer · 2022-12-27 14:27:03Z

2

You have to change the type of your useRef to ChartJS:

const chartRef = useRef<ChartJS>(null)

answered Dec 27, 2022 at 14:27

Farnam H

1902 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

magicrap Over a year ago

I did that but i still cant use the getElementAtEvent() and I am getting the same error

jsejcksn Over a year ago

^ @magicrap This answer is correct. Also, see lines 44–49 in this TS Playground: tsplay.dev/wgAo9m

magicrap Over a year ago

@Farnam This doesn't seem to be working anymore

Peter Uithoven · Accepted Answer · 2023-11-02 12:34:49Z

0

Farnam's solution no longer seems to work (see the error in https://tsplay.dev/wgAo9m) and I couldn't find this ChartJSOrUndefined type.

For me it worked to just add an additional undefined option to the useRef type:

useRef<ChartJS<"bar"> | undefined>(null);

answered Nov 2, 2023 at 12:34

Peter Uithoven

8552 gold badges8 silver badges20 bronze badges

Comments

Ross Allen · Accepted Answer · 2023-11-02 14:12:29Z

0

The ref prop of <Line> expects a type of ChartJS<"line">, make sure your useRef is declared as such:

// No need to initialize to `null`; React's TS types will infer the resulting
// type to be `ChartJS<"line"> | undefined`.
const chartRef = useRef<ChartJS<"line">>();

answered Nov 2, 2023 at 14:12

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

Collectives™ on Stack Overflow

Unable to use useRef in typescript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related