indexLabelPlacement: String

Using this property you can define whether to render indexLabel “inside” or “outside” the dataPoint.

Default: Automatically handled
  • “inside” for stacked charts.
  • “outside” for pie/doughnut charts.
  • “auto” for all other chart types.
Example: “outside”, “inside”, “auto”
Notes
  • If the indexLabelPlacement is inside, it is advised to have smaller labels or to reduce indexLabelFontSize so that indexLabels can be accomodated.
  • In Pie, Doughnut, Funnel and Pyramid Charts indexLabelPlacement has to be specified at dataSeries level.
  • When set to “auto”, the chart automatically decides whether to place labels inside or outside based on the available space, except in pie, doughnut, pyramid and funnel charts. Incase of pie, doughnut, pyramid and funnel charts, “auto” sets indexLabelPlacement to “outside”.
  • In case of rangeColumn / rangeBar charts indexLabels are displayed at the extreme end when indexLabelPlacement is set to “inside” – because they have two indexLabels.
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data: [{
  dataPoints: [
   { x: 10, y: 10,  indexLabel: "label1", indexLabelPlacement: "inside" },

   ],
  },

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

Try Editing The Code

  Also See:    


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

4 Comments

  1. Code_breaker92 says:

    Hi I have a unique prob,
    I want to place the label on top of the datapoint so i have given indexLabelPlacement: “outside”.
    According to my req i have like 22em height for my map.I works fine for normal data. But in one case
    two column graphs one is 0 the other is 94.. the index label though placed outside is pushed inside at the top end can anyone tell why this is happening and how to fix this.
    Thanks in Advance

    • Sanjoy says:

      Whenever the label is placed on top of dataPoint, it gets pushed down if there is no space left at the top. You can overcome this issue by increasing the axisY’s maximum such that there is enough space for labels.

  2. Swati says:

    how to apply bar chart colour by x value eg: if x is 1 then the color is red, if x is 2 the color is blue etc

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