Technical indicators in React Chart component

19 Sep 202424 minutes to read

A technical indicator is a mathematical calculation based on historic price, volume or open interest information that aims to forecast financial market direction.

Chart supports 10 types of technical indicators.

Accumulation Distribution

Accumulation Distribution combines price and volume to show how money may be flowing into or out of stock. To render a Accumulation Distribution Indicator, use indicator type as AccumulationDistribution and inject AccumulationDistributionIndicator into services. To calculate the signal line volume field is additionally added with dataSource.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator, StripLine, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const axisLableRender = (args) => {
        if (args.axis.name === 'secondary') {
            let value = Number(args.text) / 1000000000;
            args.text = String(value) + 'bn';
        }
    };
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} axisLabelRender={axisLableRender.bind(this)} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator]}/>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={-7000000000} maximum={5000000000} interval={6000000000} title='Accumulation Distribution' lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='AccumulationDistribution' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {AxisModel,ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLineDirective,ChartAreaModel,CrosshairSettingsModel,
    Crosshair, LineSeries, AccumulationDistributionIndicator, IAxisLabelRenderEventArgs,TooltipSettingsModel,
    StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective, StripLinesDirective}
from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const axisLableRender = (args: IAxisLabelRenderEventArgs): void => {
    if (args.axis.name === 'secondary') {
      let value: number = Number(args.text) / 1000000000;
      args.text = String(value) + 'bn';
    }
  }
  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      axisLabelRender={axisLableRender.bind(this)}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator]} />
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true}
          majorGridLines={lines} majorTickLines={lines} minimum={-7000000000} maximum={5000000000}
          interval={6000000000} title='Accumulation Distribution' lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='AccumulationDistribution' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Average True Range (ATR)

ATR measures the stock volatility by comparing the current value with the previous value.
To render a Average True Range (ATR) Indicator, use indicator type as Atr and inject AtrIndicator into services

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, AtrIndicator, StripLine, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, AtrIndicator]}/>
      <AxesDirective>
        <AxisDirective name='secondary' opposedPosition={true} rowIndex={0} majorGridLines={lines} lineStyle={lines} majorTickLines={lines} maximum={14} minimum={0} interval={7} title={'ATR'}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective yAxisName='secondary' type='Atr' fill='#6063ff' seriesName='Apple Inc' period={3} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective,
    Crosshair, LineSeries, AtrIndicator, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective
    ,AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel}
from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, AtrIndicator]} />
      <AxesDirective>
        <AxisDirective name='secondary'
          opposedPosition={true} rowIndex={0}
          majorGridLines={lines} lineStyle={lines} majorTickLines={lines}
          maximum={14} minimum={0} interval={7} title={'ATR'}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
          type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective yAxisName='secondary' type='Atr' fill='#6063ff' seriesName='Apple Inc' period={3}
          animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Bollinger Band

A chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices.
To render a Bollinger Band, use indicator type as BollingerBand and inject BollingerBands module and RangeAreaSeries into services.
Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine).
The default values of the Bollinger Band period is 14 andstandardDeviations is 2.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, BollingerBands, IndicatorsDirective, IndicatorDirective, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const upperline = { color: '#ffb735', width: 1 };
    const lowerline = { color: '#f2ec2f', width: 1 };
    const lines = { width: 0 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, BollingerBands, RangeAreaSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='BollingerBands' field='Close' seriesName='Apple Inc' fill='#606eff' period={14} animation={animation} upperLine={upperline} lowerLine={lowerline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, StripLineDirective, StripLine, StripLinesDirective,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
    Crosshair, LineSeries, BollingerBands, ChartTheme, IndicatorsDirective, IndicatorDirective, RangeAreaSeries,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const upperline = { color: '#ffb735', width: 1 };
  const lowerline = { color: '#f2ec2f', width: 1 };
  const lines = { width: 0 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, BollingerBands, RangeAreaSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
          type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='BollingerBands' field='Close' seriesName='Apple Inc' fill='#606eff'
          period={14} animation={animation} upperLine={upperline} lowerLine={lowerline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Customization of BollingerBand

stroke, stroke-width, and color of upperLine can be customized by using,upperLine, and the lowerLine can be customized by using lowerLine properties of indicator.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, BollingerBands, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const upperline = { color: 'orange' };
    const lowerline = { color: 'yellow' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={crosshair} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, BollingerBands]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='BollingerBands' field='Close' seriesName='Apple Inc' fill='#606eff' period={14} animation={animation} upperLine={upperline} lowerLine={lowerline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, StripLineDirective, StripLine, StripLinesDirective,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
    Crosshair, LineSeries, BollingerBands, ChartTheme, IndicatorsDirective, IndicatorDirective, RangeAreaSeries,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const upperline = { color: 'orange' };
  const lowerline = { color: 'yellow' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={crosshair}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, BollingerBands]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
          type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='BollingerBands' field='Close' seriesName='Apple Inc' fill='#606eff'
          period={14} animation={animation} upperLine={upperline} lowerLine={lowerline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Exponential Moving Average (EMA)

Moving average Indicators are used to define the direction of the trend. To render a EMA Indicator, use indicator type as Ema and inject EmaIndicator into services.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, EmaIndicator, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, EmaIndicator]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Ema' field='Close' seriesName='Apple Inc' fill='#606eff' period={14} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, StripLineDirective, StripLine, StripLinesDirective,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ChartTheme,
    Crosshair, LineSeries, EmaIndicator, IndicatorsDirective, IndicatorDirective,AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, EmaIndicator]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Ema' field='Close' seriesName='Apple Inc' fill='#606eff' period={14} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Momentum

Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator type as Momentumand inject MomentumIndicator module into services. Momentum indicator will be represented by two lines (upperLine, signalLine). In momentum indicator the upperBand value is always renders at the value 100.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    const upperline = { color: '#e74c3d' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]}/>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={80} maximum={120} interval={20} title='Momentum' plotOffset={30} lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Momentum' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={animation} upperLine={upperline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective,
    Crosshair, LineSeries, MomentumIndicator, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };
  const upperline = { color: '#e74c3d' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]} />
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={80} maximum={120} interval={20} title='Momentum' plotOffset={30} lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
          type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Momentum' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff'
          period={3} animation={animation} upperLine={upperline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Customization of MomentumIndicator

stroke, stroke-width, and color of upperLine can be customized by using upperLine property of indicator.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    const upperline = { color: '#e74c3d' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]}/>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={80} maximum={120} interval={20} title='Momentum' plotOffset={30} lineStyle={lines}>

        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Momentum' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={animation} upperLine={upperline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective,
    Crosshair, LineSeries, MomentumIndicator, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };
  const upperline = { color: '#e74c3d' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]} />
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={80} maximum={120} interval={20} title='Momentum' plotOffset={30} lineStyle={lines}>

        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
          type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Momentum' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff'
          period={3} animation={animation} upperLine={upperline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Moving Average Convergence Divergence (MACD)

MACD is based on the difference between two EMA’s. To render a MACD Indicator, use indicator type as Macd and inject MacdIndicator module using into services. MACD indicator will be represented by MACD line,signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, StripLine, MacdIndicator, ColumnSeries, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]}/>
      <AxesDirective>
        <AxisDirective opposedPosition={true} rowIndex={0} name='secondary' majorGridLines={lines} lineStyle={lines} minimum={-3.5} maximum={3.5} interval={3.5} majorTickLines={lines} title='MACD'>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Macd' period={3} fastPeriod={8} slowPeriod={5} seriesName='Apple Inc' macdType='Both' width={2} macdPositiveColor='#2ecd71' macdNegativeColor='#e74c3d' fill='#6063ff' yAxisName='secondary'>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective,
    Crosshair, LineSeries, StripLine, MacdIndicator, ColumnSeries, ChartTheme, IndicatorsDirective, IndicatorDirective,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]} />
      <AxesDirective>
        <AxisDirective opposedPosition={true} rowIndex={0} name='secondary'
          majorGridLines={lines} lineStyle={lines} minimum={-3.5} maximum={3.5} interval={3.5}
          majorTickLines={lines} title='MACD'>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
          type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Macd' period={3} fastPeriod={8} slowPeriod={5} seriesName='Apple Inc' macdType='Both' width={2} macdPositiveColor='#2ecd71' macdNegativeColor='#e74c3d' fill='#6063ff' yAxisName='secondary'>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Customization of MACD

