I'm trying to dynamically render charts(highcharts) through a config file in angular2. Config file has list of objects that is pushed to array list in component.ts and it is read through ngFor directive in HTML file. Though the charts are being rendered perfectly in its respective divs, removal of div1 renders a blank page i.e. div2 and div3 gets hidden, whereas removal of other divs(div2 or div3) have no effect other charts.
Config.ts
export const configs = [
{ chart:{
type:'line',
renderTo: 'Div1'
},
placeholder : 'line_chart',
title : {text : 'abc'},
xAxis:{categories:[]},
plotOptions: {
line: {
dataLabels: {enabled: true},
}
},
series: []
},
{
chart:{
type:'bar',
renderTo: 'Div2'
},
placeholder : 'bar_chart',
title: {text: 'def'},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {text: 'xyz'},
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: []
},
{
chart:{
type:'pie',
renderTo: 'Div3'
},
placeholder : 'pie_chart',
title: {text: 'pqr'},
tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
xAxis : {categories: []},
series: []
}
]
app.component.ts
export class AppComponent implements OnInit{
title = 'Graphs';
charts = [];
constructor(private graphService: GraphsService){}
ngOnInit(): void{
configs.forEach(config => {
this.graphService.getData(config.chart.type, config.placeholder).then(dataList => {
config.series.push(dataList[config.placeholder]);
config.xAxis.categories = dataList[config.placeholder].name;
this.charts.push(config);
})
});
console.log(this.charts);
}
}
HTML file
<div *ngFor="let chart of charts">
<chart [options]="chart"></chart>
</div>
<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>