title: react-chartjs-2 with chartJs 3: Error "arc" is not a registered element
body: <p>I am working on a React app where i want to display charts. I tried to use react-chartjs-2 but i can't find a way to make it work. when i try to use Pie component, I get the error: <code>Error: &quot;arc&quot; is not a registered element.</code></p>
  <p>I did a very simple react app:</p>
  <ul>
  <li>npx create-react-app my-app</li>
  <li>npm install --save react-chartjs-2 chart.js</li>
  </ul>
  <p>Here is my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;my-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;chart.js&quot;: &quot;^3.6.0&quot;,
      &quot;cra-template&quot;: &quot;1.1.2&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-chartjs-2&quot;: &quot;^4.0.0&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-scripts&quot;: &quot;4.0.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>
  <p>And here is my App.js file:</p>
  <pre><code>import React from 'react'
  import { Pie } from 'react-chartjs-2'
  
  const BarChart = () =&gt; {
    return (
      &lt;Pie
        data={{
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [
            {
              label: '# of votes',
              data: [12, 19, 3, 5, 2, 3],
            },
          ],
        }}
        height={400}
        width={600}
      /&gt;
    )
  }
  
  const App = () =&gt; {
    return (
      &lt;div&gt;
        &lt;BarChart /&gt;
      &lt;/div&gt;
    )
  }
  
  export default App
  </code></pre>
  <p>I also tried to follow this toturial: <a href="https://www.youtube.com/watch?v=c_9c5zkfQ3Y&amp;ab_channel=WornOffKeys" rel="noreferrer">https://www.youtube.com/watch?v=c_9c5zkfQ3Y&amp;ab_channel=WornOffKeys</a></p>
  <p>He uses an older version of charJs and react-chartjs-2. And when i replace my versions of react-chartjs-2 and chartjs it works on my app.</p>
  <pre><code>&quot;chart.js&quot;: &quot;^2.9.4&quot;,
  &quot;react-chartjs-2&quot;: &quot;^2.10.0&quot;,
  </code></pre>
  <p>Do anyone one know how to solve the error i have (without having to keep old versions of chartJs and react-chartjs-2) ?</p>