material

src/components/dashboardnew/gadgets/doughnut.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { Doughnut } from 'react-chartjs-2';
+import { registerChartJS, commonChartOptions } from './chartutils';
+
+registerChartJS();
+
+const DoughnutChart = () => {
+  const data = {
+    labels: ["Download Sales", "In-Store Sales", "Mail-Order Sales"],
+    datasets: [
+      {
+        data: [350, 450, 100],
+        backgroundColor: [
+          'rgba(255, 99, 132, 0.6)',
+          'rgba(54, 162, 235, 0.6)',
+          'rgba(255, 206, 86, 0.6)'
+        ],
+        borderColor: [
+          'rgba(255, 99, 132, 1)',
+          'rgba(54, 162, 235, 1)',
+          'rgba(255, 206, 86, 1)'
+        ],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const options = {
+    ...commonChartOptions,
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+      title: {
+        display: true,
+        text: 'Doughnut Chart',
+      },
+    },
+  };
+
+  return (
+    <Box sx={{ height: 400 }}>
+      <Doughnut data={data} options={options} />
+    </Box>
+  );
+};
+
+export default DoughnutChart;