labelFormatter : Function

A custom formatter function that returns label to be displayed on axisY.


Notes
  • labelFormatter function should return a string.
  • You can use formatNumber and formatDate functions to format number/date values inside the formatter function.

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
axisY:{
        labelFormatter: function ( e ) {
               return "y: " + e.value;  
         }  
},
 .
 .
});
chart.render();

  • By using labelFormatter, you can return any value to be displayed on axis.
    Below is the structure of object passed as parameter to the function
    e: { // parameter sent to function
           chart,
           axis,
           value
     }
    
    Note If you have to access any preset options of the chart, you can access them via e.chart.options. For example e.chart.options.title.text

Try it Yourself by Editing the Code below.

labelFormatter Example using formatNumber function

Try it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 10

  1. for some reason in my script labelFormatter option has no effect on labels as it was not there – no errors in concsole

    • Hi,

      Here values have only read-only properties. If you want to pass any other custom variable you have to assign it with a key inside axis or chart and in labelFormatter you can retrieve it using e.axis.key or e.chart.options.key correspondingly.

      • 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

  2. can you please give me example for that
    i want to show dynamic string on y axis
    e.g :
    “A”
    “B”
    “C”

    and my x axis will be
    10:30 , 10:40 ….

    • Setting intervalType of axisX to hour you can show time data. And for showing axisY label in your format you can use

      axisY:{
      interval: 1,
      labelFormatter: function(e){
      return String.fromCharCode( e.value%26 +65);
      }
      }

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.