Range band with line and forecast

import WestCoastCharts from 'west-coast-charts'

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "rangeArea",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      type: "rangeArea",
      name: "Expected range",
      data: [
        {
          x: 1772323200000,
          y: [93.8, 101.8]
        },
        {
          x: 1772409600000,
          y: [98.6, 107.1]
        },
        {
          x: 1772496000000,
          y: [97.8, 106.8]
        },
        {
          x: 1772582400000,
          y: [100.7, 110.2]
        },
        {
          x: 1772668800000,
          y: [101.8, 111.8]
        },
        {
          x: 1772755200000,
          y: [99.8, 110.3]
        },
        {
          x: 1772841600000,
          y: [96.5, 107.5]
        },
        {
          x: 1772928000000,
          y: [96.5, 108]
        },
        {
          x: 1773014400000,
          y: [97.2, 109.2]
        },
        {
          x: 1773100800000,
          y: [95.2, 107.7]
        },
        {
          x: 1773187200000,
          y: [92.7, 105.7]
        },
        {
          x: 1773273600000,
          y: [93.9, 107.4]
        },
        {
          x: 1773360000000,
          y: [88.5, 102.5]
        },
        {
          x: 1773446400000,
          y: [89, 103.5]
        },
        {
          x: 1773532800000,
          y: [89.6, 104.6]
        },
        {
          x: 1773619200000,
          y: [86.9, 102.4]
        },
        {
          x: 1773705600000,
          y: [90.8, 106.8]
        },
        {
          x: 1773792000000,
          y: [87.7, 104.2]
        },
        {
          x: 1773878400000,
          y: [88.5, 105.5]
        },
        {
          x: 1773964800000,
          y: [87.7, 105.2]
        },
        {
          x: 1774051200000,
          y: [88.9, 106.9]
        },
        {
          x: 1774137600000,
          y: [89.4, 107.9]
        },
        {
          x: 1774224000000,
          y: [90.7, 109.7]
        },
        {
          x: 1774310400000,
          y: [94.7, 114.2]
        },
        {
          x: 1774396800000,
          y: [94.4, 114.4]
        },
        {
          x: 1774483200000,
          y: [92, 112.5]
        },
        {
          x: 1774569600000,
          y: [92.4, 113.4]
        },
        {
          x: 1774656000000,
          y: [92.9, 114.4]
        },
        {
          x: 1774742400000,
          y: [96.2, 118.2]
        },
        {
          x: 1774828800000,
          y: [92.9, 115.4]
        },
        {
          x: 1774915200000,
          y: [92.5, 115.5]
        },
        {
          x: 1775001600000,
          y: [93.3, 116.8]
        },
        {
          x: 1775088000000,
          y: [93.5, 117.5]
        },
        {
          x: 1775174400000,
          y: [93.3, 117.8]
        },
        {
          x: 1775260800000,
          y: [93.4, 118.4]
        },
        {
          x: 1775347200000,
          y: [95.5, 121]
        },
        {
          x: 1775433600000,
          y: [96.9, 122.9]
        },
        {
          x: 1775520000000,
          y: [102.7, 129.2]
        },
        {
          x: 1775606400000,
          y: [106, 133]
        },
        {
          x: 1775692800000,
          y: [106.9, 134.4]
        }
      ]
    },
    {
      type: "line",
      name: "Median",
      data: [
        [1772323200000, 97.8],
        [1772409600000, 102.8],
        [1772496000000, 102.3],
        [1772582400000, 105.4],
        [1772668800000, 106.8],
        [1772755200000, 105],
        [1772841600000, 102],
        [1772928000000, 102.2],
        [1773014400000, 103.2],
        [1773100800000, 101.4],
        [1773187200000, 99.2],
        [1773273600000, 100.6],
        [1773360000000, 95.5],
        [1773446400000, 96.2],
        [1773532800000, 97.1],
        [1773619200000, 94.6],
        [1773705600000, 98.8],
        [1773792000000, 95.9],
        [1773878400000, 97],
        [1773964800000, 96.4],
        [1774051200000, 97.9],
        [1774137600000, 98.6],
        [1774224000000, 100.2],
        [1774310400000, 104.4],
        [1774396800000, 104.4],
        [1774483200000, 102.2]
      ]
    },
    {
      type: "line",
      name: "Forecast",
      data: [
        [1774483200000, 102.2],
        [1774569600000, 103.5],
        [1774656000000, 104.8],
        [1774742400000, 109],
        [1774828800000, 106.5],
        [1774915200000, 107],
        [1775001600000, 108.6],
        [1775088000000, 109.7],
        [1775174400000, 110.3],
        [1775260800000, 111.3],
        [1775347200000, 114.2],
        [1775433600000, 116.5],
        [1775520000000, 123.1],
        [1775606400000, 127.3],
        [1775692800000, 129]
      ]
    }
  ],
  stroke: {
    curve: "smooth",
    width: [0, 2.5, 2.5],
    dashArray: [0, 0, 6]
  },
  fill: {
    opacity: [0.24, 1, 1]
  },
  xaxis: {
    type: "datetime"
  },
  legend: {
    show: true
  },
  title: {
    text: "Demand forecast with confidence band"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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