How to bind dynamic data to the e-series of a chart?

Description

This article demonstrates how to dynamically bind data to the e-series elements in a chart component using Angular.

Solution

To dynamically bind data in an Angular Chart Component, you can use Angular’s *ngFor directive. This structural directive allows you to iterate over an array and generate a series for each data set dynamically. Each object in the array corresponds to a series, and its data can be rendered directly within the chart using e-series.

Code Snippet

app.component.html

           <e-series-collection>
               <e-series *ngFor="let row of dataTotal" [dataSource]='row.data' xName='x' yName='y'> </e-series>
           </e-series-collection>

app.component.ts

export class AppComponent {
   public dataTotal: Object[] = [
       {
         data : [
           { x: new Date(1975, 0, 1), y: 16 },
           { x: new Date(1980, 0, 1), y: 12.5 },
           { x: new Date(1985, 0, 1), y: 19 },
           { x: new Date(1990, 0, 1), y: 14.4 },
           { x: new Date(1995, 0, 1), y: 11.5 },
           { x: new Date(2000, 0, 1), y: 14 },
           { x: new Date(2005, 0, 1), y: 10 },
           { x: new Date(2010, 0, 1), y: 16 }
         ],
         seriesName: 'China'
       },
       {
       data : [
           { x: new Date(1975, 0, 1), y: 10 },
           { x: new Date(1980, 0, 1), y: 7.5 },
           { x: new Date(1985, 0, 1), y: 11 },
           { x: new Date(1990, 0, 1), y: 7 },
           { x: new Date(1995, 0, 1), y: 8 }, 
           { x: new Date(2000, 0, 1), y: 6 },
           { x: new Date(2005, 0, 1), y: 3.5 },
           { x: new Date(2010, 0, 1), y: 7 }
       ],
       seriesName:'Australia'
     }
     ];
  } 

The following image illustrates the output of the above code.

View Sample in Stackblitz