My react-chartjs-2 components are not working and are breaking my app

Question

I have seen many questions related to this issue on Stack Overflow but all them use react-chartjs-2 and chart.js together. I am only using react-chartjs-2 without chart.js (As I am following a MERN ecommerce course on YouTube.)

The problem is that my charts don't want to appear on my website, and they crash my page.

On my console log I recieved an error of:

 Uncaught Error: "category" is not a registered scale.

where I am importing the charts: dashboard.jsx :

import React, { useEffect } from "react";
import Sidebar from "./Sidebar.js";
import "./dashboard.css";
import { Typography } from "@material-ui/core";
import { Link } from "react-router-dom";
import { Doughnut, Line } from "react-chartjs-2";
import { useSelector, useDispatch } from "react-redux";
import MetaData from "../../more/MetaData";
import Loading from "../../more/Loading";
import { getAdminProduct } from "../../actions/ProductActions.js";
import { getAllOrders } from "../../actions/OrderAction.js";
import { getAllUsers } from "../../actions/userActions.js";

const Dashboard = () => {
  const dispatch = useDispatch();

  const { products, loading } = useSelector((state) => state.products);

  const { orders } = useSelector((state) => state.AllOrders);

  const { users } = useSelector((state) => state.allUsers);

  let outOfStock = 0;

  products &&
    products.forEach((item) => {
      if (item.Stock === 0) {
        outOfStock += 1;
      }
    });

  useEffect(() => {
    dispatch(getAdminProduct());
    dispatch(getAllOrders());
    dispatch(getAllUsers());
  }, [dispatch]);

  let totalAmount = 0;
  orders &&
    orders.forEach((item) => {
      totalAmount += item.totalPrice;
    });

  const lineState = {
    labels: ["Initial Amount", "Amount Earned"],
    datasets: [
      {
        label: "TOTAL AMOUNT",
        backgroundColor: ["#3BB77E"],
        hoverBackgroundColor: ["#3BB77E"],
        data: [0, totalAmount],
      },
    ],
  };

  const doughnutState = {
    labels: ["Out of Stock", "InStock"],
    datasets: [
      {
        backgroundColor: ["#00A6B4", "#6800B4"],
        hoverBackgroundColor: ["#4B5000", "#35014F"],
        data: [outOfStock, products?.length - outOfStock],
      },
    ],
  };

  return (
    <>
      {loading ? (
        <Loading />
      ) : (
        <div className="dashboard">
          <MetaData title="Dashboard" />
          <Sidebar />

          <div className="dashboardContainer">
            <Typography component="h1">Dashboard</Typography>

            <div className="dashboardSummary">
              <div>
                <p>
                  Total Amount <br /> ${totalAmount}
                </p>
              </div>
              <div className="dashboardSummaryBox2">
                <Link to="/admin/products">
                  <p>Product</p>
                  <p>{products && products.length}</p>
                </Link>
                <Link to="/admin/orders">
                  <p>Orders</p>
                  <p>{orders && orders.length}</p>
                </Link>
                <Link to="/admin/users">
                  <p>Users</p>
                  <p>{users && users.length}</p>
                </Link>
              </div>
            </div>

            <div className="lineChart">
              <Line data={lineState} />
            </div>

            <div className="doughnutChart">
              <Doughnut data={doughnutState} />
            </div>
          </div>
        </div>
      )}
    </>
  );
};
export default Dashboard;

My Line chart and Doughnut chart are not working and break my app but when I comment them out my website works again.

I am using react-chartjs-2 version 5.0.1

I have been trying to solve this issue for days now but from what I have seen people seem to use react-chartjs-2 with chart.js together but my course instructor doesn't and it works for him.

Any help would be appreciated. Thank you

score 1 · Accepted Answer · answered Dec 16 '22 at 22:04

1

Chartjs is tree shakable so you need to register category or you can just register everything.

import { CategoryScale, Chart } from "chart.js";

Chart.register(CategoryScale);

// OR

import { Chart, registerables } from "chart.js"

Chart.register(...registerables);

source: https://react-chartjs-2.js.org/faq/registered-scale/

answered Dec 16 '22 at 22:04

Mike Will

36
4

Thank you very much for your help it worked. You see I was using react-chartjs-2 without chart.js (Just like my course instructor) . So I installed chart.js and did what you asked me to do and it worked. Again Thank you very much – MegaMindTheCoder Dec 17 '22 at 06:15

My react-chartjs-2 components are not working and are breaking my app

1 Answers1