React Charts Candlestick Chart

Overview

The candlestick chart is widely used in stock market visualizations to represent the high, low, open, and close values of a stock. This chart supports interactive features such as trackball and crosshair for precise data tracking.

Hollow and filled candlestick charts

A filled candlestick indicates that the stock closed lower than its opening price, with the open price shown at the top and the close price at the bottom.

Multiple series

Use a multi-series candlestick chart to represent two or more datasets, with each dataset showing high, low, open, and close values.

Combine candlestick with other charts

Combine candlestick charts with line and column charts to display closing prices and trading volumes together for a more comprehensive view of financial data.

Multiple panes

Display stock prices in separate panes within the chart for better clarity and comparison. Candlestick values can be shown in one pane, while trading volume is displayed in another.

Bull and bear

Customize the colors used to represent bullish and bearish trends for better visual distinction.

React candlestick chart code example

Get started with the React candlestick chart using a few lines of TSX code, as shown below. You can also explore this React candlestick chart example to learn how to render and customize the chart in a React application.

import { Chart, ChartPrimaryXAxis, ChartSeriesCollection, ChartSeries } from '@syncfusion/react-charts';

export default function App() {
    const data = [
      { x: 'Jan', open: 120, high: 160, low: 100, close: 140 },
      { x: 'Feb', open: 150, high: 190, low: 130, close: 170 },
      { x: 'Mar', open: 130, high: 170, low: 110, close: 150 },
      { x: 'Apr', open: 160, high: 180, low: 120, close: 140 },
      { x: 'May', open: 150, high: 170, low: 110, close: 130 },
      { x: 'Jun', open: 120, high: 160, low: 100, close: 140 },
      { x: 'Jul', open: 150, high: 190, low: 130, close: 170 },
      { x: 'Aug', open: 130, high: 170, low: 110, close: 150 },
      { x: 'Sep', open: 160, high: 180, low: 120, close: 140 },
      { x: 'Oct', open: 150, high: 170, low: 110, close: 130 }
    ];
    return (
        <Chart>
            <ChartPrimaryXAxis valueType="Category">
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={data} xField="x" high='high' low='low' open="open" close="close" type="Candle" />
            </ChartSeriesCollection>
        </Chart>
    )
}