stroke, stroke-width, and colorof macdLine can be customized by using,macdLine, property of indicator. The positive and negative changes of histogram can be customized by macdPositiveColor and macdNegativeColor properties. The [macdType] is used to define the type of MACD indicator. To customize the MACD period using slowPeriod and fastPeriodproperties.

By default macdType as ‘Both’.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, StripLine, MacdIndicator, ColumnSeries, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]}/>
      <AxesDirective>
        <AxisDirective opposedPosition={true} rowIndex={0} name='secondary' majorGridLines={lines} lineStyle={lines} minimum={-3.5} maximum={3.5} interval={3.5} majorTickLines={lines} title='MACD'>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Macd' period={3} fastPeriod={8} slowPeriod={5} seriesName='Apple Inc' macdType='Both' width={2} macdPositiveColor='#2ecd71' macdNegativeColor='#e74c3d' fill='#6063ff' yAxisName='secondary'>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective,
    Crosshair, LineSeries, StripLine, MacdIndicator, ColumnSeries, ChartTheme, IndicatorsDirective, IndicatorDirective,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]} />
      <AxesDirective>
        <AxisDirective opposedPosition={true} rowIndex={0} name='secondary'
          majorGridLines={lines} lineStyle={lines} minimum={-3.5} maximum={3.5} interval={3.5}
          majorTickLines={lines} title='MACD'>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d'
          type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Macd' period={3} fastPeriod={8} slowPeriod={5} seriesName='Apple Inc' macdType='Both' width={2} macdPositiveColor='#2ecd71' macdNegativeColor='#e74c3d' fill='#6063ff' yAxisName='secondary'>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Relative Strength Index (RSI)

RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator type as Rsi and inject RsiIndicator module into services. RSI indicator will be represented by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by overBought and overSold properties of indicator and the signalLine is calculated by RSI formula.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, LineSeries, RsiIndicator, IndicatorsDirective, IndicatorDirective, Category, StripLine, CandleSeries, Tooltip, DateTime, Logarithmic, Crosshair } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    const upperline = { color: '#e74c3d' };
    const lowerline = { color: '#2ecd71' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, RsiIndicator, StripLine]}/>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={0} maximum={120} interval={60} title='RSI' lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='silver' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' low='low' open='open' close='close' high='high' volume='volume' type='Candle'>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective field='Close' yAxisName='secondary' type='Rsi' fill='#6063ff' seriesName='Apple Inc' period={3} showZones={true} overBought={70} overSold={30} upperLine={upperline} lowerLine={lowerline} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective,
    SeriesDirective, Inject, ILoadedEventArgs, StripLinesDirective, StripLineDirective,
    LineSeries, RsiIndicator, IndicatorsDirective, ChartTheme,
    IndicatorDirective, Category, StripLine, CandleSeries, Tooltip, DateTime, Zoom, Logarithmic, Crosshair,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };
  const upperline = { color: '#e74c3d' };
  const lowerline = { color: '#2ecd71' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, RsiIndicator, StripLine]} />
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines}
          majorTickLines={lines} minimum={0} maximum={120} interval={60} title='RSI' lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='silver' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' low='low' open='open' close='close' high='high' volume='volume' type='Candle'>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective field='Close' yAxisName='secondary' type='Rsi' fill='#6063ff' seriesName='Apple Inc' period={3}
          showZones={true} overBought={70} overSold={30} upperLine={upperline} lowerLine={lowerline}
          animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Simple Moving Average (SMA)

Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator type as Sma and inject SmaIndicator module into services.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DateTime, Logarithmic, Tooltip, CandleSeries, Crosshair, LineSeries, SmaIndicator, IndicatorsDirective, IndicatorDirective, StripLine } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = {
        title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30,
        lineStyle: { width: 0 }
    };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, SmaIndicator]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='silver' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Sma' fill='blue' seriesName='Apple Inc' period={14}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, Legend, DateTime, Logarithmic, Tooltip, CandleSeries, DataLabel, Crosshair, Zoom, ColumnSeries, ILoadedEventArgs,
    LineSeries, SmaIndicator, IndicatorsDirective, IndicatorDirective, ChartTheme, StripLineDirective, StripLine, StripLinesDirective,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = {
    title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30,
    lineStyle: { width: 0 }
  };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, SmaIndicator]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='silver' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Sma' fill='blue' seriesName='Apple Inc' period={14}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Stochastic

