Search results

Series Types in React Stock Chart component

Essential JS 2 StockChart supports 6 major types of series namely Line, Spline, Hilo, HiloOpenClose, Hollow Candle and Candle . By using the series dropdown button you can navigate between the above listed series types.

Line

To render a line series, use series type as Line and inject LineSeries module using <Inject services={[LineSeries]}> method.

Spline

To render a spline series, use series type as Spline and inject SplineSeries module using <Inject services={[SplineSeries]}> method.

Hilo

To render a hilo series, use series type as Hilo and inject HiloSeries module using <Inject services={[HiloSeries]}> method.

HiloOpenClose

To render a hiloOpenClose series, use series type as HiloOpenClose and inject HiloOpenCloseSeries module using <Inject services={[HiloOpenCloseSeries]}> method.

HollowCandle

To render a hollowcandle series, use series type as Candle and set enableSolidCandle as false. Now inject CandleSeries module using <Inject services={[CandleSeries]}> method.

Candle

To render a candle series, use series type as Candle and inject CandleSeries module using <Inject services={[CandleSeries]}> method.

Source
Preview
index.tsx
index.jsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,FontModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';

class App extends React.Component<{},{}> {

    public primaryxAxis: AxisModel= {
            valueType: 'DateTime',
            majorGridLines: { width: 0 },
            majorTickLines: { color: 'transparent' },
            crosshairTooltip: { enable: true }
    };
    public primaryyAxis: AxisModel= {
            majorTickLines: { width: 0 },
            crosshairTooltip: { enable: true }
    };
    public crosshair: CrosshairSettingsModel ={ enable: true } ;

    render(){
            return <StockChartComponent id='stockcharts'
                    primaryXAxis={ this.primaryxAxis }
                    primaryYAxis={ this.primaryyAxis }
                    crosshair={this.crosshair}
                    exportType={[]}
                    indicatorType={[]}
                    trendlineType={[]}
                    title='AAPL Stock Price'>
                     <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries]}/>
                      <StockChartSeriesCollectionDirective>
                            <StockChartSeriesDirective dataSource={chartData} xName='date' type='Candle'>
                            </StockChartSeriesDirective>
                        </StockChartSeriesCollectionDirective>
                  </StockChartComponent>
      }

};
ReactDOM.render(<App />, document.getElementById("stockcharts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.primaryxAxis = {
            valueType: 'DateTime',
            majorGridLines: { width: 0 },
            majorTickLines: { color: 'transparent' },
            crosshairTooltip: { enable: true }
        };
        this.primaryyAxis = {
            majorTickLines: { width: 0 },
            crosshairTooltip: { enable: true }
        };
        this.crosshair = { enable: true };
    }
    render() {
        return <StockChartComponent id='stockcharts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} crosshair={this.crosshair} exportType={[]} indicatorType={[]} trendlineType={[]} title='AAPL Stock Price'>
                     <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries]}/>
                      <StockChartSeriesCollectionDirective>
                            <StockChartSeriesDirective dataSource={chartData} xName='date' type='Candle'>
                            </StockChartSeriesDirective>
                        </StockChartSeriesCollectionDirective>
                  </StockChartComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById("stockcharts"));