Smart labels are the labels for the pie/doughnut chart. The smart labels prevent overlapping of labels even when a large number of labels is placed in close vicinity.
You can disable the smart labels (if required to save chart space or when there are few pie segments) using enableSmartLabels='0'. When the smart labels are switched off, the pie labels would be displayed without the smart label lines. But if the number of labels increases and smart labels are not being used, then the labels might overlap.
<chart enableSmartLabels='0'...>
The smart labels can be customized using the following attributes:
Attribute Name | Range | Description |
---|---|---|
smartLineColor | Hex Code | Color of smart label connector lines |
smartLineThickness | In Pixels | Thickness of smart label connector lines |
smartLineAlpha | 0-100 | Alpha of smart label connector lines |
isSmartLineSlanted | 0/1 | The smart lines (smart label connector lines) can appear in two ways: Slanted or Straight. This attribute lets you choose between them |
<chart smartLineThickness='2' smartLineColor='333333' isSmartLineSlanted='0'...>
You can set the label distance and clearance using the following attributes:
Attribute Name | Range | Description |
---|---|---|
labelDistance | In Pixels | This attribute helps to set the distance of the label/value text boxes from the pie/doughnut edge. This attribute is applicable only when smart labeling is disabled. |
smartLabelClearance | In Pixels | Clearance distance of a label (for sliced-in pies) from adjacent sliced out pies. |
When you have too many labels in your pie chart (which is difficult to adjust even using smart labels), the labels might overlap. In that case, you have the option to skip the overlapping labels using skipOverlapLabels='1'. The labels of the least significant pies would be removed.
You can set whether you want the actual value of the pie segment to be displayed in the label or the percentage value. By default, the actual values are displayed ($550K, $720K in the chart shown above). When you want to display their percentages, use showPercentValues='1'.
<chart showPercentValues='1'...>