New to KendoReact? Start a free 30-day trial
Displaying Category-Level Totals Inside KendoReact Stacked Bar Chart
Updated on Jan 30, 2026
Environment
| Product Version | 13.3.0 |
| Product | Progress® KendoReact Chart |
Description
I want to display the sum of all stacked series for each category inside the chart area, positioned horizontally right next to each bar in a KendoReact Stacked Bar Chart. The totals should appear next to the bars without shrinking or compressing the column width or the main plot area. Adding an additional series for totals should not affect the chart layout.
This knowledge base article also answers the following questions:
- How to show totals for stacked series in KendoReact Stacked Bar Chart?
- How to position labels next to bars in KendoReact Chart?
- How to add a zero-value series to display totals?
Solution
To achieve this behavior, add a series with zero values and use custom labels to display the totals. This approach ensures the layout remains unchanged while positioning the totals next to the bars.
- Compute the totals for each category by summing all series values.
- Add a new series with zero values and custom labels that display the computed totals.
- Position the labels to the right of the bars using the
position: 'right'setting.
Change Theme
Theme
Loading ...
Key Details
- Zero-value series: Adding a series with zero values ensures the chart layout and bar widths remain unaffected.
- Custom labels: The
labels.contentcallback allows displaying the pre-computed totals instead of the actual series value. - Label positioning: Setting
position: 'right'places the totals next to the end of each stacked bar.