# Bootstrap 5 Candlestick Chart

A candlestick chart is a financial chart that shows price movements or trading data.

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/).

## ApexCharts example

`adminkit.apexcharts()` renders the chart and updates it when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

```html
<div id="apexcharts-candlestick"></div>

<script>
var seriesData = [{
    x: new Date(2025, 1, 1),
    y: [51.98, 56.29, 51.59, 53.85]
  },
  {
    x: new Date(2025, 2, 1),
    y: [53.66, 54.99, 51.35, 52.95]
  },
  {
    x: new Date(2025, 3, 1),
    y: [52.96, 53.78, 51.54, 52.48]
  },
  {
    x: new Date(2025, 4, 1),
    y: [52.54, 52.79, 47.88, 49.24]
  },
  {
    x: new Date(2025, 5, 1),
    y: [49.10, 52.86, 47.70, 52.78]
  },
  {
    x: new Date(2025, 6, 1),
    y: [52.83, 53.48, 50.32, 52.29]
  },
  {
    x: new Date(2025, 7, 1),
    y: [52.20, 54.48, 51.64, 52.58]
  },
  {
    x: new Date(2025, 8, 1),
    y: [52.76, 57.35, 52.15, 57.03]
  },
  {
    x: new Date(2025, 9, 1),
    y: [57.04, 58.15, 48.88, 56.19]
  },
  {
    x: new Date(2025, 10, 1),
    y: [56.09, 58.85, 55.48, 58.79]
  },
  {
    x: new Date(2025, 11, 1),
    y: [58.78, 59.65, 58.23, 59.05]
  },
  {
    x: new Date(2026, 0, 1),
    y: [59.37, 61.11, 59.35, 60.34]
  },
  {
    x: new Date(2026, 1, 1),
    y: [60.40, 60.52, 56.71, 56.93]
  },
  {
    x: new Date(2026, 2, 1),
    y: [57.02, 59.71, 56.04, 56.82]
  },
  {
    x: new Date(2026, 3, 1),
    y: [56.97, 59.62, 54.77, 59.30]
  },
  {
    x: new Date(2026, 4, 1),
    y: [59.11, 62.29, 59.10, 59.85]
  },
  {
    x: new Date(2026, 5, 1),
    y: [59.97, 60.11, 55.66, 58.42]
  },
  {
    x: new Date(2026, 6, 1),
    y: [58.34, 60.93, 56.75, 57.42]
  },
  {
    x: new Date(2026, 7, 1),
    y: [57.76, 58.08, 51.18, 54.71]
  },
  {
    x: new Date(2026, 8, 1),
    y: [54.80, 61.42, 53.18, 57.35]
  },
  {
    x: new Date(2026, 9, 1),
    y: [57.56, 63.09, 57.00, 62.99]
  },
  {
    x: new Date(2026, 10, 1),
    y: [62.89, 63.42, 59.72, 61.76]
  },
  {
    x: new Date(2026, 11, 1),
    y: [61.71, 64.15, 61.29, 63.04]
  }
];
var options = {
  chart: {
    height: 350,
    type: "candlestick",
  },
  series: [{
    data: seriesData
  }],
  stroke: {
    width: 1
  },
  xaxis: {
    type: "datetime"
  }
};
adminkit.apexcharts("#apexcharts-candlestick", function () {
  return options;
});
</script>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/charts/candlestick-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io