Home forums Using CanvasJS Browser crashes when rendering chart

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Manoj Mohan 4 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #25427

    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?

    #25441

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.