title: react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element
body: <p>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:
  <a href="https://i.stack.imgur.com/iPtwU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iPtwU.png" alt="Error from the Browser Terminal" /></a></p>
  <p>My LineChart component looks like this:</p>
  <pre><code>import { Line } from &quot;react-chartjs-2&quot;;
  import {ChartData, ScatterDataPoint} from &quot;chart.js&quot;
  
  type LineChartProps = {
      options: object,
      data: ChartData&lt;&quot;line&quot;, (number | ScatterDataPoint | null)[], unknown&gt;,
  }
  
  export default function LineChart({options, data}:LineChartProps) {
    return ( 
      &lt;Line data={data} options={options} /&gt;
    );
  }
  </code></pre>
  <p>Since I want to be able to handle data from different sources my handler looks like this (very basic until now):</p>
  <pre><code>import LineChart from &quot;./LineChart&quot;;
  
  const colors = [&quot;#f7813e&quot;, &quot;#547db4&quot;, &quot;lightgreen&quot;, &quot;lightcoral&quot;, &quot;darkorchid&quot;]
  
  type LineChartHandlerProps = {
      labels: Array&lt;string&gt;,
      datasets:Array&lt;Array&lt;number&gt;&gt;,
      labelDatasets:Array&lt;string&gt;,
      title: string,
  }
  
  
  const LineChartHandler = ({labels, labelDatasets, datasets, title}:LineChartHandlerProps) =&gt; {
      const options = {
          plugins:{legend:{position: &quot;bottom&quot;}},
          layout:{padding:10},
          scales: {
            y:{
              ticks:{
                color:&quot;#547db4&quot;,
                font:{
                  size: 12
                }
              },
              grid:{
                color: &quot;#547db4&quot;
              }
            },
            x:{
              ticks:{
                color:&quot;#547db4&quot;,
                font:{
                  size: 12
                }
              }
            }
          },
        };       
  
      let data: { label: string; data: number[]; fill: boolean; borderColor: string; }[] = [];
      datasets.forEach((x,i) =&gt; {
          data.push(
            {
              label: labelDatasets[i],
              data: x,
              fill: true,
              borderColor: colors[i],
            }
          )
      })
  
      let dataFinal = {
          labels: labels,
          datasets: data,
      }
  
    return (
      &lt;LineChart data={dataFinal} options={options} /&gt;
    )
  }
  
  export default LineChartHandler
  </code></pre>
  <p>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:</p>
  <pre><code>              &lt;LineChartHandler labels={[&quot;19&quot;, &quot;20&quot;, &quot;21&quot;, &quot;22&quot;]} labelDatasets={[&quot;u1&quot;, &quot;u2&quot;]} datasets={[[1, 3, 4, 6], [6, 8, 3.5, 5], [3.5, 5, 4, 2], [4, 2, 3, 3]]} title={&quot;Test Line Chart&quot;} /&gt;
  </code></pre>
  <p>It seems that &quot;item&quot; in chart.esm.js is undefined:
  <a href="https://i.stack.imgur.com/n7Sal.png" rel="noreferrer"><img src="https://i.stack.imgur.com/n7Sal.png" alt="" /></a></p>
  <p>but I do not know why that is.</p>
  <p>Thanks for help!</p>