React/Chart.js/react-chartjs-2 エラー 解決方法がわからない

Question

以下のURL通りにReactの練習をしていますが、エラーが出てチャートが反映されません。
https://reffect.co.jp/react/react-stock-chart

自分なりに調べたのですが、解決方法がわかりません。教えていただければ幸いです。

以下エラー内容

引用テキスト

chart.esm.js:4892 Uncaught Error: "category" is not a registered scale.
at Registry._get (chart.esm.js:4892:1)
at Registry.getScale (chart.esm.js:4847:1)
at chart.esm.js:5518:1
at each (helpers.segment.js:105:1)
at Chart.buildOrUpdateScales (chart.esm.js:5505:1)
at Chart._updateScales (chart.esm.js:5652:1)
at Chart.update (chart.esm.js:5613:1)
at new Chart (chart.esm.js:5402:1)
at renderChart (chart.tsx:41:1)
at chart.tsx:90:1

chart.tsx:70 Uncaught TypeError: Cannot read properties of undefined (reading 'labels')
at ChartComponent (chart.tsx:70:1)
at renderWithHooks (react-dom.development.js:16141:1)
at updateForwardRef (react-dom.development.js:19968:1)
at beginWork (react-dom.development.js:22391:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
at invokeGuardedCallback (react-dom.development.js:4270:1)
at beginWork$1 (react-dom.development.js:27243:1)
at performUnitOfWork (react-dom.development.js:26392:1)
at workLoopSync (react-dom.development.js:26303:1)

react-dom.development.js:18525 The above error occurred in the <ForwardRef(ChartComponent)> component:

at ChartComponent (http://localhost:3000/static/js/bundle.js:27047:5)
at div
at Chart
at div
at App (http://localhost:3000/static/js/bundle.js:39:84)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18525
update.callback @ react-dom.development.js:18558
callCallback @ react-dom.development.js:13092
commitUpdateQueue @ react-dom.development.js:13113
commitLayoutEffectOnFiber @ react-dom.development.js:23204
commitLayoutMountEffects_complete @ react-dom.development.js:24461
commitLayoutEffects_begin @ react-dom.development.js:24447
commitLayoutEffects @ react-dom.development.js:24385
commitRootImpl @ react-dom.development.js:26651
commitRoot @ react-dom.development.js:26517
finishConcurrentRender @ react-dom.development.js:25731
performConcurrentWorkOnRoot @ react-dom.development.js:25648
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

import React from 'react'
import './Chart.css'
import { Line } from 'react-chartjs-2'

export const Chart = () => {

    return (
        <div className='chart'>
            <Line />
        </div>
    )
}

    "chart.js": "^3.7.1",
    "react": "^18.0.0",
    "react-chartjs-2": "^4.1.0",
    "react-dom": "^18.0.0",

v16.14.2 //node -v
8.7.0 //npm -v

Comments

[hoshi-takanori]

"category" is not a registered scale. というエラーなので、category を使ってるあたりに問題があるのでは…。

Answer 1

以下をよく読み試してみました。(書き直しています)
https://www.chartjs.org/docs/3.3.0/getting-started/integration.html

import React from 'react'
import './Chart.css'
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);


export const LineChart = () => {

    const data = {
        labels: ['1月','2月','3月','4月'],
        datasets:[
            {
            borderColor: 'rgba(35,200,153,1)',
            data: [100,120,50,110],
            lineTension: 0,
            }
        ]
        }

    return (
        <div className="chart">
            <Line data={data} />
        </div>
    )
}