indexLabelFormatter: Function

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

Notes
  • indexLabelFormatter overrides indexLabel property.
  • indexLabel & indexLabelFormatter on dataPoints override corresponding properties in dataSeries.
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data:[{
        indexLabelFormatter: function ( e ) {
               return "Custom IndexLabel"  + e.dataPoint.label;  
         }  
  }],
 .
 .
});
chart.render();

  • By using indexLabelFormatter, you can return any value to be displayed as indexLabel.
Note
  • index parameter is available only in case of range charts. It is undefined in case of other chart types.

Below is the structure of object passed as parameter to the function

e: { // parameter sent to function
       chart,
       dataSeries,
       dataPoint,
       index,        // Available only in range charts
       total,        // Available only in stacked, pie and doughnut charts
       percent,      // Available only in stacked, pie and doughnut charts
 }
Try Editing The Code

  Also See:    

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

Comment

  1. Adem says:

    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.