How to format labels in date time axis?
Essential Chart supports formatting labels in an axis using LabelFormat property of axis. This property takes a format string as value based on the value type of axis. You can display the date values in the date time axis in date, month, year, time, date/month/year, etc., formats 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. The following code example illustrates this.
ASP
<ej:Chart ID="container" CanResize="true" runat="server"> <PrimaryXAxis LabelFormat="MMM dd, yyyy"></PrimaryXAxis> . . . . . . . . . . . . . . . . . . . . </ej:Chart>
The following screenshot displays the Chart with primary X axis in “MMM dd, yyyy” format.
Figure 1: Chart with primary X axis in “MMM dd, yyyy” format
Date Time formats
The following table illustrates the various date time formats for axis labels.
Label Format Value | Example Date | Result | Description |
M | 01/01/2015 | January 1 | Displays the name of the month and numeric date. |
MM | 01/01/2015 | 01 | Displays the month in two digits from 01 to 12. |
MMM | 01/01/2015 | Jan | Displays three letters of the month name. |
MMMM | 01/01/2015 | January | Displays the name of the month. |
dd | 01/01/2015 | 01 | Displays the day of the month from 01 to 31. |
ddd | 01/01/2015 | Thu | Displays the first three letters of the day. |
dddd | 01/01/2015 | Thursday | Displays the name of the day. |
yy | 01/01/2015 | 15 | Displays the last two digits of the year. |
yyyy | 01/01/2015 | 2015 | Displays the four digits of year. |
t | 01/01/2015 | 12:00 AM | Displays the short time. (hour and minutes) |
tt | 01/01/2015 | AM | Displays AM or PM. |
T | 01/01/2015 | 12:00:00 AM | Displays long time. (hour, minutes and seconds) |
hh | 01/01/2015 | 12 | Displays the hour of the day in 12-hour format. |
mm | 01/01/2015 | 00 | Displays the minute from 00 to 59. |
ss | 01/01/2015 | 00 | Displays the seconds from 00 to 59. |
gg | 01/01/2015 | A.D. | Displays the period or era. |
zzz | 01/01/2015 | +05:30 | Displays the difference between UTC and current time zone. |
f | 01/01/2015 | Thursday, January 01, 2015 12:00 AM | Displays the long date and short time. |
F | 01/01/2015 | Thursday, January 01, 2015 12:00:00 AM | Displays the long date and long time. |