How to wire Kendo UI Angular Chart to a datasource?

Question

I have a Kendo UI chart with some series data. When I update the series, the chart data does not change. I see from the documentation that it needs to be wired to a datasource. But the datasource property is not available in Angular tag.

HTML

<kendo-chart
  [series]="chartConfig.series"
  [valueAxis] ="chartConfig.valueAxes"
  [legend]="chartConfig.legend"
  [title]="chartConfig.title"
  [tooltip]="chartConfig.tooltip"
  (seriesClick)="onSeriesClick($event)"
  (drag)="onDrag($event)"
  (dragStart)="dragStart($event)"
  (dragEnd)="dragEnd($event)">
</kendo-chart>

Typescript

public chartConfig = {
title: {
  text: 'Insight'
},
legend: {
  position: 'bottom'
},

series: [], //Some data 
valueAxes: [], //Some data
categoryAxis: {
  categories: [],

  axisCrossingValues: [24, 24, 0],
  justified: true
},
tooltip: {
  visible: true,
  format: '{0}',
  template: '#= category #/03: #= value #'
}
};

When I have an updated value, then I update the series like this.

this.chartConfig.series[seriesIndex].data[xAxisIndex] = parseInt(updatedValue.Value);

But the Chart doesn't get updated.

Please show some example code with how your data source is configured at the moment. — igg
@IraklisGkougkousis Added the code which is currently working. As per documentation I need to be using dataSource to keep chart updated when values change. The dataSource directive does not exist in Kendo Angular package. — Chandra Eskay
I think you misunderstand. There is no need for dataSource directive. What is possibly happening is change detection not picking up the changes. How do you update chartConfig.series ? — igg
I'm updating directly the series value using the indices. I have added additional code in the question. — Chandra Eskay
OK, try adding this line the parseInt: this.chartConfig.series = [...this.chartConfig.series]. This will update the reference of this.chartConfig.series. I can write a more detailed answer about this if you want. — igg

igg igg · Accepted Answer · 2020-02-10T13:38:58

There is no datasource directive, you don't need anything like that. The problem is Angular not picking up changes to this.chartConfig.series.

Angular change detection checks for reference changes, not simply value changes. The simplest solution for this problem is after whatever updates you perform, change the reference of this.chartConfig.series like so:

this.chartConfig.series[seriesIndex].data[xAxisIndex] = parseInt(updatedValue.Value);
this.chartConfig.series = [...this.chartConfig.series];

That final line basically creates a new array with the same elements as the original and changes the reference of this.chartConfig.series to point to the newly created array. This makes it more likely to be picked up by Angular's change detection.

How to wire Kendo UI Angular Chart to a datasource?

1 Answers