Displaying Series Count Label in Stacked Bar Chart

Environment

Product

Progress® 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.

html

<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.

ts

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.

Change Theme

Theme

Loading ...