It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator type as Stochastic and inject StochasticIndicator module into services.
stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine).
In stochastic indicator the upperBand value and lowerBand value is customized by overBought and overSoldproperties of indicators and the periodLine and signalLine is render based on stochastic formula.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine, DateTime, Logarithmic, Tooltip, CandleSeries, Crosshair, LineSeries, StochasticIndicator, IndicatorsDirective, IndicatorDirective, Category } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    const animation1 = { enable: false };
    const upperline = { color: '#e74c3d' };
    const lowerline = { color: '#2ecd71' };
    const periodline = { color: '#f2ec2f' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, StochasticIndicator]}/>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={0} maximum={120} interval={60} title='Stochastic' lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Stochastic' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' kPeriod={2} dPeriod={3} showZones={true} periodLine={periodline} period={3} animation={animation1} upperLine={upperline} lowerLine={lowerline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    StripLine, DateTime, Logarithmic, Tooltip, CandleSeries, Crosshair, Zoom, ILoadedEventArgs, StripLinesDirective, StripLineDirective,
    LineSeries, StochasticIndicator, IndicatorsDirective, IndicatorDirective, Category, ChartTheme,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };
  const animation1 = { enable: false }
  const upperline = { color: '#e74c3d' };
  const lowerline = { color: '#2ecd71' };
  const periodline = { color: '#f2ec2f' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, StochasticIndicator]} />
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true}
          majorGridLines={lines} majorTickLines={lines}
          minimum={0} maximum={120} interval={60} title='Stochastic' lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Stochastic' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' kPeriod={2} dPeriod={3} showZones={true} periodLine={periodline} period={3} animation={animation1} upperLine={upperline} lowerLine={lowerline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Customization of StochasticIndicator

stroke, stroke-width, and color of upperLine can be customized by using,upperLine, the lowerLine can be customized by using lowerLine and the periodLine can be customized by using periodLine properties of indicator. To customize the period to find the average price using kPeriod and dPeriod properties.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, StripLine, DateTime, Logarithmic, Tooltip, CandleSeries, Crosshair, StripLinesDirective, StripLineDirective, LineSeries, StochasticIndicator, IndicatorsDirective, IndicatorDirective, Category } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    const animation1 = { enable: false };
    const upperline = { color: '#e74c3d' };
    const lowerline = { color: '#2ecd71' };
    const periodline = { color: '#f2ec2f' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, StochasticIndicator]}/>
      <RowsDirective>
        <RowDirective height={'40%'}></RowDirective>
        <RowDirective height={'60%'}></RowDirective>
      </RowsDirective>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={0} maximum={120} interval={60} title='Stochastic' lineStyle={lines}>
          <StripLinesDirective>
            <StripLineDirective start={0} end={120} text='' color='black' visible={true} opacity={0.03} zIndex='Behind'>
            </StripLineDirective>
          </StripLinesDirective>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Stochastic' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' kPeriod={2} dPeriod={3} showZones={true} periodLine={periodline} period={3} animation={animation1} upperLine={upperline} lowerLine={lowerline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    StripLine, DateTime, Logarithmic, Tooltip, CandleSeries, Crosshair, Zoom, ILoadedEventArgs, StripLinesDirective, StripLineDirective,
    LineSeries, StochasticIndicator, IndicatorsDirective, IndicatorDirective, Category, ChartTheme,
    AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };
  const animation1 = { enable: false }
  const upperline = { color: '#e74c3d' };
  const lowerline = { color: '#2ecd71' };
  const periodline = { color: '#f2ec2f' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, StochasticIndicator]} />
      <RowsDirective>
        <RowDirective height={'40%'}></RowDirective>
        <RowDirective height={'60%'}></RowDirective>
      </RowsDirective>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true}
          majorGridLines={lines} majorTickLines={lines}
          minimum={0} maximum={120} interval={60} title='Stochastic' lineStyle={lines}>
          <StripLinesDirective>
            <StripLineDirective start={0} end={120} text='' color='black' visible={true} opacity={0.03} zIndex='Behind'>
            </StripLineDirective>
          </StripLinesDirective>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Stochastic' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' kPeriod={2} dPeriod={3} showZones={true} periodLine={periodline} period={3} animation={animation1} upperLine={upperline} lowerLine={lowerline}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Triangular Moving Average (TMA)

