Generate multiple charts based on json in angular 8

Question

I am using high charts in angular 8.I am getting chart for single object in an array of objects but i want to get each chart for each object dynamically how to achieve that. Below I have attached my working stackblitz for reference.

JSON:

[
   {
      "nameList":[
         {
            "id":203,
            "Namelist_constrains":{

            },
            "lists":[
               {
                  "name":"books",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               },
               {
                  "name":"paper",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               },
               {
                  "name":"pen",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               },
               {
                  "name":"ball",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               },
               {
                  "name":"bat",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               }
            ]
         },
         {
            "id":204,
            "Namelist_constrains":{

            },
            "lists":[
               {
                  "name":"books",
                  "data":{
                     "A15people":5004,
                     "A30people":345,
                     "A90people":1334
                  }
               },
               {
                  "name":"paper",
                  "data":{
                     "A15people":112,
                     "A30people":345,
                     "A90people":6667
                  }
               },
               {
                  "name":"pen",
                  "data":{
                     "A15people":9882,
                     "A30people":3456,
                     "A90people":29898
                  }
               },
               {
                  "name":"ball",
                  "data":{
                     "A15people":3465,
                     "A30people":224,
                     "A90people":455
                  }
               },
               {
                  "name":"bat",
                  "data":{
                     "A15people":876,
                     "A30people":234,
                     "A90people":664
                  }
               }
            ]
         }
      ]
   }
]

For the above I need to get two charts because it have two objects.

In my stackblitz i have only one object in the json. I am little bit confused how to achieve this.help me to solve this.

Link:

https://stackblitz.com/edit/angular-highcharts-example-xqcnyv?file=src/app/app.component.ts

Answer 1

You could create a simple component that will take a chart's data as it's Input and return standalone chart. Then you might use the *ngFor directive to generate that component for each element of your data.

Unfortunately, I am not familiar with the angular-highcharts, so I created the simple demo with highcharts-angular - the officially supported Angular wrapper.

Live demo: https://stackblitz.com/edit/highcharts-angular-sparkline-j3nujf?file=src%2Fapp%2Fapp.component.html

data:

  myData = [
    { data: [1, 2, 3], name: "first" },
    { data: [4, 5, 6], name: "second" },
    { data: [7, 8, 9], name: "third" }
  ];

app.component.html

<app-spark-line 
   *ngFor="let elem of myData" 
   [name]="elem.name" 
   [data]="elem.data"
></app-spark-line>

spark-line.component.ts:

export class SparkLineComponent {
  Highcharts: typeof Highcharts = Highcharts;
  @Input() data: Array<number>;
  @Input() name: string;
  updateFlag = false;
  chartOptions: Options = {
    chart: {
      type: "area",
      margin: [2, 0, 2, 0],
      width: 200,
      height: 200,
    },
    series: [
      {
        name: '',
        type: 'area',
        data: []
      }
    ] 
  };

  ngOnChanges(change: SimpleChanges) {
      this.chartOptions.series = [{
        name: change.name ? change.name.currentValue : null,
        type: 'area',
        data: change.data.currentValue,
      }];
      this.updateFlag = true;
    }
  }

sparkline.component.html:

<highcharts-chart 
  [Highcharts]="Highcharts" 
  [options]="chartOptions" 
  [(update)]="updateFlag"
>
</highcharts-chart>