Articles in this section
Category / Section

How JS Charts supports formatting labels in an axis?

4 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.

JS

$("#container").ejChart({
    primaryXAxis: {
        labelFormat: 'MMM dd, yyyy'
    },
    series: [{
        points: [{ x: new Date("1 /1/2014"), y: 35 },
            { x: new Date("2/1/2014"), y: 25 },
            { x: new Date("3/1/2014"), y: 34 },
            { x: new Date("4/1/2014"), y: 65 },
            { x: new Date("5/1/2014"), y: 73 },
            { x: new Date("6/1/2014"), y: 37 }
        ],
        name: 'series'
    }]
});

The following screenshot displays the Chart with primary X axis in “MMM dd, yyyy” format.

Format of labels in date time axis

Figure 1: Chart with primary X axis in “MMM dd, yyyy” format

JS Playground sample link: Datetime Labels Formatting

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.

 

Conclusion

I hope you enjoyed learning how JS Charts supports formatting labels in an axis.

You can refer to our JavaScript Chart 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 JavaScript Chart 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!




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