<template>
  <div>
    <div id="chart">
      <apexchart
        type="streamgraph"
        height="380"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          name: 'Drama',
          data: [
            { x: '2024-01-01', y: 32 },
            { x: '2024-02-01', y: 35 },
            { x: '2024-03-01', y: 41 },
            { x: '2024-04-01', y: 38 },
            { x: '2024-05-01', y: 30 },
            { x: '2024-06-01', y: 26 },
            { x: '2024-07-01', y: 24 },
            { x: '2024-08-01', y: 29 },
            { x: '2024-09-01', y: 37 },
            { x: '2024-10-01', y: 44 },
            { x: '2024-11-01', y: 48 },
            { x: '2024-12-01', y: 52 },
          ],
        },
        {
          name: 'Comedy',
          data: [
            { x: '2024-01-01', y: 24 },
            { x: '2024-02-01', y: 22 },
            { x: '2024-03-01', y: 20 },
            { x: '2024-04-01', y: 23 },
            { x: '2024-05-01', y: 27 },
            { x: '2024-06-01', y: 31 },
            { x: '2024-07-01', y: 34 },
            { x: '2024-08-01', y: 33 },
            { x: '2024-09-01', y: 28 },
            { x: '2024-10-01', y: 25 },
            { x: '2024-11-01', y: 26 },
            { x: '2024-12-01', y: 30 },
          ],
        },
        {
          name: 'Documentary',
          data: [
            { x: '2024-01-01', y: 9 },
            { x: '2024-02-01', y: 11 },
            { x: '2024-03-01', y: 14 },
            { x: '2024-04-01', y: 18 },
            { x: '2024-05-01', y: 21 },
            { x: '2024-06-01', y: 19 },
            { x: '2024-07-01', y: 15 },
            { x: '2024-08-01', y: 13 },
            { x: '2024-09-01', y: 12 },
            { x: '2024-10-01', y: 14 },
            { x: '2024-11-01', y: 17 },
            { x: '2024-12-01', y: 16 },
          ],
        },
        {
          name: 'Sport',
          data: [
            { x: '2024-01-01', y: 6 },
            { x: '2024-02-01', y: 14 },
            { x: '2024-03-01', y: 12 },
            { x: '2024-04-01', y: 9 },
            { x: '2024-05-01', y: 11 },
            { x: '2024-06-01', y: 28 },
            { x: '2024-07-01', y: 36 },
            { x: '2024-08-01', y: 31 },
            { x: '2024-09-01', y: 18 },
            { x: '2024-10-01', y: 12 },
            { x: '2024-11-01', y: 10 },
            { x: '2024-12-01', y: 13 },
          ],
        },
        {
          name: 'Kids',
          data: [
            { x: '2024-01-01', y: 18 },
            { x: '2024-02-01', y: 16 },
            { x: '2024-03-01', y: 15 },
            { x: '2024-04-01', y: 17 },
            { x: '2024-05-01', y: 19 },
            { x: '2024-06-01', y: 26 },
            { x: '2024-07-01', y: 33 },
            { x: '2024-08-01', y: 35 },
            { x: '2024-09-01', y: 21 },
            { x: '2024-10-01', y: 18 },
            { x: '2024-11-01', y: 20 },
            { x: '2024-12-01', y: 27 },
          ],
        },
        {
          name: 'News',
          data: [
            { x: '2024-01-01', y: 12 },
            { x: '2024-02-01', y: 13 },
            { x: '2024-03-01', y: 11 },
            { x: '2024-04-01', y: 10 },
            { x: '2024-05-01', y: 12 },
            { x: '2024-06-01', y: 14 },
            { x: '2024-07-01', y: 13 },
            { x: '2024-08-01', y: 15 },
            { x: '2024-09-01', y: 17 },
            { x: '2024-10-01', y: 22 },
            { x: '2024-11-01', y: 29 },
            { x: '2024-12-01', y: 19 },
          ],
        },
      ],
      chartOptions: {
        chart: {
          type: 'streamgraph',
          height: 380,
        },
        colors: [
          '#2E93fA',
          '#66DA26',
          '#F97316',
          '#0EA5E9',
          '#FACC15',
          '#E11D48',
        ],
        title: {
          text: 'Where the streaming hours went',
          align: 'left',
        },
        subtitle: {
          text: 'Illustrative data. Thickness is hours; the baseline drifts to keep the bands level.',
          align: 'left',
        },
        xaxis: {
          type: 'datetime',
        },
        tooltip: {
          x: {
            format: 'MMM yyyy',
          },
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 650px;
  margin: 35px auto;
}
</style>