49 lines
1.0 KiB
JavaScript
49 lines
1.0 KiB
JavaScript
|
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;
|