# Candles on a category axis (Candlestick example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/candlestick/candlestick-category/ · Index for agents: https://westcoast-charts.com/llms.txt

Weekly candles labelled by week, no time gaps.

- Chart type: `candlestick` (Candlestick)
- Collection: Candlestick · Candlestick
- Raw configuration: https://westcoast-charts.com/gallery-src/candlestick/candlestick-category.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/candlestick/candlestick-category.html

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
```

## Options

```js
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)
await chart.render()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export candlestick-candlestick-category.json --out candlestick-candlestick-category.svg --with-table` (save the options above as JSON first)