如何在 kendo ui angular 中创建堆栈条形图

Question

I'm new to angular and I'm trying to create stack bar charts using kendo UI. I'm getting normal bar rather than stack bar chart, used stack="true" also not getting the view in stack.

Here is my code:

app.component.html

<kendo-chart style="height: 150px;">
    <kendo-chart-legend position="bottom" orientation="horizontal" [visible]="true"></kendo-chart-legend>

    <kendo-chart-area background="#F2FAFD"></kendo-chart-area>

    <kendo-chart-series>
        <kendo-chart-series-item type="column" *ngFor="let item of currentFindingsData" [data]="item.items" [name]="item.value" [stack]="true">

        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

app.component.ts

public currentFindingsJson: GroupResult[] = [{
    Value: "3"
    color: "#2E75B5"
    status: "CAT2 (Minor)"    
}, {
    Value: "10"
    color: "#2E75B5"
    status: "CAT1 (Minor)"
}];

this.currentFindingsData = groupBy(currentFindingsJson, [{field: 'status'}]) as GroupResult[];

Answer 1

You need to specify [stack]="{ type: '100%' }" .

Check this document link - https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar/#toc-100-stacked-bar