Generate multiple charts based on json in angular 8 - highcharts

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>