Candles on a category axis

Weekly candles labelled by week, no time gaps.

Chart type
Candlestick candlestick
Tier
Free Core
Collection
Candlestick
Render
Live, site theme
View .md Agent setup
LIVE/candlestick/candlestick-category3 of 4 in Candlestick

Configuration

Raw Standalone
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "candlestick",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Weekly",
      data: [
        {
          x: "W1",
          y: [60, 61.1, 56.82, 57.86]
        },
        {
          x: "W2",
          y: [57.86, 59.06, 53.38, 54.54]
        },
        {
          x: "W3",
          y: [54.54, 57.48, 53.76, 57.18]
        },
        {
          x: "W4",
          y: [57.18, 58.75, 53.9, 54.07]
        },
        {
          x: "W5",
          y: [54.07, 54.48, 52.24, 52.98]
        },
        {
          x: "W6",
          y: [52.98, 53.59, 46.74, 47.73]
        },
        {
          x: "W7",
          y: [47.73, 48.4, 46.68, 46.76]
        },
        {
          x: "W8",
          y: [46.76, 53.11, 46.41, 51.64]
        },
        {
          x: "W9",
          y: [51.64, 53.09, 48.72, 49.16]
        },
        {
          x: "W10",
          y: [49.16, 49.47, 48.23, 48.93]
        },
        {
          x: "W11",
          y: [48.93, 55.27, 47.53, 54.33]
        },
        {
          x: "W12",
          y: [54.33, 59.15, 53.95, 58.56]
        },
        {
          x: "W13",
          y: [58.56, 59.62, 57.22, 58.75]
        },
        {
          x: "W14",
          y: [58.75, 62.36, 58.57, 61.53]
        },
        {
          x: "W15",
          y: [61.53, 62.6, 60.47, 60.5]
        },
        {
          x: "W16",
          y: [60.5, 63.68, 59.89, 62.28]
        },
        {
          x: "W17",
          y: [62.28, 66.37, 61.45, 65.67]
        },
        {
          x: "W18",
          y: [65.67, 66.2, 65.27, 66.16]
        },
        {
          x: "W19",
          y: [66.16, 67.16, 59.69, 61.06]
        },
        {
          x: "W20",
          y: [61.06, 61.14, 57.75, 58.35]
        },
        {
          x: "W21",
          y: [58.35, 59.75, 55.94, 57.38]
        },
        {
          x: "W22",
          y: [57.38, 58.63, 56.36, 56.61]
        },
        {
          x: "W23",
          y: [56.61, 57.76, 50.99, 52.1]
        },
        {
          x: "W24",
          y: [52.1, 52.69, 50.88, 52.62]
        },
        {
          x: "W25",
          y: [52.62, 54.14, 50.58, 50.73]
        },
        {
          x: "W26",
          y: [50.73, 51.36, 49.6, 49.66]
        }
      ]
    }
  ],
  xaxis: {
    type: "category",
    tickAmount: 13
  },
  title: {
    text: "Weekly candles"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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