import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [68, 82, 54, 91],
    options: {
      chart: {
        height: 350,
        type: 'radialBar',
      },
      plotOptions: {
        radialBar: {
          dataLabels: {
            name: {
              fontSize: '22px',
            },
            value: {
              fontSize: '16px',
            },
            total: {
              show: true,
              label: 'Average',
              formatter: function (w) {
                // custom formatter: rounded average across all series, with a unit
                var total = w.globals.seriesTotals.reduce(function (a, b) {
                  return a + b
                }, 0)
                return Math.round(total / w.globals.series.length) + '%'
              },
            },
          },
        },
      },
      labels: ['North', 'South', 'East', 'West'],
    },
  })

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={state.options}
          series={state.series}
          type="radialBar"
          height={350}
        />
      </div>
    </div>
  )
}

export default ApexChart