npm i react-chartjs-2

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

const DoughnutChart = () => {
  const doughnutChartData = {
    type: 'doughnut',
    labels: ["Tokyo","Mumbai","Mexico City","Shanghai"],
    datasets: [
      {
        data:[1424, 250,	500,	1040],
        borderColor:[primary,secondary,"#FD7E40","#2E8DD3"],
        backgroundColor: [primary,secondary,"#FD7E40","#2E8DD3"],
        borderWidth:1
      },
    ],
    options: {
      responsive: true,
      maintainAspectRatio: false,
    }
  };
  return (
    <Col xl="6">
      <Card>
        <CardCommonHeader title={ChatJSLineChart} borderClass={true} headClass="pb-0"/>
        <CardBody>
          <div className="chart-container chart-block">
            <Doughnut data={doughnutChartData} options={doughnutChartDataOption} width={734} height={335} />
          </div>
        </CardBody>
      </Card>
    </Col>
  )
}

npm i react-apexcharts

import ReactApexChart from "react-apexcharts";

const BasicAreaChart = () => {
  const basicAreaChartData: ApexOptions = {
    series: [
      {
        name: "Desktop",
        data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
      },
    ],
    chart: {
      height: 350,
      type: "line",
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
    },
    title: {
      text: "Product Trends by Month",
      align: "left",
    },
    grid: {
      row: {
        colors: ["var(--light-color)", "transparent"], // takes an array which will be repeated on columns
        opacity: 0.5,
      },
    },
    colors: [primary],
    xaxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
    },
  };
  return (
    <Col xl="6">
      <Card>
        <CardCommonHeader title={BasicAreaCharts} borderClass={true} headClass="pb-0" />
        <CardBody>
          <div>
            <ReactApexChart options={basicAreaChartData} series={basicAreaChartData.series} type="area" height={350} />
          </div>
        </CardBody>
      </Card>
    </Col>
  );
};