Basic range area

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: [
    {
      name: "Low–high °C",
      data: [
        {
          x: 1780272000000,
          y: [14.9, 25.1]
        },
        {
          x: 1780358400000,
          y: [14.2, 24.9]
        },
        {
          x: 1780444800000,
          y: [14.8, 24.6]
        },
        {
          x: 1780531200000,
          y: [15, 24.9]
        },
        {
          x: 1780617600000,
          y: [15.7, 25.5]
        },
        {
          x: 1780704000000,
          y: [14.9, 22.4]
        },
        {
          x: 1780790400000,
          y: [18.6, 27.6]
        },
        {
          x: 1780876800000,
          y: [16.6, 26.7]
        },
        {
          x: 1780963200000,
          y: [18.5, 28.5]
        },
        {
          x: 1781049600000,
          y: [17.6, 28.1]
        },
        {
          x: 1781136000000,
          y: [17.9, 26.9]
        },
        {
          x: 1781222400000,
          y: [18.8, 27.1]
        },
        {
          x: 1781308800000,
          y: [18.3, 28.1]
        },
        {
          x: 1781395200000,
          y: [18, 27.3]
        },
        {
          x: 1781481600000,
          y: [16.1, 24.1]
        },
        {
          x: 1781568000000,
          y: [17.3, 25.6]
        },
        {
          x: 1781654400000,
          y: [18.5, 29.5]
        },
        {
          x: 1781740800000,
          y: [16.2, 25.5]
        },
        {
          x: 1781827200000,
          y: [18.2, 28.8]
        },
        {
          x: 1781913600000,
          y: [17.3, 28.2]
        },
        {
          x: 1782000000000,
          y: [16.5, 23.6]
        },
        {
          x: 1782086400000,
          y: [19.1, 28]
        },
        {
          x: 1782172800000,
          y: [17.4, 26.9]
        },
        {
          x: 1782259200000,
          y: [18.1, 27.5]
        },
        {
          x: 1782345600000,
          y: [16.6, 26.8]
        },
        {
          x: 1782432000000,
          y: [14.9, 25.2]
        },
        {
          x: 1782518400000,
          y: [15.4, 26]
        },
        {
          x: 1782604800000,
          y: [14.1, 22.7]
        },
        {
          x: 1782691200000,
          y: [12.4, 22.1]
        },
        {
          x: 1782777600000,
          y: [13.6, 21]
        },
        {
          x: 1782864000000,
          y: [12.4, 22.2]
        },
        {
          x: 1782950400000,
          y: [13, 21.1]
        },
        {
          x: 1783036800000,
          y: [12.4, 19.5]
        },
        {
          x: 1783123200000,
          y: [11.4, 20.4]
        },
        {
          x: 1783209600000,
          y: [13.1, 22.2]
        },
        {
          x: 1783296000000,
          y: [11.9, 20.3]
        },
        {
          x: 1783382400000,
          y: [11.9, 22.5]
        },
        {
          x: 1783468800000,
          y: [10.4, 18.8]
        },
        {
          x: 1783555200000,
          y: [10.7, 19.3]
        },
        {
          x: 1783641600000,
          y: [9.9, 19.5]
        },
        {
          x: 1783728000000,
          y: [11.7, 20.7]
        },
        {
          x: 1783814400000,
          y: [10.6, 20.7]
        },
        {
          x: 1783900800000,
          y: [9.9, 17.9]
        },
        {
          x: 1783987200000,
          y: [11.2, 21.6]
        },
        {
          x: 1784073600000,
          y: [9, 18.5]
        },
        {
          x: 1784160000000,
          y: [10.8, 18.8]
        },
        {
          x: 1784246400000,
          y: [11.2, 20.5]
        },
        {
          x: 1784332800000,
          y: [11.7, 22.3]
        },
        {
          x: 1784419200000,
          y: [11.8, 20.6]
        },
        {
          x: 1784505600000,
          y: [11.4, 20.1]
        },
        {
          x: 1784592000000,
          y: [10.4, 19.3]
        },
        {
          x: 1784678400000,
          y: [12.1, 20.7]
        },
        {
          x: 1784764800000,
          y: [10.3, 18]
        },
        {
          x: 1784851200000,
          y: [12.7, 21.3]
        },
        {
          x: 1784937600000,
          y: [12.4, 22.5]
        },
        {
          x: 1785024000000,
          y: [12.8, 23.1]
        },
        {
          x: 1785110400000,
          y: [14.5, 21.7]
        },
        {
          x: 1785196800000,
          y: [14.5, 24.6]
        },
        {
          x: 1785283200000,
          y: [15.7, 25.7]
        },
        {
          x: 1785369600000,
          y: [14.8, 23.2]
        }
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  stroke: {
    curve: "smooth",
    width: 1
  },
  title: {
    text: "Daily temperature range, summer"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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