You must be logged in to post your query.
Home › Forums › Chart Support › Browser crashes when rendering chart
Tagged: Angular 2
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?
chart.render()
@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
You must be logged in to reply to this topic. Login/Register