Moving average Indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator type as Tma and inject TmaIndicator module into services.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, TmaIndicator, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const animation1 = { enable: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, TmaIndicator]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation1}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Tma' field='Close' seriesName='Apple Inc' fill='#6063ff' period={14} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime,
    Zoom, Logarithmic, Crosshair, LineSeries, TmaIndicator, IndicatorsDirective, IndicatorDirective, ILoadedEventArgs,
    ChartTheme,AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const animation1 = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, TmaIndicator]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation1}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Tma' field='Close' seriesName='Apple Inc' fill='#6063ff' period={14} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Customization of Technical Indicators

stroke, stroke-width, and color of signalLine can be customized by using,fill, width and dashArray properties. and the period property is used to predict the data forecast calculations. The field value is used to the compare the current price with previous price. It is applicable to Bollinger bands and moving averages. The showZones property is used to shows/Hides the overBought and overSold regions. It is applicable for RSI and stochastic indicators.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, TmaIndicator, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const animation1 = { enable: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, TmaIndicator]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation1}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Tma' field='Close' seriesName='Apple Inc' fill='red' period={3} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
    ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime,
    Zoom, Logarithmic, Crosshair, LineSeries, TmaIndicator, IndicatorsDirective, IndicatorDirective, ILoadedEventArgs,
    ChartTheme,AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const animation1 = { enable: false };

    return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, TmaIndicator]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation1}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='Tma' field='Close' seriesName='Apple Inc' fill='red' period={3} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Data Source

Usually technical indicators are added along with a financial series. The seriesName represents the series, the data of which has to be analysed through indicators.

Technical indicators can also be added without series using dataSource property of indicator.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, DateTime, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator, StripLine, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const axisLableRender = (args) => {
        if (args.axis.name === 'secondary') {
            let value = Number(args.text) / 1000000000;
            args.text = String(value) + 'bn';
        }
    };
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
    const primaryyAxis = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
    const animation = { enable: true };
    const chartarea = { border: { width: 0 } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const tooltip = { enable: true, shared: true };
    const lines = { width: 0 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryxAxis} tooltip={tooltip} crosshair={crosshair} axisLabelRender={axisLableRender.bind(this)} chartArea={chartarea} width={Browser.isDevice ? '100%' : '80%'} title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator]}/>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={lines} majorTickLines={lines} minimum={-7000000000} maximum={5000000000} interval={6000000000} title='Accumulation Distribution' lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='AccumulationDistribution' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject,
    CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLineDirective,
    Crosshair, LineSeries, AccumulationDistributionIndicator, IAxisLabelRenderEventArgs,
    StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective, StripLinesDirective,AxisModel,ChartAreaModel,CrosshairSettingsModel, TooltipSettingsModel}
