Render Column chart with multiple colors when stacked with complex data in Angular

[Brian]

 

 

Hi Team,

I am referring this example to implement stacked column chart using a complex array object. It is rendering the chart, but it is not rendering the column with multi colors as shown in the example.

Excpected:

Actual:

Please refer the below the code snippet and the data which I am trying to bind and help me in correcting the code/data to render the expected chart output.

Code:

 <kendo-chart>
 <kendo-chart-series>
 <kendo-chart-series-item type="column" [stack]="true" *ngFor="let item of items" [data]="item" field="bandValue" categoryField="category">   </kendo-chart-series-item>
 </kendo-chart-series>
 </kendo-chart>

Data:

items = [
    [
      {
        category: 'TATA',
        bandValue: 1,
      },
      {
        category: 'TATA',
        bandValue: 4,
      },
      {
        category: 'TATA',
        bandValue: 7,
      },
    ],
    [
      {
        category: 'FORD',
        bandValue: 1,
      },
      {
        category: 'FORD',
        bandValue: 4,
      },
      {
        category: 'FORD',
        bandValue: 9,
      },
    ],
    [
      {
        category: 'GM',
        bandValue: 1,
      },
      {
        category: 'GM',
        bandValue: 4,
      },
      {
        category: 'GM',
        bandValue: 3,
      },
    ],
  ];

 

Thanks!

[Martin Bechev]

Hi Brian,

Thank you for the provided details.

The data property of the <kendo-chart-series-item> accepts an array of numbers, arrays, or objects where each value is a single bar (or column). More details can be found in the following article:

https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar/#toc-data-binding

https://stackblitz.com/edit/angular-xfyqql

To accomplish the desired outcome I am afraid that the data arrays must be restructured so that they can display the correct bars. 

Here is a demo using a modified version of the data:

https://stackblitz.com/edit/angular-ewnlqu?file=src%2Fapp%2Fapp.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik