I am facing an issue with rendering an empty chart initially and then updating it with data. The charts are rendered when the component is initialized and added through a list of chart options. Although the empty chart is successfully rendered, I am struggling to redraw it with updated data. I am attempting to populate the chart with data from a service using promises (adding dummy values for reference).
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';
import { configs } from './configs';
@Component({
selector: 'my-app',
template: `
<div *ngFor="let chart of charts">
<div #chart></div>
</div>`
})
export class AppComponent {
charts = [];
constructor(){}
ngOnInit(): void{
configs.forEach(config => {
//Add charts
this.charts.push(config);
});
}
ngAfterViewInit(): void {
this.charts.forEach(chart => {
chart.series.push({
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
});
});
}
}
configs.ts
export const configs = [
{
chart:{
type:'line',
renderTo: 'line_chart'
},
chartName : 'abc',
title : {text : ''},
tabHolder : {'id':'line_chart','heading':'Line Chart'},
xAxis:{categories:[]},
plotOptions: {
line: {
dataLabels: {enabled: true},
}
},
series: []
},
{
chart:{
type:'bar',
renderTo: 'bar_chart'
},
chartName : 'xyz',
title: {text: ''},
tabHolder : {'id':'bar_chart','heading':'Bar Chart'},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {text: ''},
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: []
}
]
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule } from 'angular2-highcharts'
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import { AppComponent } from './app.component';
declare var require: any;
export function highchartsFactory() {
return require('highcharts');
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
ChartModule,
],
providers: [{
provide: HighchartsStatic,
useFactory: highchartsFactory,
}],
bootstrap: [AppComponent]
})
export class AppModule { }