from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const axisLableRender = (args: IAxisLabelRenderEventArgs): void => {
    if (args.axis.name === 'secondary') {
      let value: number = Number(args.text) / 1000000000;
      args.text = String(value) + 'bn';
    }
  }
  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { title: 'Price', labelFormat: '${value}', minimum: 30, maximum: 180, interval: 30, lineStyle: { width: 0 } };
  const animation = { enable: true };
  const chartarea: ChartAreaModel = { border: { width: 0 } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true };
  const lines = { width: 0 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryxAxis}
      tooltip={tooltip}
      crosshair={crosshair}
      axisLabelRender={axisLableRender.bind(this)}
      chartArea={chartarea}
      width={Browser.isDevice ? '100%' : '80%'}
      title='AAPL 2012-2017'>
      <Inject services={[CandleSeries, Category, Tooltip, StripLine, DateTime, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator]} />
      <AxesDirective>
        <AxisDirective rowIndex={0} name='secondary' opposedPosition={true}
          majorGridLines={lines} majorTickLines={lines} minimum={-7000000000} maximum={5000000000}
          interval={6000000000} title='Accumulation Distribution' lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} width={2}
          xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open'
          name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={animation}>
        </SeriesDirective>
      </SeriesCollectionDirective>
      <IndicatorsDirective>
        <IndicatorDirective type='AccumulationDistribution' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={animation}>
        </IndicatorDirective>
      </IndicatorsDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

datasource.tsx

export let chartData: Object[] = [
    {x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12,   volume: 646996264},
    {x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    {x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4,    volume: 367371310},
    {x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846},
    {x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25,   close: 75.3825, volume: 894382149},
    {x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747},
    {x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974},
    {x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09,   close: 76.1785, volume: 980096264},
    {x: new Date('2012-12-10'), open: 75,      high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110},
    {x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19,   volume: 726150329},
    {x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733},
    {x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882},
    {x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6,    close: 74.3285, volume: 574594262},
    {x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621},
    {x: new Date('2013-01-21'), open: 72.08,   high: 73.57,   low: 62.1428, close: 62.84,   volume: 971912560},
    {x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587},
    {x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993},
    {x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366},
    {x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26,   close: 64.4014, volume: 421766997},
    {x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215},
    {x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539},
    {x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38,   volume: 572066981},
    {x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035},
    {x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517},
    {x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732},
    {x: new Date('2013-04-08'), open: 60.6928, high: 62.57,   low: 60.3557, close: 61.4,    volume: 387323550},
    {x: new Date('2013-04-15'), open: 61,      high: 61.1271, low: 55.0143, close: 55.79,   volume: 709945604},
    {x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506},
    {x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60,      close: 64.2828, volume: 655020017},
    {x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71,   volume: 545488533},
    {x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550},
    {x: new Date('2013-05-20'), open: 61.7014, high: 64.05,   low: 61.4428, close: 63.5928, volume: 494379068},
    {x: new Date('2013-05-27'), open: 64.2714, high: 65.3,    low: 62.7714, close: 64.2478, volume: 362907830},
    {x: new Date('2013-06-03'), open: 64.39,   high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793},
    {x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092},
    {x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3,    close: 59.0714, volume: 400384818},
    {x: new Date('2013-06-24'), open: 58.2,    high: 58.38,   low: 55.5528, close: 56.6471, volume: 519314826},
    {x: new Date('2013-07-01'), open: 57.5271, high: 60.47,   low: 57.3171, close: 59.6314, volume: 343878841},
    {x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93,   volume: 384106977},
    {x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513},
    {x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827},
    {x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858},
    {x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584},
    {x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660},
    {x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888},
    {x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380},
    {x: new Date('2013-09-09'), open: 72.1428, high: 72.56,   low: 66.3857, close: 66.4143, volume: 669376320},
    {x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677},
    {x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537},
    {x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773,  close: 69.0043, volume: 368198906},
    {x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661},
    {x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379},
    {x: new Date('2013-10-21'), open: 73.11,   high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997},
    {x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29,   volume: 508130174},
    {x: new Date('2013-11-04'), open: 74.4428, high: 75.555,  low: 73.1971, close: 74.3657, volume: 318132218},
    {x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021},
    {x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778}
];

Module Dependencies
To render a Indicator, it is mandatory to inject LineSeries module using Chart.Inject(LineSeries).
In addition to that, MACD Indicator requires ColumnSeries and BollingerBands requires RangeAreaSeries.