How to format labels in date time axis.
Description
This article explains how to customize or format the date time axis label.
Solution
Essential EJ2 Chart supports formatting labels on an axis and parsing the date to all globalize formats using labelFormat property of the axis. You can display the date values on the date time axis in formats such as 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 the labelFormat property, You can refer to the UG document.
The following steps explains how to customize or format the date time axis.
Step 1: Create the chart component with a line series on a 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 is explained below,
Label Value | Property Value | Result | Description |
new Date(2000, 03, 10) | EEEE | Monday | The Date is displayed in day format |
new Date(2000, 03, 10) | yMd | 04/10/2000 | The Date is displayed in month/date/year format |
new Date(2000, 03, 10) | MMM | Apr | The Shorthand month for the date is displayed |
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 | The Label is displayed in hours:minutes:seconds format |
Days
Format the date time axis label to show the days, use the following code snippet.
primaryXAxis: {
valueType: "DateTime",
// label format for day format
labelFormat: "EEEE"
},
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.
primaryXAxis: {
valueType: "DateTime",
// label format for month format
labelFormat: "MMM"
},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.
primaryXAxis: {
valueType: "DateTime",
// label format for date value displayed as label
labelFormat: "hm"
},
