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;