This React stacked column chart example demonstrates smart labels on stacked segments. Data labels are automatically repositioned when space is limited, so the chart stays readable.
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:
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.
More information on the stacking column series with smart labels can be found in this documentation section.