indexLabel: String (supports keyword)

Sets the indexLabel of individual dataPoint. indexLabel set here overrides indexLabel set from dataSeries level(if any). “indexLabel” can either be string literal or keyword. keywords are property names mentioned inside curly braces.


Keyword:

Instead of setting string values , you can also use keywords like x, y, etc that will automatically show corresponding properties as indexLabel. While setting indexLabel you specify a keyword by enclosing it in flower brackets like {x}, {y}, {color}, etc.

Range Charts have two indexLabels – one for each y value. This requires the use of a special keyword #index to show index label on either sides of the column/bar/area.
eg: indexLabel: “{x}: {y[#index]}”

In case of stacked, pie and doughnut charts you can also use special keywords like #percent & #total
eg: indexLabel: “#percent”

Important keywords to keep in mind are. {x}, {y}, {name}, {label}.


Default: null
Example: “{label}”,”Win”, “x: {x} , y: {y} ”

Notes
  • In case of pie and doughnut charts if indexLabel is not provided, label is used as indexLabel


var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data: [{
  dataPoints: [
   { x: 10, y: 10, indexLabel: "high" },

  ],
 },

]
 .
 . 
});
chart.render();


Try it Yourself by Editing the Code below.



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