Untitled

import React from "react";
import Chart from "react-apexcharts";

const Analytics = ({ loading }) => {
  const data = {
    series: [60, 40, 45],
    chartOptions: {
      chart: {
        type: "donut",
      },
      responsive: [
        {
          breakpoint: undefined,
          options: {
            marginTop: 20,
          },
        },
      ],
      legend: {
        position: "bottom",
        fontSize: "14px",
        fontFamily: "Helvetica, Arial",
        fontWeight: 500,
        labels: {
          colors: "#9BA1AA",
        },
        markers: {
          width: 14,
          height: 14,
          radius: 4,
        },
      },
      plotOptions: {
        pie: {
          donut: {
            labels: {
              show: true,
              total: {
                show: true,
                showAlways: true,
                label: "Total",
                fontSize: "22px",
                fontFamily: "Helvetica, Arial, sans-serif",
                fontWeight: 500,
                color: "#9BA1AA",
                formatter: function (w) {
                  return w.globals.seriesTotals.reduce((a, b) => {
                    return a + b;
                  }, 0);
                },
              },
            },
          },
        },
      },
      labels: ["Comedy", "Action", "SciFi"],
      dataLabels: {
        enabled: false,
      },
      theme: {
        palette: "palette10",
      },
      colors: ["#3A36DB", "#03A89E", "#FF69B4"],
      title: {
        text: "Analytics",
        align: "left",
        margin: 20,
        offsetX: 0,
        offsetY: 0,
        floating: false,
        style: {
          fontSize: 20,
          fontWeight: 500,
          fontFamily: "Helvetica, Arial, sans-serif",
          color: "#1B2124",
        },
      },
    },
  };

  return (
    <>
      {!loading && (
        <Chart
          options={data.chartOptions}
          series={data.series}
          type="donut"
          width="100%"
          height="100%"
        />
      )}
    </>
  );
};

export default Analytics;