DateTime and Logarithmic Axis

DateTime Axis

Date time axis uses date time scale and displays the date time values as axis labels in the specified format and set the valueType of axis to DateTime.

Source

Preview

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,FontModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';

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

 render() {
    return (
    <StockChartComponent  id="stockchart"  title="Google Stock Price" tooltip={{ enable: true}}>
     <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export,       AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective  dataSource={chartData} type='Candle'  xName='date' high='high' low='low' open='open' close='close'name='Apple' />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
    )
  }

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

Note: To use datetime axis, we need to inject DateTime using <Inject services={[DateTime]}> method and set the valueType of axis to DateTime.

Logarithmic Axis

Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10^-6) and higher order of magnitude (eg: 10⁶) and set the valueType of axis to Lograthmic.