Overview

The React OHLC chart is similar to a candlestick chart. It uses horizontal lines on the left and right to represent a stock’s open and close values, while the vertical line shows the high and low values. The chart is fully customizable and supports interactive features such as a tooltips, selection, and zooming for detailed data analysis.

Multiple data series

Multiple data series can be plotted within a single chart, allowing users to compare different datasets. Enabling features like legends and tooltips provides additional insights into each series.

Multiple panes

Render stock prices in separate panes within a chart for better clarity. Visualize OHLC values in one pane and trading volume in another.

Bull and bear

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

React OHLC chart code example

Get started with the React OHLC chart using a few lines of TSX code, as shown below. You can also explore this React OHLC 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="HiloOpenClose" />
            </ChartSeriesCollection>
        </Chart>
    )
}