Articles in this section
Category / Section

How to format labels in date time axis?

2 mins read

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.

Formatted the labels in date time axis

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.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment