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 and Doughnut 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.
  • 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 it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 4

  1. 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

    • 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. 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

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.