Stacked area

import WestCoastCharts from 'west-coast-charts'

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "area",
    stacked: true,
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Organic",
      data: [
        [1767571200000, 44],
        [1767657600000, 45],
        [1767744000000, 48],
        [1767830400000, 45],
        [1767916800000, 48],
        [1768003200000, 48],
        [1768089600000, 45],
        [1768176000000, 48],
        [1768262400000, 45],
        [1768348800000, 46],
        [1768435200000, 46],
        [1768521600000, 45],
        [1768608000000, 46],
        [1768694400000, 49],
        [1768780800000, 48],
        [1768867200000, 48],
        [1768953600000, 47],
        [1769040000000, 44],
        [1769126400000, 47],
        [1769212800000, 46],
        [1769299200000, 44],
        [1769385600000, 43],
        [1769472000000, 41],
        [1769558400000, 40],
        [1769644800000, 38],
        [1769731200000, 39],
        [1769817600000, 38],
        [1769904000000, 41],
        [1769990400000, 42],
        [1770076800000, 45],
        [1770163200000, 46],
        [1770249600000, 44],
        [1770336000000, 42],
        [1770422400000, 42],
        [1770508800000, 39],
        [1770595200000, 38],
        [1770681600000, 36],
        [1770768000000, 39],
        [1770854400000, 42],
        [1770940800000, 45]
      ]
    },
    {
      name: "Paid",
      data: [
        [1767571200000, 28],
        [1767657600000, 25],
        [1767744000000, 27],
        [1767830400000, 30],
        [1767916800000, 29],
        [1768003200000, 28],
        [1768089600000, 28],
        [1768176000000, 26],
        [1768262400000, 29],
        [1768348800000, 25],
        [1768435200000, 23],
        [1768521600000, 20],
        [1768608000000, 23],
        [1768694400000, 25],
        [1768780800000, 24],
        [1768867200000, 27],
        [1768953600000, 26],
        [1769040000000, 29],
        [1769126400000, 28],
        [1769212800000, 31],
        [1769299200000, 33],
        [1769385600000, 33],
        [1769472000000, 35],
        [1769558400000, 35],
        [1769644800000, 37],
        [1769731200000, 41],
        [1769817600000, 42],
        [1769904000000, 38],
        [1769990400000, 36],
        [1770076800000, 35],
        [1770163200000, 34],
        [1770249600000, 34],
        [1770336000000, 30],
        [1770422400000, 29],
        [1770508800000, 27],
        [1770595200000, 24],
        [1770681600000, 27],
        [1770768000000, 30],
        [1770854400000, 33],
        [1770940800000, 36]
      ]
    },
    {
      name: "Referral",
      data: [
        [1767571200000, 17],
        [1767657600000, 14],
        [1767744000000, 17],
        [1767830400000, 17],
        [1767916800000, 17],
        [1768003200000, 17],
        [1768089600000, 14],
        [1768176000000, 18],
        [1768262400000, 20],
        [1768348800000, 24],
        [1768435200000, 24],
        [1768521600000, 23],
        [1768608000000, 24],
        [1768694400000, 24],
        [1768780800000, 24],
        [1768867200000, 27],
        [1768953600000, 28],
        [1769040000000, 25],
        [1769126400000, 28],
        [1769212800000, 27],
        [1769299200000, 25],
        [1769385600000, 25],
        [1769472000000, 29],
        [1769558400000, 29],
        [1769644800000, 29],
        [1769731200000, 29],
        [1769817600000, 33],
        [1769904000000, 34],
        [1769990400000, 38],
        [1770076800000, 37],
        [1770163200000, 36],
        [1770249600000, 33],
        [1770336000000, 37],
        [1770422400000, 34],
        [1770508800000, 32],
        [1770595200000, 35],
        [1770681600000, 38],
        [1770768000000, 34],
        [1770854400000, 37],
        [1770940800000, 34]
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  dataLabels: {
    enabled: false
  },
  fill: {
    type: "gradient",
    gradient: {
      opacityFrom: 0.6,
      opacityTo: 0.15
    }
  },
  title: {
    text: "Traffic by channel (k)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()