indexLabel: String (supports keyword)

Sets the default indexLabel for all the dataPoints. This can be overridden by individual dataPoints wherever required. Index Labels are used to show additional information about a dataPoint.

indexLabel can either be string literal or keywords. keywords are property names mentioned inside curly braces.

Keyword:

Instead of setting string values for all indexLabels, you can also use keywords like x, y, etc that will automatically show corresponding properties as indexLabel. This will allow you to define indexLabel at the series level once. 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: “”
Example: “{label}”, “Win”, “x: {x}, y: {y} ”
Note
  • In case of pie and doughnut charts if indexLabel is not provided, label is used as indexLabel
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data: [{
  indexLabel: "{x}, {y}",

  },
 ]
 .
 . 
});
chart.render();
Try Editing The Code

  Also See:    

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

19 Comments

  1. d_man says:

    Hi,

    I’d like to know if there is anyway to have a Pie chart show the Y value inside the slice and have the Y Label still visible as usual. I have a page where the user selects the type of chart they want to use and the indexLabel: “{y}” works for Bar and Column charts fine, but not so much for Pie and Doughnut.

    Also, I can’t seem to find the “post new thread” button on the forum, but I can post inside these document pages. Hope that’s okay.

    -D_man

    • Sunil Urs says:

      You can show the indexLabel either inside or outside the pie/doughnut – using indexLabelPlacement property. Its not possible to show values in both the places.

      Inorder to be able to post a new thread, you need to enter one of the sections listed to the top left. You probably searched in the main page of forum which is just a activity feed.

  2. d_man says:

    Ah okay. I may use another variable to set the indexLabel then for Bar or Column charts, but not for Pie or Doughnut. We’ll see.

    As for the forums I apologize. I thought I tried that. All good now! Feel free to move this conversation then.
    Thanks!

    -D_Man

  3. inlullaby says:

    Hello,

    I’d like to know, if i use inside for the indexlabelplacement, then how to make the indexlabel always inside the column? for example one of this y value i put 30, the value position now is on the top line column. Is there a way to make minheight column to put index label always on inside column?

  5. Sam says:

    can I insert images to index label for doughnut chart?
    how to change the radius of the doughnut chart

    • Sunil Urs says:

      We have just released v1.8.0 Beta which supports Syncing Multiple Chart Ranges, Vertical Zooming & Controlling Pie/Doughnut Radius. Please refer to the release blog for more information.

  6. Antoine Berthelin says:

    Hello,

    In this exemple, the indexLabelPlacement has “outside” parameter value.
    All labels are outside except the largest column (in some case, sometime inside, sometimes outside with other value).
    In this exemple, the label for “596” is inside the blue.

    How can I fix this problem ?
    Thanks for your help and your component (very usefull) !

    Antoine

    • Sunil Urs says:

      Antoine,

      indexLabel is being shown inside because column is very close to the edge of Plot Area (End of Axis Range) and there is no space left for label. This behavior cannot be changed. But you can avoid cases where it partially overlaps by setting indexLabelPlacement to “auto”

  8. ebizlogics says:

    I need to show values in indexLabel in the following format:

    10 => 10.00
    10.1 => 10.10
    10.54 => 10.54
    10.546 => 10.55

    Can you please assist how can i achieve that?

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