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.
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}.
var chart = new CanvasJS.Chart("container",
{
.
.
data: [{
indexLabel: "{x}, {y}",
},
]
.
.
});
chart.render();
Also See:
Comments 19
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
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
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.
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
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?
inlullaby,
As of now we don’t have a way to set minimum column height. You can instead try reducing indexLabelFontSize property of dataPoints or dataSeries.
Hi All,
can we set index label for stacked bar 100 chart?
please reply,,
karthik,
Yes, you can set indexLabel for stackedBar100 chart. Please refer this example.
okay thank you so much….
can I insert images to index label for doughnut chart?
how to change the radius of the doughnut chart
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.
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
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”
Thanks for your answer Sunil,
I will use “auto” configuration (best option as you said)
Thanks.
is there any method to show indexLabel, only if it is greater than 0.
Debasish,
Here is an example to hide indexLabel for the values which are negative.
Its not working. can you please help?
Hi, sorry its my fault. Its working fine. Thanks
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 are trying to format the y-Value shown in indexLabel, you can use yValueFormatString. And if you are trying to format labels over y-axis, you can use valueFormatString.