How to create stack bar chart in kendo ui angular

Viewed 24

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[];
0 Answers
Related