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”
- 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();
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.
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 this case you can assign corresponding color using a loop. Please refer this example.