react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element

Question

I am currently trying to build a LineChart via react-chartjs-2. To do that I am using TypeScript. I do not get any errors while implementing. The webiste renders normal, but when I try to open the component that renders the LineChart I get the following error in the browser:

My LineChart component looks like this:

import { Line } from "react-chartjs-2";
import {ChartData, ScatterDataPoint} from "chart.js"

type LineChartProps = {
    options: object,
    data: ChartData<"line", (number | ScatterDataPoint | null)[], unknown>,
}

export default function LineChart({options, data}:LineChartProps) {
  return ( 
    <Line data={data} options={options} />
  );
}

Since I want to be able to handle data from different sources my handler looks like this (very basic until now):

import LineChart from "./LineChart";

const colors = ["#f7813e", "#547db4", "lightgreen", "lightcoral", "darkorchid"]

type LineChartHandlerProps = {
    labels: Array<string>,
    datasets:Array<Array<number>>,
    labelDatasets:Array<string>,
    title: string,
}


const LineChartHandler = ({labels, labelDatasets, datasets, title}:LineChartHandlerProps) => {
    const options = {
        plugins:{legend:{position: "bottom"}},
        layout:{padding:10},
        scales: {
          y:{
            ticks:{
              color:"#547db4",
              font:{
                size: 12
              }
            },
            grid:{
              color: "#547db4"
            }
          },
          x:{
            ticks:{
              color:"#547db4",
              font:{
                size: 12
              }
            }
          }
        },
      };       

    let data: { label: string; data: number[]; fill: boolean; borderColor: string; }[] = [];
    datasets.forEach((x,i) => {
        data.push(
          {
            label: labelDatasets[i],
            data: x,
            fill: true,
            borderColor: colors[i],
          }
        )
    })

    let dataFinal = {
        labels: labels,
        datasets: data,
    }

  return (
    <LineChart data={dataFinal} options={options} />
  )
}

export default LineChartHandler

Since LineChart does not need options I also tried it without but get the same error. I am calling my handler with dummy values like that:

              <LineChartHandler labels={["19", "20", "21", "22"]} labelDatasets={["u1", "u2"]} datasets={[[1, 3, 4, 6], [6, 8, 3.5, 5], [3.5, 5, 4, 2], [4, 2, 3, 3]]} title={"Test Line Chart"} />

It seems that "item" in chart.esm.js is undefined:

but I do not know why that is.

Thanks for help!

LeeLenalee · Accepted Answer · 2022-03-10 19:44:35Z

33

This is because chart.js v3 is treeshakable so you will need to register everyhting you are using. In your case you dont have the pointElement registered. You can do that like this:

import {Chart, PointElement} from 'chart.js';

Chart.register(PointElement);

You can also choose to just import everything so you dont have to manually register it like so:

import 'chart.js/auto'

answered Mar 10, 2022 at 19:44

LeeLenalee

31.9k7 gold badges62 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related