"category" is not a registered scale

Question

I am following along a video making a crypto app that displays info and a line chart about cryptocurrency price history. However regardless of what I try it says "category" is not a registered scale. when this is the exact solution that worked in the video.

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Col, Row, Typography } from 'antd';

const { Title } = Typography;

const LineChart = ({ coinHistory, currentPrice, coinName }) => {
  const coinPrice = [];
  const coinTimestamp = [];

  for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
    coinPrice.push(coinHistory?.data?.history[i].price);
  }

  for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
    coinTimestamp.push(new Date(coinHistory?.data?.history[i].timestamp).toLocaleDateString());
  }
  const data = {
    labels: coinTimestamp,
    datasets: [
      {
        label: 'Price In USD',
        data: coinPrice,
        fill: false,
        backgroundColor: '#0071bd',
        borderColor: '#0071bd',
      },
    ],
  };

  const options = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };

  return (
    <>
      <Row className="chart-header">
        <Title level={2} className="chart-title">{coinName} Price Chart </Title>
        <Col className="price-container">
          <Title level={5} className="price-change">Change: {coinHistory?.data?.change}%</Title>
          <Title level={5} className="current-price">Current {coinName} Price: $ {currentPrice}</Title>
        </Col>
      </Row>
      <Line data={data} options={options} />
    </>
  );
};

export default LineChart;

The table to show a line of a cryptos price history with price and date.

Answer 1

According to official ChartJS website, you need to register every Chart component you want to use: https://www.chartjs.org/docs/3.3.0/getting-started/integration.html#bundlers-webpack-rollup-etc

Therefore, the easiest way to get around would be to call these in your code to register everything Chartjs component (got them from the official doc above)

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

You can definitely optionally replace the registerables to only the components you are using (i.e CategoryScale)

Here is another useful link on how the register is done for the react-chart-js project https://react-chartjs-2.netlify.app/examples/vertical-bar-chart/