Overview

React Stock Charts represent high, low, open, and close values for financial data. Interactive trackball and crosshair features provide detailed data inspection and analysis.

Hollow and filled Candlestick Chart

A hollow candlestick is drawn when the stock closes higher than the opening price, representing the close price at the top and open price at the bottom. A filled candlestick is drawn when the stock closes lower than the opening price, representing the open price at the top and close price at the bottom.

Multiple series

Multi-series Stock Chart can represent two or more data sets, with each data set showing high, low, open, and close values.

Combination for Stock Chart with another chart

Line and Column Charts can be combined with Stock Chart visuals to display closing prices and trading volume within the same view.

Multiple pane

Stock prices and volume data can be displayed in separate panes for improved analysis. Price movements may appear in one pane while volume information is presented in another.

React Stock Chart with multiple pane example

Stock Chart with Range selector

The range selector can be used with the Stock Chart to filter and navigate large data sets.

React Candle Chart with Range selector

Bull and bear

The Stock Chart supports customizable bull and bear colors.

React Stock Chart code example

Get started with the React Stock Charts using the a few simple lines of HTML and JavaScript code example as demonstrated below. Also explore demo to learn how to render and configure the component.

html
js

<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

import {AxisModel,CandleSeries,Category,ChartComponent,Inject,SeriesCollectionDirective, SeriesDirective} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
class App extends React.Component<{}, {}> {
  public primaryXAxis: AxisModel = { valueType: 'Category' };
  public data1: any[]= [
    { 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 }
];

  public render() {
    return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[CandleSeries, Category]} />
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={this.data1} xName='x' open='open' high='high' low='low' close='close' type='Candle'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);