A custom formatter function which returns the text to be displayed as indexLabel on dataPoints.
var chart = new CanvasJS.Chart("container", { . . data:[{ indexLabelFormatter: function ( e ) { return "Custom IndexLabel" + e.dataPoint.label; } }], . . }); chart.render();
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 }
Comment
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.