Homedocschartschart options (reference)axisXvalueFormatString

valueFormatString: String

Defines how values must be formatted before they appear on Axis X. You can format numbers and date time values using this property. Below you will find descriptive table explaining various specifiers with example.

```var  chart =  new  CanvasJS.Chart("container",
{
.
.
axisX:{
valueFormatString: "#,##0.##",
},
.
.
});
chart.render();

```

Below is a table with all the supported number formatting options.

Format Specifier Name Description Examples
“0” Zero Placeholder Replaces the zero with the corresponding digit if one is present; otherwise, zero appears in the result string. 3182.4123 (“00000”) -> 03182
“#” Digit placeholder Replaces the “#” symbol with the corresponding digit if one is present; otherwise, no digit appears in the result string. 3182.4123 (“#####”) -> 3182
“.” Decimal Point Determines the location of the decimal separator in the result string. 0.3182(“0.00”) -> 0.32
“,” Group separator
and
number scaling
Determined the location of the comma separator. .Distance between the commas reading from left to right is taken as a scaling parameter. All the numbers after that will be grouped based on it.

As a number scaling specifier, it divides a number by 1000 for each comma specified next to decimal separator – dot
10000000 (“#,##,###”) -> 1,00,00,000
10000000 (“####,##”) -> 10,00,00,00
100000000 (“#,###,##”) -> 1,000,000,00

300000000(“#,,.”) -> 300
“%” Percentage placeholder Multiplies a number by 100 3(“#%”) -> 300%
“‰” Per mille placeholder Multiplies a number by 1000. 0.0123 (“#0.00‰”) -> 12.30
“E0”
“E+0”
“E-0”
“e0”
“e+0”
“e-0”
Exponential notation If followed by at least one 0 (zero), formats the result using exponential notation. The case of “E” or “e” indicates the case of the exponent symbol in the result string. The number of zeros following the “E” or “e” character determines the minimum number of digits in the exponent.
A plus sign (+) indicates that a sign character always precedes the exponent.
A minus sign (-) indicates that a sign character precedes only negative exponents.
10000 (“0.0# e0”) -> 1.0 e4
1503.92311 (“0.0##e+00”) -> 1.504e+03
0.0000000232320(“##.000 E+0”) -> 23.232 E-9
‘string’
“string”
Literal string delimiter Indicates that the enclosed characters should be copied to the result string unchanged. 68 (“# ‘%'”) -> 68 %
Others All other characters The character is copied to the result string unchanged. 34 (“# USD”) -> 34 USD

CanvasJS allows you to format Date and Time values according to your preference as JavaScript doesn’t have native support for the same.
Below is a table that lists down custom date and time specifiers with their Description.

Format Specifier Description Examples
“D” The day of the month, from 1 through 31. Sun Feb 03 2013 22:04:49 -> 3
Sun Feb 15 2013 22:04:49 -> 15
“DD” The day of the month, from 01 through 31. Sun Feb 03 2013 22:04:49 -> 03
Sun Feb 15 2013 22:04:49 -> 15
“DDD” The abbreviated name of the day of the week. Sun Feb 03 2013 22:04:49 -> Sun
“DDDD” The full name of the day of the week. Sun Feb 03 2013 22:04:49 -> Sunday
“M” The month, from 1 through 12. Sun Feb 03 2013 22:04:49 -> 2
“MM” The month, from 01 through 12. Sun Feb 03 2013 22:04:49 -> 02
“MMM” The abbreviated name of the month. Sun Feb 03 2013 22:04:49 -> Feb
“MMMM” The full name of the month. Sun Feb 03 2013 22:04:49 -> February
“Y” The year, from 0 to 99. Sun Feb 03 2003 22:04:49 -> 3
Sun Feb 03 2013 22:04:49 -> 13
“YY” The year, from 00 to 99. Sun Feb 03 2003 22:04:49 -> 03
Sun Feb 03 2013 22:04:49 -> 13
“YYY” The year, with a minimum of three digits. Sun Feb 03 1999 22:04:49 -> 999
Sun Feb 03 2003 22:04:49 -> 003
Sun Feb 03 2013 22:04:49 -> 013
“YYYY” The year as a four-digit number. Sun Feb 03 2003 22:04:49 -> 2003
Sun Feb 03 2013 22:04:49 -> 2013
“h” The hour, using a 12-hour clock from 1 to 12. Sun Feb 03 2013 22:04:49 -> 10
Sun Feb 03 2013 02:04:49 -> 2
“hh” The hour, using a 12-hour clock from 01 to 12. Sun Feb 03 2013 22:04:49 -> 10
Sun Feb 03 2013 02:04:49 -> 02
“H” The hour, using a 24-hour clock from 0 to 23. Sun Feb 03 2013 22:04:49 -> 22
Sun Feb 03 2013 02:04:49 -> 2
“HH” The hour, using a 24-hour clock from 00 to 23. Sun Feb 03 2013 22:04:49 -> 22
Sun Feb 03 2013 02:04:49 -> 02
“m” The minute, from 0 through 59. Sun Feb 03 2013 22:04:49 -> 4
Sun Feb 03 2013 02:34:49 -> 34
“mm” The minute, from 00 through 59. Sun Feb 03 2013 22:04:49 -> 04
Sun Feb 03 2013 02:34:49 -> 34
“s” The second, from 0 through 59. Sun Feb 03 2013 22:04:09 -> 9
Sun Feb 03 2013 02:34:49 -> 49
“ss” The second, from 00 through 59. Sun Feb 03 2013 22:04:09 -> 09
Sun Feb 03 2013 02:34:49 -> 49
“f” The value of hundredth millisecond. Sun Feb 03 2013 02:34:49.237 -> 2
“ff” The value of hundredth and tenth millisecond. Sun Feb 03 2013 02:34:49.237 -> 23
“fff” The value of milliseconds in three digits. Sun Feb 03 2013 02:34:49.237 -> 237
“t” The first character of the am/pm designator. (lower case) Sun Feb 03 2013 22:04:09 -> p
Sun Feb 03 2013 02:34:49 -> a
“tt” The am/pm designator. (lower case) Sun Feb 03 2013 22:04:09 -> pm
Sun Feb 03 2013 02:34:49 -> am
“T” The first character of the AM/PM designator. (upper case) Sun Feb 03 2013 22:04:09 -> P
Sun Feb 03 2013 02:34:49 -> A
“TT” AM/PM designator. (upper case) Sun Feb 03 2013 22:04:09 -> PM
Sun Feb 03 2013 02:34:49 -> AM
“K” Time zone information. Sun Feb 03 2013 22:04:49 GMT+0530 -> GMT +0530
“z” Hours offset from UTC, with no leading zeros. Sun Feb 03 2013 22:04:49 GMT+0530 -> +5
“zz” Hours offset from UTC, with a leading zero for a single-digit value. Sun Feb 03 2013 22:04:49 GMT+0530 -> +05
“zzz” Hours and minutes offset from UTC. Sun Feb 03 2013 22:04:49 GMT+0530 -> +0530
“string”
‘string’
Literal string delimiter. Sun Feb 03 2003 22:04:49 (‘Morning’ D) -> Morning 3
Any other character The character is copied to the result string unchanged. Sun Feb 03 2003 22:04:49 (“val h:mm”) -> val 10:04

Try it Yourself by Editing the Code below.

Also See:

If you have any questions, please feel free to ask in our forums.

1. Ha says:

How can axis label show 10K, 30K, …?

• Sunil Urs says:

You need to use suffix property:

axisX:{
title: "Axis Labels with formatting",
valueFormatString: "#,##0,.",
suffix:"K"
}

2. Ha says:

Can chart automatically format axis label by adding suffix ‘K’, ‘M’, ‘B’…?
Or can you provide function-type option to help me customize axis label?

This feature can apply to tooltip also.

3. Could you please implement custom formating option for axis in 1.4.0? Current implementation of valueFormatString is very poor.

• Sunil Urs says:

Update:Custom Formatting is available in v1.7.0. Please checkout label formatter.

4. :) says:

The first character of the AM/PM designator. (upper case) should be “TT” instead of “T”

• Sunil Urs says:

Corrected the same. Thanks for reporting

5. stven says:

MMM return +1 month, how could i -1 to get correct month

• Sunil Urs says:

In JavaScript month component ranges from 0-11. Please refer to this thread for more info.

• stven says:

I got that thank you sir!

6. stven says:

Again !! i have a question.. Is that possible to create own format string value and then when you zoom it, the format can change

• Anjali says:

Hi Stven,

Sorry, as of now we don’t have this feature.

7. I want to show the day-of-month for Sundays, but show M/T/W/Th/F/S for other days of the week. Is there any way to accomplish this?

If not, providing a custom format function would be nice :)

valueFormatString: function(val) { return “whatever string you calculate”}

• Anjali says:

Robert,

This feature is not available as of now. But surely we will consider this for future versions. Thanks for your suggestion.

• Sunil Urs says:

Update:Custom Formatting is available in v1.7.0. Please checkout label formatter.

8. karthik says:

how can i mentioned string values in x axis..? say for example i want to have x axis point like “apple” , “orange” , “mango” like this.. I thought it will be done by changing “valueFormatString”. but i don’t know how to proceed further.. please help me..

• Anjali says:

karthik,

You can use label property instead of x values.

9. Gaspar says:

Hi,
how can I use superscript in value as a suffix? Please help me, cause I need it to my school project. Thanks

• Gaspar says:

I need to use html tags like and …

• Gaspar says:

I need to use html tags like “sup” and “sub”…

• Anjali says:

gaspar,

Sorry, this feature is not available as of now.

10. Andrew says:

Hi,
I have an array string that contains the date in format YYYY:MM:DD HH:mm:ss relative to the data. I want to put them into the X axis, but only the HH:mm:ss part. How I can do it? I’m newbie with js and canvasjs.

• Vishwas R says:

Andrew,

You can use String split() Method in date format (YYYY:MM:DD HH:mm:ss) to get just time (HH:mm:ss) of array string and pass it to X-axis

• Andrew says:

Thanks, it works wery well. But in console returns

Uncaught TypeError: Cannot read property ‘x’ of undefined

where the “x” is the first number of the date. My cose is the follow:

Time[i] = row.date_data.split(” “);

dpsHPower[j] = {label: Time[j][1], y: Number(HPower[j])};

the “j” because it is inside a for cicle. dpsHPower is a dataPoints of the chart, HPower is the y data and Time[j][1] is the string to show in the x axis.
Is it correct?

11. David says:

Hi,
Is there any way to split an x axis label over multiple lines (i.e. insert a line break into the string)? I’d like to display something like the below

14:00
Sat 1-Jan-16

centered on the axis tick mark. Having that on one line is too long. Having it rotated 90 degrees makes it too tall. Using labelwrap doesn’t let me split it logically (i.e. keeping the day name on the same line as the date). Is there any way to do this?

Thanks

• Vishwas R says:

David,

This feature is not available as of now. But you can use labelMaxWidth and labelWrap.

12. Matias says:

How can axis label show North, North-est, …?

13. ebizlogics says:

I need to convert my number in this format for axisY. How can i do that.

10 => 10.00
10.5 => 10.50
10.51 => 10.51
10.556 => 10.56

Assistance will be highly appreciated.

• Vishwas R says:

If you are trying to format the y-Value shown in indexLabel, you can use yValueFormatString. And if you are trying to format labels over y-axis, you can use valueFormatString.

14. Jason Willsboro says:

For xvalueformatstring, I want to be able to show the week range like “Monday June 1, 2016 – Monday June 8, 2016”, how to do this ?

looking forward to response thanks!

• Sanjoy says:

Jason Willsboro,

xValueFormatString defines how x values must be formatted before they appear on the indexLabel or toolTip and using valueFormatString the same feature is not achievable.
Here is an example to show labels as per your requirement using labelFormatter and intervalType.

15. boss says:

thank you .

16. veronica says:

HI,

I am using doughnut in my dashboard. am not able to format the number displayed. Like it shows 1342768.67
But o require it to be with comma separator like 1,342,768.67

Thanks,
Veronica

If you have any questions, please feel free to ask in our forums. Ask Question