How to create stack bar chart in 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