AdminKitDocs
Charts

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.

Pro

This component is only available in AdminKit PRO. Learn more.

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 you draw it with ApexChart, a React component around ApexCharts. The crypto dashboard uses it for its LTC/BTC price chart. Chart setup covers the component itself.

Example

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

PropTypeDefaultDescription
options(theme: Theme) => ApexOptionsThe 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:

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:

<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.

Last updated on

Bubble chartPro

A React bubble chart with ApexCharts in AdminKit PRO: three values per point, x, y and the bubble size, drawn by the ApexChart component.

Column chartPro

A React column chart with ApexCharts in AdminKit PRO: vertical bars that compare three series per month, with a formatted tooltip and theme colors.

On this page

ExamplePropsDataCandle colorsAccessibilityRelated