# React Candlestick Chart

A React candlestick chart with ApexCharts in AdminKit PRO: open, high, low and close prices per period, as on the crypto dashboard of the demo.

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

A candlestick chart shows how a price moved in each period, such as a month. Each candle holds four prices for its period: open, high, low and close.

In [AdminKit for React](/react/) you draw it with `ApexChart`, a React component around [ApexCharts](https://apexcharts.com/). The crypto dashboard uses it for its LTC/BTC price chart. [Chart setup](/react/docs/charts/overview/#apexcharts) covers the component itself.

## Example

```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>
```
```tsx code
import { ApexChart } from "@/components/plugins/apexcharts";

// One candle per month: y is [open, high, low, close]
const prices = [
  { 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.1, 52.86, 47.7, 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.2, 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.4, 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.3] },
  { x: new Date(2026, 4, 1), y: [59.11, 62.29, 59.1, 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.8, 61.42, 53.18, 57.35] },
  { x: new Date(2026, 9, 1), y: [57.56, 63.09, 57.0, 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] },
];

export function PriceChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          chart: { height: 350, type: "candlestick" },
          series: [{ data: prices }],
          stroke: { width: 1 },
          xaxis: { type: "datetime" },
        })}
      />
    </div>
  );
}
```

Watch the dates: JavaScript counts months from 0, so `new Date(2025, 1, 1)` is 1 February 2025.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(theme: Theme) => ApexOptions` | | The ApexCharts options, with `series` and `chart.type`. Called again with the new colors when the color mode changes |

## Data

Each point is `{ x, y }`. `x` is the date of the period, as a `Date` or a timestamp. `y` holds the four prices in the order open, high, low, close. The crypto dashboard keeps its prices as `[year, month, open, high, low, close]` rows and maps them to this shape:

```tsx
series: [
  {
    data: prices.map(([year, month, ...y]) => ({
      x: new Date(year, month, 1),
      y,
    })),
  },
],
```

## Candle colors

Candlesticks do not use the series colors of the wrapper. ApexCharts draws rising candles green and falling candles red, in its own shades. To use the theme colors instead, which follow the color mode, set them in `plotOptions.candlestick.colors`:

```tsx
<ApexChart
  options={(theme) => ({
    chart: { height: 350, type: "candlestick" },
    series: [{ data: prices }],
    plotOptions: {
      candlestick: {
        colors: { upward: theme.success, downward: theme.danger },
      },
    },
    xaxis: { type: "datetime" },
  })}
/>
```

## Accessibility

- Rising and falling candles have the same shape and differ by color only. Show the latest price and change in text near the chart, as the crypto dashboard does with its stat cards.
- The four prices of a candle show in the tooltip on hover only. For exact values, add a table.
- `ApexChart` passes other props to its `<div>`, so `role="figure"` and `aria-label="LTC/BTC price per month"` name the chart.

## Related

- [Next.js candlestick chart](/nextjs/docs/charts/candlestick-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 candlestick chart](/bootstrap/docs/charts/candlestick-chart/): the ApexCharts example of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` components
- [React area chart](/react/docs/charts/area-chart/): a value over time, filled
- [Crypto dashboard](https://react-demo.adminkit.io/dashboard-crypto) and [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts)

---

Canonical HTML page: https://adminkit.io/react/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