51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
|
import React, { Component } from 'react';
|
||
|
|
import ReactApexChart from 'react-apexcharts';
|
||
|
|
|
||
|
|
interface State {
|
||
|
|
series: { name: string; data: number[] }[];
|
||
|
|
options: {
|
||
|
|
chart: { type: string; height: number };
|
||
|
|
dataLabels: { enabled: boolean };
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
class ApexChartDonut extends Component<{}, State> {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div id="chart">
|
||
|
|
<ReactApexChart
|
||
|
|
options={
|
||
|
|
{
|
||
|
|
chart: {
|
||
|
|
type: 'donut',
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
responsive: [{
|
||
|
|
breakpoint: 480,
|
||
|
|
options: {
|
||
|
|
chart: {
|
||
|
|
width: 300
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
labels: ["2020", "2019", "2018"],
|
||
|
|
colors: ['#5c6ac4', '#d4d4d8', '#e5e7eb'],
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
series={[38, 40, 25]}
|
||
|
|
type="donut"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div id="html-dist"></div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ApexChartDonut;
|