How to format labels in date time axis.

Description

This article describes how to customize or format the date time axis label.

Solution

Essential EJ2 Chart supports formatting labels in an axis and parse the date to all globalize format using labelFormat property of axis. You can display the date values in the date time axis in date, month, year, time, date/month/year, etc., using labelFormat property.

By default, Chart automatically formats the axis labels smartly, based on the calculated minimum and maximum values of data points. You can also specify the desired format to the labels using labelFormat property.

To know more information about labelFormat property, You can refer the UG document.

The following steps explains how to customize or format the date time axis.

Step 1: Create the chart component with line series in date time axis

let chart: Chart = new Chart({
  primaryXAxis: {
    valueType: "DateTime"
  },
  series: [
    {
      dataSource: [
        { 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 }
      ],
      xName: "x",
      yName: "y",
      type: "Line"
    }
  ]
});
chart.appendTo("#element");

Step 2: Display the labels in month/date/year format using labelFormat.

primaryXAxis: {
    valueType: "DateTime",
    // label format
    labelFormat: "yMd"
  },

Output

You can see the demo sample from this link

Available date time labelFormat  in date time axis are explained below,

Days

Format the date time axis label to show the days, use the following code snippet.

Output

You can see the demo sample from this link

Month

Format the date time axis label to show the month, use the following code snippet.

Output

You can see the demo sample from this link.

Time

Format the date time axis label to show the time, use the following code snippet.

Output

You can see the demo sample from this  link.