How to format labels in date time axis in .NET MVC Charts ?
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.
CSHTML
@(Html.EJ().Chart("container")
.PrimaryXAxis(axis=>axis.LabelFormat("MMM dd, yyyy"))
. . . . . . .
. . . . . . .
)
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. |
I hope you enjoyed learning about how to format labels in date time axis in .NET MVC Charts.
You can refer to our .NET MVC Charts feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Hi this was very useful in general. I also sugest to add "HH" to the list.