indexLabelFormatter: Function

A custom formatter function which returns the text to be displayed as indexLabel on dataPoints.

  • indexLabelFormatter overrides indexLabel property.
  • indexLabel & indexLabelFormatter on dataPoints override corresponding properties in dataSeries.

var  chart =  new  CanvasJS.Chart("container",
        indexLabelFormatter: function ( e ) {
               return "Custom IndexLabel"  + e.dataPoint.label;  

  • By using indexLabelFormatter, you can return any value to be displayed as indexLabel.
    Below is the structure of object passed as parameter to the function
    e: { // parameter sent to function
           index,        // Available only in range charts
           total,        // Available only in stacked, pie and doughnut charts
           percent,      // Available only in stacked, pie and doughnut charts
  • index parameter is available only in case of range charts. It is undefined in case of other chart types.

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.


  1. Hello,

    Is it possible to use html? For example, I would like to make kg bold:

    indexLabelFormatter: function(e){
    return e.dataPoint.label + ” ” + e.dataPoint.y + ” ” + “kg” ;

    What would I really like is to add padding to indexLabel. Here is my code:

    type: “line”,
    markerType: “square”,
    markerColor: “#f49124”,
    markerBorderColor: “#000”,
    xValueType: “number”,
    yValueType: “number”,
    yValueFormatString: “#,###”,
    indexLabel: “{c}”,
    indexLabelBackgroundColor: “#f49124”,
    indexLabelFontColor: “#fff”,
    indexLabelFontSize: 18,
    indexLabelLineThickness: 2,
    indexLabelLineColor: “transparent”,
    indexLabelPlacement: “outside”,
    indexLabelFontWeight: “bold”,

    IndexLabel has no padding and it is stacked to top left

    Thanks for suggestions.