0

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>
Abhishek Chandran
  • 1,536
  • 1
  • 13
  • 21
  • Do you have js errors in console? – Paweł Fus May 08 '17 at 08:33
  • There are no errors in console. – Abhishek Chandran May 09 '17 at 06:20
  • Could you create a simple demo in Plunker or provide enough code to allow recreation of the issue? If you are trying to create a chart and the rendering div is not found you should get an console Highcharts error like in this demo: http://jsfiddle.net/7476kxxt/ Is the mentioned in the question removal of the Div1 dynamic? If yes, how the removal of a div affects your application? – Kacper Madej May 09 '17 at 09:22

0 Answers0