import Chart from '@/components/chart/chart'
import useChart from '@/components/chart/useChart'

const series = [
  { name: 'Product A', data: [44, 55, 41, 67, 22, 43] },
  { name: 'Product B', data: [13, 23, 20, 8, 13, 27] },
  { name: 'Product C', data: [11, 17, 15, 15, 21, 14] },
  { name: 'Product D', data: [21, 7, 25, 13, 22, 8] }
]
export default function ChartColumnStacked() {
  const chartOptions = useChart({
    chart: {
      stacked: true,
      zoom: {
        enabled: true
      }
    },
    legend: {
      itemMargin: {
        vertical: 8
      },
      position: 'right',
      offsetY: 20
    },
    plotOptions: {
      bar: {
        columnWidth: '16%'
      }
    },
    stroke: {
      show: false
    },
    xaxis: {
      type: 'datetime',
      categories: [
        '01/01/2011 GMT',
        '01/02/2011 GMT',
        '01/03/2011 GMT',
        '01/04/2011 GMT',
        '01/05/2011 GMT',
        '01/06/2011 GMT'
      ]
    }
  })

  return <Chart type='bar' series={series} options={chartOptions} height={320} />
}
