CandlestickChart

Usage

CandlestickChart is a financial chart that displays open, high, low and close (OHLC) values as candles. The body of a candle shows the open–close range, the thin line shows the high–low range.

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <CandlestickChart h={300} data={data} dataKey="date"  />;
}

CandlestickChart requires an array of objects as the data prop. Set the dataKey prop to the key that is used for the x-axis (category) values. By default, the chart reads OHLC values from the open, high, low and close keys of each data object:

import { CandlestickChart } from '@mantine/charts';

const data = [
  { date: 'Mar 01', open: 136, high: 142, low: 133, close: 140 },
  { date: 'Mar 02', open: 140, high: 145, low: 138, close: 139 },
  { date: 'Mar 03', open: 139, high: 141, low: 129, close: 131 },
];

function Demo() {
  return <CandlestickChart h={300} data={data} dataKey="date" />;
}

Unlike other charts, the y-axis does not start at zero: its domain is calculated from the lowest and the highest values in the data. To change the domain, pass domain through yAxisProps.

Custom data keys

If your data uses keys other than open/high/low/close, map them with the dataKeys prop:

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CandlestickChart
      h={300}
      data={data}
      dataKey="day"
      dataKeys={{ open: 'o', high: 'h', low: 'l', close: 'c' }}
    />
  );
}

Colors

Use upColor and downColor props to change the colors of rising (close >= open) and falling candles. Colors are referenced from theme the same way as in other components, for example, blue, red.5, orange.7, etc. Any valid CSS color value is also accepted.

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CandlestickChart
      h={300}
      data={data}
      dataKey="date"
      upColor="blue.6"
      downColor="orange.6"
    />
  );
}

Candle width

By default, candles take up the available category width. Use the maxCandleWidth prop to limit the maximum candle width in px:

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <CandlestickChart h={300} data={data} dataKey="date" maxCandleWidth={12} />;
}

Value formatter

To format values on the y-axis and inside the tooltip, use the valueFormatter prop. It accepts a function that takes a number value as an argument and returns a formatted value:

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CandlestickChart
      h={300}
      data={data}
      dataKey="date"
      valueFormatter={(value) => `$${value.toFixed(2)}`}
    />
  );
}

Tooltip labels

The tooltip displays open, high, low and close values with English labels by default. Use the labels prop to change them:

import { CandlestickChart } from '@mantine/charts';

function Demo() {
  return (
    <CandlestickChart
      data={data}
      dataKey="date"
      labels={{ open: 'Ouverture', high: 'Haut', low: 'Bas', close: 'Clôture' }}
    />
  );
}

Axis labels

Use xAxisLabel and yAxisLabel props to display axis labels:

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CandlestickChart
      h={300}
      data={data}
      dataKey="date"
      xAxisLabel="Date"
      yAxisLabel="Price"
    />
  );
}

Reference lines

Use the referenceLines prop to render reference lines, for example to highlight support and resistance levels:

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CandlestickChart
      h={300}
      data={data}
      dataKey="date"
      referenceLines={[
        { y: 160, label: 'Resistance', color: 'red.6' },
        { y: 128, label: 'Support', color: 'teal.6' },
      ]}
    />
  );
}

CompositeChart

DonutChart