Example of Stacked Smart Labels in Javascript Chart

/
/
Stacked Smart Labels

This example demonstrates smart labels in a stacked column chart. Data labels are automatically repositioned when there is insufficient space within stacked segments, ensuring readability while maintaining visual association with their corresponding data points.

More Details...

Description

This example demonstrates the smart label feature in a stacked column chart. When a stacked segment does not have enough space to display a data label, the label is automatically moved outside the segment and connected using a callout line. Smart Labels provide intelligent label placement with the following features: Automatic repositioning of labels when space is limited Connector lines linking relocated labels to their corresponding segments Series-based label and connector styling Customizable label formatting and positioning options Tooltips are enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices. Injecting Module Chart component features are segregated into individual feature-wise modules. To use stacking column series with smart labels, we need to inject StackingColumnSeries and DataLabel modules using Chart.Inject(StackingColumnSeries, DataLabel) method. More information on the stacking column series with smart labels can be found in this documentation section.