Date time axis in React Chart component

3 Feb 202624 minutes to read

DateTime Axis

The DateTime axis uses a date-time scale and displays date-time values as axis labels based on the specified format. This axis type is ideal for visualizing time-based data such as trends, timelines, and time-series data.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', title: 'Sales Across Years', labelFormat: 'yMMM' };
    const primaryyAxis = { title: 'Sales Amount in millions(USD)' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Sales Across Years', labelFormat: 'yMMM' };
  const primaryyAxis: AxisModel = { title: 'Sales Amount in millions(USD)' };
  
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let dateTimeData = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

datasource.tsx

export let dateTimeData: Object[] = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

Note: To use the DateTime axis, inject DateTime into the services option and set the valueType property of the axis to DateTime.

DateTimeCategory Axis

The DateTimeCategory axis is used to render date-time values with non-linear intervals. This axis type is especially useful when certain time ranges, such as weekends or holidays, need to be excluded. In the following example, only business days are displayed within a week.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTimeCategory, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeCategoryData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTimeCategory', skeleton: 'Ed' };
    const primaryyAxis = { title: 'Sales Amount in millions(USD)' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTimeCategory]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeCategoryData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTimeCategory, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { dateTimeCategoryData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTimeCategory', skeleton: 'Ed' };
  const primaryyAxis: AxisModel = { title: 'Sales Amount in millions(USD)' };
  
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTimeCategory]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeCategoryData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

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

datasource.jsx

export let dateTimeCategoryData = [
    { x: new Date(2017, 11, 20), y: 21 }, 
    { x: new Date(2017, 11, 21), y: 24 },
    { x: new Date(2017, 11, 22), y: 24 }, 
    { x: new Date(2017, 11, 26), y: 70 },
    { x: new Date(2017, 11, 27), y: 75 }, 
    { x: new Date(2018, 0, 2),   y: 82 },
    { x: new Date(2018, 0, 3),   y: 53 }, 
    { x: new Date(2018, 0, 4),   y: 54 },
    { x: new Date(2018, 0, 5),   y: 53 }, 
    { x: new Date(2018, 0, 8),   y: 45 }
];

datasource.tsx

export let dateTimeCategoryData: Object[] = [
    { x: new Date(2017, 11, 20), y: 21 }, 
    { x: new Date(2017, 11, 21), y: 24 },
    { x: new Date(2017, 11, 22), y: 24 }, 
    { x: new Date(2017, 11, 26), y: 70 },
    { x: new Date(2017, 11, 27), y: 75 }, 
    { x: new Date(2018, 0, 2),   y: 82 },
    { x: new Date(2018, 0, 3),   y: 53 }, 
    { x: new Date(2018, 0, 4),   y: 54 },
    { x: new Date(2018, 0, 5),   y: 53 }, 
    { x: new Date(2018, 0, 8),   y: 45 }
];

Note: To use the DateTimeCategory axis, inject DateTimeCategory into the services option and set the valueType property of the axis to DateTimeCategory. The axis range can be controlled using the minimum, maximum, and interval properties.

Range

Range for an axis, will be calculated automatically based on the provided data, you can also customize the range of the axis using minimum, maximum and interval property of the axis.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'DateTime', title: 'Sales Across Years', labelFormat: 'yMMM',
        minimum: new Date(2000, 6, 1), maximum: new Date(2010, 6, 1)
    };
    const primaryyAxis = { title: 'Sales Amount in millions(USD)' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'DateTime', title: 'Sales Across Years', labelFormat: 'yMMM',
    minimum: new Date(2000, 6, 1), maximum: new Date(2010, 6, 1)
  };
  const primaryyAxis: AxisModel = { title: 'Sales Amount in millions(USD)' };
  
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

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

datasource.jsx

export let dateTimeData = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

datasource.tsx

export let dateTimeData: Object[] = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

Interval customization

Date-time intervals can be customized using the [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) and [`intervalType`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#intervaltype) properties of the axis. For example, when the interval is set to `2` and the interval type is set to `Years`, the axis displays labels at two-year intervals.

The DateTime axis supports the following interval types:

• Auto
• Years
• Months
• Days
• Hours
• Minutes
• Seconds

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', title: 'Sales Across Years', intervalType: 'Years' };
    const primaryyAxis = { title: 'Sales Amount in millions(USD)' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Sales Across Years', intervalType: 'Years' };
  const primaryyAxis: AxisModel = { title: 'Sales Amount in millions(USD)' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

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

datasource.jsx

export let dateTimeData = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

datasource.tsx

export let dateTimeData: Object[] = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

Applying padding to the range

Padding can be applied to the minimum and maximum values of the axis range using the rangePadding property. The DateTime axis supports the following range padding types:

• None
• Round
• Additional

DateTime – None
When the rangePadding property is set to None, the minimum and maximum values of the axis are calculated directly from the data values.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', rangePadding: 'None' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', rangePadding: 'None' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

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

datasource.jsx

export let dateTimeData = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

datasource.tsx

export let dateTimeData: Object[] = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

DateTime – Round

When the rangePadding property is set to Round, the minimum and maximum values are rounded to the nearest interval boundary. For example, if the minimum value is January 15 and the interval type is set to Months with an interval of 1, the axis minimum is adjusted to January 1.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', rangePadding: 'Round' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', rangePadding: 'Round' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let dateTimeData = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

datasource.tsx

export let dateTimeData: Object[] = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

DateTime – Additional

When the rangePadding property is set to Additional, an additional interval is added before the minimum and after the maximum values of the axis range to provide extra spacing.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', rangePadding: 'Additional' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', rangePadding: 'Additional' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

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

datasource.jsx

export let dateTimeData = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

datasource.tsx

export let dateTimeData: Object[] = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

Label format

Date values displayed on the DateTime axis can be formatted using the labelFormat property. This property supports globalized date and time formats for clear and localized label rendering.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', labelFormat: 'yMd' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', labelFormat: 'yMd' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Average Sales Comparison'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dateTimeData} xName='x' yName='y' name='Sales' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

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

datasource.jsx

export let dateTimeData = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

datasource.tsx

export let dateTimeData: Object[] = [
    { x: new Date(2000, 6, 11), y: 10 }, 
    { x: new Date(2002, 3, 7),  y: 30 },
    { x: new Date(2004, 3, 6),  y: 15 }, 
    { x: new Date(2006, 3, 30), y: 65 },
    { x: new Date(2008, 3, 8),  y: 90 }, 
    { x: new Date(2010, 3, 8),  y: 85 }
];

The following table illustrates the output produced by applying commonly used date-time format strings to the labelFormat property.

Label Value	Label Format Property Value	Result	Description
new Date(2000, 03, 10)	EEEE	Monday	Displays the full name of the day
new Date(2000, 03, 10)	yMd	04/10/2000	Displays the date in month/day/year format
new Date(2000, 03, 10)	MMM	Apr	Displays the abbreviated month name
new Date(2000, 03, 10)	hm	12:00 AM	Time of the date value is displayed as label
new Date(2000, 03, 10)	hms	12:00:00 AM	Displays the abbreviated month name