Basic candlestick

import WestCoastCharts from 'west-coast-charts'

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "candlestick",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "WCSX",
      data: [
        {
          x: 1767571200000,
          y: [140, 142.51, 139.14, 141.96],
          volume: 851787
        },
        {
          x: 1767657600000,
          y: [141.96, 143.61, 141.69, 143.55],
          volume: 308159
        },
        {
          x: 1767744000000,
          y: [143.55, 144.85, 141.9, 142.71],
          volume: 814937
        },
        {
          x: 1767830400000,
          y: [142.71, 144.47, 142, 143.37],
          volume: 463980
        },
        {
          x: 1767916800000,
          y: [143.37, 148.81, 142.56, 147.59],
          volume: 394736
        },
        {
          x: 1768003200000,
          y: [147.59, 148.96, 146.35, 146.52],
          volume: 866148
        },
        {
          x: 1768089600000,
          y: [146.52, 146.62, 143.45, 144.71],
          volume: 948117
        },
        {
          x: 1768176000000,
          y: [144.71, 146.07, 143.64, 144.94],
          volume: 728628
        },
        {
          x: 1768262400000,
          y: [144.94, 145.45, 140.61, 141.2],
          volume: 539641
        },
        {
          x: 1768348800000,
          y: [141.2, 144.23, 140.59, 143.18],
          volume: 282076
        },
        {
          x: 1768435200000,
          y: [143.18, 144.94, 142.86, 144.1],
          volume: 462374
        },
        {
          x: 1768521600000,
          y: [144.1, 145.42, 142.28, 143.16],
          volume: 742839
        },
        {
          x: 1768608000000,
          y: [143.16, 144.2, 142.31, 143.44],
          volume: 357795
        },
        {
          x: 1768694400000,
          y: [143.44, 144.46, 141.37, 142.69],
          volume: 980707
        },
        {
          x: 1768780800000,
          y: [142.69, 143.32, 140.5, 140.86],
          volume: 392285
        },
        {
          x: 1768867200000,
          y: [140.86, 141.84, 140.81, 141.28],
          volume: 925860
        },
        {
          x: 1768953600000,
          y: [141.28, 141.64, 140.91, 141.27],
          volume: 282039
        },
        {
          x: 1769040000000,
          y: [141.27, 143.25, 140.5, 142.89],
          volume: 992357
        },
        {
          x: 1769126400000,
          y: [142.89, 143.45, 139.98, 140.66],
          volume: 911852
        },
        {
          x: 1769212800000,
          y: [140.66, 143.03, 139.26, 141.81],
          volume: 435700
        },
        {
          x: 1769299200000,
          y: [141.81, 142.45, 141.61, 142.33],
          volume: 277201
        },
        {
          x: 1769385600000,
          y: [142.33, 146.87, 140.8, 145.79],
          volume: 715126
        },
        {
          x: 1769472000000,
          y: [145.79, 147.16, 145.59, 146.41],
          volume: 743180
        },
        {
          x: 1769558400000,
          y: [146.41, 147.04, 143.11, 144.43],
          volume: 747612
        },
        {
          x: 1769644800000,
          y: [144.43, 145.05, 142.53, 144.09],
          volume: 408365
        },
        {
          x: 1769731200000,
          y: [144.09, 145.6, 141.08, 141.68],
          volume: 326134
        },
        {
          x: 1769817600000,
          y: [141.68, 142.43, 138.87, 139.95],
          volume: 776455
        },
        {
          x: 1769904000000,
          y: [139.95, 140.65, 137.91, 139.32],
          volume: 548060
        },
        {
          x: 1769990400000,
          y: [139.32, 141.2, 139.3, 141.15],
          volume: 207580
        },
        {
          x: 1770076800000,
          y: [141.15, 144.2, 140.66, 142.83],
          volume: 529274
        },
        {
          x: 1770163200000,
          y: [142.83, 145.98, 141.85, 145.72],
          volume: 538706
        },
        {
          x: 1770249600000,
          y: [145.72, 146.14, 144.7, 145.73],
          volume: 421963
        },
        {
          x: 1770336000000,
          y: [145.73, 146.92, 144.09, 144.55],
          volume: 591085
        },
        {
          x: 1770422400000,
          y: [144.55, 146.69, 143.48, 145.46],
          volume: 712357
        },
        {
          x: 1770508800000,
          y: [145.46, 146.89, 144.75, 146.6],
          volume: 422009
        },
        {
          x: 1770595200000,
          y: [146.6, 148.44, 145.64, 147.76],
          volume: 335798
        },
        {
          x: 1770681600000,
          y: [147.76, 149.65, 147.28, 149.19],
          volume: 403490
        },
        {
          x: 1770768000000,
          y: [149.19, 149.62, 148.88, 149.37],
          volume: 357669
        },
        {
          x: 1770854400000,
          y: [149.37, 151.54, 149.27, 150.56],
          volume: 550922
        },
        {
          x: 1770940800000,
          y: [150.56, 152.11, 149.94, 150.27],
          volume: 702857
        },
        {
          x: 1771027200000,
          y: [150.27, 152.41, 149.06, 151.85],
          volume: 750262
        },
        {
          x: 1771113600000,
          y: [151.85, 155.14, 151.7, 153.82],
          volume: 962985
        },
        {
          x: 1771200000000,
          y: [153.82, 154.97, 151.3, 152.02],
          volume: 918893
        },
        {
          x: 1771286400000,
          y: [152.02, 153.4, 150.96, 152.63],
          volume: 626612
        },
        {
          x: 1771372800000,
          y: [152.63, 152.93, 150.41, 150.93],
          volume: 210466
        },
        {
          x: 1771459200000,
          y: [150.93, 151.71, 147.77, 149.34],
          volume: 889336
        },
        {
          x: 1771545600000,
          y: [149.34, 149.82, 148.35, 149.64],
          volume: 494501
        },
        {
          x: 1771632000000,
          y: [149.64, 151.53, 149.41, 150.32],
          volume: 566837
        },
        {
          x: 1771718400000,
          y: [150.32, 153.74, 148.88, 153.32],
          volume: 958308
        },
        {
          x: 1771804800000,
          y: [153.32, 154.73, 152.17, 154.32],
          volume: 589957
        },
        {
          x: 1771891200000,
          y: [154.32, 157.15, 152.95, 157.01],
          volume: 540783
        },
        {
          x: 1771977600000,
          y: [157.01, 160.17, 156.3, 159.18],
          volume: 259981
        },
        {
          x: 1772064000000,
          y: [159.18, 161.54, 159.15, 160.02],
          volume: 530092
        },
        {
          x: 1772150400000,
          y: [160.02, 162.73, 159.93, 162.72],
          volume: 232938
        },
        {
          x: 1772236800000,
          y: [162.72, 162.86, 155.86, 156.24],
          volume: 382781
        },
        {
          x: 1772323200000,
          y: [156.24, 157.17, 155.51, 156.27],
          volume: 294876
        },
        {
          x: 1772409600000,
          y: [156.27, 158.87, 155.05, 157.36],
          volume: 228016
        },
        {
          x: 1772496000000,
          y: [157.36, 157.5, 154.06, 154.98],
          volume: 748227
        },
        {
          x: 1772582400000,
          y: [154.98, 155.79, 151.69, 152.29],
          volume: 911117
        },
        {
          x: 1772668800000,
          y: [152.29, 153.6, 151.64, 153.59],
          volume: 915072
        }
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  yaxis: {
    tooltip: {
      enabled: true
    }
  },
  title: {
    text: "WCSX daily candles"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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