import { Chart } from "react-google-charts";

  const BAR_ONE_CHART_DATA = [
  [
    "Element",
    "Density",
    {
      role: "style",
    },
    {
      sourceColumn: 0,
      role: "annotation",
      type: "string",
      calc: "stringify",
    },
  ],
  ["Copper", 10, "#a927f9", 10],
  ["Silver", 12, "#f8d62b", 12],
  ["Gold", 14, "#f73164", 14],
  ["Platinum", 16, "color: #7366ff", 14],
];

const BAR_ONE_CHART_OPTION: any = {
  title: "Density of Precious Metals, in g/cm^3",
  width: "100%",
  height: 400,
  bar: {
    groupWidth: "95%",
  },
  legend: {
    position: "none",
  },
};

const BarChart = () => {
  return (
    <Card>
      <CardBody className="chart-block">
        <div className="chart-overflow" id="bar-chart2">
          <Chart chartType="BarChart" width="100%" height="400px" data={BAR_ONE_CHART_DATA} options={BAR_ONE_CHART_OPTION} />
        </div>
      </CardBody>
    </Card>
  );
};

Remove package from project

npm uninstall react-google-charts

import { Radar } from "react-chartjs-2";

const RADAR_GRAPH_CHART = {
  labels: ["Ford", "Chevy", "Toyota", "Honda", "Mazda"],
  datasets: [
    {
      label: "My First Dataset",
      data: [12, 3, 5, 18, 7],
      fill: true,
      backgroundColor: "rgba(115, 102 ,255, 0.4)",
      borderColor: primary,
      borderWidth: 1,
      pointColor: primary,
    },
  ],
  options: {
    responsive: true,
    maintainAspectRatio: false,
    elements: {
      line: {
        borderWidth: 2,
      },
    },
    plugins: {
      datalabels: {
        display: false,
      },
      legend: {
        display: false,
      },
    },
  },
};

const RadarGraph = () => { 
  return (
    <Card>
      <CardBody className="chart-block">
        <Radar id="myRadarGraph" data={RADAR_GRAPH_CHART} options={RADAR_GRAPH_CHART.options} width={778} height={400} />
      </CardBody>
    </Card>
  );
};

Remove package from project

npm uninstall react-chartjs-2