Charts - Candlestick 🧪

A candlestick chart is used to visualize price movement over time.

Overview

A candlestick chart provides a visual overview of how a price changes over time, commonly used in financial contexts like stock market analysis.

Each candlestick represents a time period and shows where the price started, where it ended, and how high or low it moved during that period.

This makes it easier to understand overall trends, compare price movements, and see how buying and selling activity evolves.

Interactive Brokers Stock Price - 2025

MUI X Expired package version

Source: Yahoo Finance

Basics

Candlestick chart's series should contain a data property containing an array of open, high, low, and close (OHLC) prices for a given time period.

These OHLC values should be provided as an array in the following format: [open, high, low, close].

Consequently, the data array should look similar to this:

const data = [
  [open1, high1, low1, close1],
  [open2, high2, low2, close2],
  // ...
];

You can specify the time period with the xAxis prop. This axis must have a band scale and its data should have the same length as your series.

MUI X Expired package version

<CandlestickChart
  xAxis={[{ data: xData, zoom: { minSpan: 1, filterMode: 'discard' } }]}
  series={[{ data }]}
  height={400}
/>

<CandlestickChart
  xAxis={[{ data: xData, zoom: { minSpan: 1, filterMode: 'discard' } }]}
  series={[{ data }]}
  height={400}
/>

Press Enter to start editing

Customization

Similarly to other chart types, you can customize the appearance and behavior of the candlestick chart.

The example below shows how to define the formatting of values in both axes.

MUI X Expired package version

<CandlestickChart
  {...chartSettings}
  xAxis={[
    {
      data: xData,
      valueFormatter: (date: Date) => dateFormatter.format(date),
      zoom: { minSpan: 1, filterMode: 'discard' },
    },
  ]}
  yAxis={[{ valueFormatter: (value: number) => dollarFormatter.format(value) }]}
/>

<CandlestickChart
  {...chartSettings}
  xAxis={[
    {
      data: xData,
      valueFormatter: (date: Date) => dateFormatter.format(date),
      zoom: { minSpan: 1, filterMode: 'discard' },
    },
  ]}
  yAxis={[{ valueFormatter: (value: number) => dollarFormatter.format(value) }]}
/>

Press Enter to start editing

Composition

Similar to other chart types, candlestick charts can be composed using multiple components to create more complex visualizations.

In this example, we demonstrate how to create a candlestick chart that displays the volume of trades as a bar chart, as well as the 20-day moving average, shown as a line chart.

Since the candlestick plot is a WebGL canvas, you need to render it inside a ChartsWebGLLayer. You can read more about layering in the Layering documentation.

MUI X Expired package version

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.