-1

I am trying to render a simple chart it is working fine for Bar component but when i change to the donut component or any other components then its rendering a blank white page

import { Box } from "@chakra-ui/react";
import React from "react";

import { Pie, Bar, Line, Doughnut } from "react-chartjs-2";

function Donutchart() {
  return (
    <Box maxH={400} maxWidth={600}>
      <Doughnut
        options={{
          responsive: true,
          plugins: {
            title: {
              display: false,
            },
          },
          maintainAspectRatio: false,
        }}
        data={{
          labels: ["Energy", "envi", "retail", "govt"],
          datasets: [
            {
              label: "Sector",
              data: [54, 36, 12, 45],
              backgroundColor: "rgba(53, 162, 235, 0.5)",
            },
          ],
        }}
        height={400}
        width={600}
      />
    </Box>
  );
}
export default Donutchart;
Pradeep
  • 1
  • 1

1 Answers1

0

Also try to import the registers like so

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';


ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

i hope this helps

abdulfrfr
  • 21
  • 2