Browser crashes when rendering chart

[spider]

This is a method in component file

    graphGenerate(){

        let dataPoints = [
	    { y: this.usa, name: "USA" },
            { y: this.china, name: "China" },
            { y: this.india, name: "India" }
		];
        
        let chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            animationEnabled: true,
            exportEnabled: true,
            title:{
                text: "Country Population"
            },
            
            data: [{
                type: "pie",
                showInLegend: true,
                toolTipContent: "<b>{name}</b>: ${y} (#percent%)",
                indexLabel: "{name} - #percent%",
				dataPoints : this.datapoints
			}]
        });
        
        chart.render();
    }

This is how my HTML code looks like

<div class="col-md-12 text-center">
           <button (click)="graphGenerate()" class="btn btn-primary btn-xl btn-analyse" >Pie Chart</button>
           <div id="chartContainer" style="height: 370px; width: 100%; margin-left:auto;margin-right:auto;"></div>
</div>

When I click the button, my browser crashes and it does not generate the graph. Problem starts when executing chart.render() line. No error either. What am doing wrong?

[Manoj Mohan]

@spider,

You seemed to be creating chart everytime you click on the button. I would suggest you to create chart once, outside graphGenerate method and update the chart within the method. Also kindly confirm whether the y-values are numeric or not.

If this doesn’t help you resolve the issue, kindly share sample project over Google-Drive / Onedrive so that we can run it locally at our end, understand the scenario better and help you out.

——
Manoj Mohan
Team CanvasJS