Home › docs › charts › chart options (reference) › axisX › labelFormatter

Pages

open all | close all

labelFormatter : Function

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


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",
{
 .
 .
axisX:{
        labelFormatter: function ( e ) {
               return "x: " + 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,
       label
 }
    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 formatDate function

Try it Yourself by Editing the Code below.

  Also See:    


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

Comments 8

  1. am trying to plot x-axis labels using labelFormatter from a json object where it consists of date and value.
    May I know how to do that ?

  4. Hi

    Is there a way to format the label with html, like doing the label with a border or place a where i need

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

© fenopix
About Us
FAQs
Careers
Privacy Policy

Server Side Technologies
ASP.NET MVC Charts
PHP Charts
JSP Charts
Spring MVC Charts

Front End Technologies
JavaScript Charts
jQuery Charts
React Charts
Angular Charts
JavaScript StockCharts

Contact
Fenopix, Inc.
2093 Philadelphia Pike,
#5678, Claymont,
Delaware 19703
United States Of America

Server Side Technologies
Front End Technologies
Contact
ASP.NET MVC Charts JavaScript Charts FAQs
PHP Charts jQuery Charts Sales Enquiries
Spring MVC Charts React Charts Support Forum
JSP Charts Angular Charts Careers
JavaScript StockCharts

Privacy Policy  © fenopix