valueFormatString: String

Sets the String format for labels appearing on Axis Y. Labels which appears on Axis can be formatted to increase readability. The formatting can be customized as desired.Below you will find descriptive table explaining various specifiers with example.

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisY:{
   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 the number by 100 and appends a % sign 3(“#%”) -> 300%
“‰” Per mille placeholder Multiplies the 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
Try Editing The Code

  Also See:    

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

32 Comments

  2. chaitra says:

    Hii , if i use valueFormatString: “#,.K”, for yaxis 0 level also am getting k, is there any option to display only 0 or 0k

  4. John says:

    Percentage placeholder option does not work as documented. Returns a percentage. 3(“#%”) -> 300%. Documented as 3(“#%”) -> 300.

    • Anjali says:

      John,

      Thanks for reporting. It was a mistake in the documentation and the behaviour is right. We have corrected the same.

  5. John says:

    I need it scaled by 100. In the documentation, 3(“#’%'”) returns the literal ‘%’ sign (refer to ‘string’ format specifier. 3(“#%”) should return the number scaled by 100, like per mille placeholder, to be consistent. Your documentation was correct.

  6. Christian says:

    Is it possible to chage the Group separator to a dot like 1.000.000,00 as it is used in Germany ?

  7. Peter says:

    The decimal point does not work for me, my data is e.g. 85.4321 and I want to show on the graf just 85.43, so I put valueFormatString: “0.00”, but nothing happens, can you help me please ?

  8. Eli Geske says:

    A value callback() function would be great. Custom y label based on the incremented value at that point. ie, 0 1 2 3 4 5,

    axisY:{
    valueFormatString: function(val){ if(val==3){ return “Tres!”; },
    },

  9. Eli Geske says:

    // — chart options
    ….
    valueFormatString: function(val){
    if(val == 20){
    return “twenty”;
    }
    },
    ….

    //– canvasjs.js
    var numberFormat = function(v,fs,cultureInfo){
    // allow callback as valueFormatString
    if (typeof (fs) == “function”) {
    var _v = fs(v);
    return (_v != null)?_v:v;
    }

    …… normal code continues

  10. Kamel says:

    is there any way to set values of axis y to Decrease, I want it to start from 100 and end with 0.

  13. PHP Dev says:

    Hello,

    Some one please help me in plotting line graph with example
    i want to use string data on Axis -Y and time data will be on Axis-x

    e.g.

    Axis – Y : “A”,”B”,”C”,”D”,”E”… and so on and
    Axis – X : 10:30 , 10:35,10:40 ……

    Thanks in advance

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