Overview

The React HiLo chart is similar to an OHLC (open-high-low-close) chart but focuses on displaying only the high and low values of a stock over a specified time period.

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.

Dual axes

Multiple axes can be used to plot datasets with significantly different value ranges, enabling clearer comparisons.

Styling options

Customize HiLo colors, thickness, and dash arrays using built-in APIs to match your data presentation needs.

React HiLo chart code example

Get started with the React HiLo chart using a few lines of TSX code, as shown below. You can also explore this React HiLo 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', high: 160, low: 100 },
      { x: 'Feb', high: 190, low: 130 },
      { x: 'Mar', high: 170, low: 110 },
      { x: 'Apr', high: 180, low: 120 },
      { x: 'May', high: 170, low: 110 },
      { x: 'Jun', high: 160, low: 100 },
      { x: 'Jul', high: 190, low: 130 },
      { x: 'Aug', high: 170, low: 110 },
      { x: 'Sep', high: 180, low: 120 },
      { x: 'Oct', high: 170, low: 110 }
    ];
    return (
        <Chart>
            <ChartPrimaryXAxis valueType="Category">
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={data} xField="x" high='high' low='low' type="Hilo" />
            </ChartSeriesCollection>
        </Chart>
    )
}