New to Kendo UI for Angular? Start a free 30-day trial

Displaying Series Count Label in Stacked Bar Chart

Environment

ProductProgress® Kendo UI® Charts for Angular

Description

How can I show a count label at the end of the stacked Bar Chart?

Solution

To display a count label at the end of the stacked bar, add one additional series item to the Chart. Then set the position field of the labels to left and provide a custom function to the content property.

<kendo-chart-series>
    <!-- ... other series -->
    <kendo-chart-series-item
        ...
        [data]="[0,0,0,0]"
        [labels]="{position: 'left', visible: true, content: setTotal}">
    </kendo-chart-series-item>
</kendo-chart-series>

Return the stackedValue field of the SeriesLabelsContentArgs to show the cumulative point value on the stack.

public setTotal = (args: SeriesLabelsContentArgs) => {
    const total = args.stackValue.toString();
    return total;
};

The following example demonstrates how to add a count label at the end of a stacked Bar.

Example
View Source
Change Theme:

In this article

Not finding the help you need?