Chart content not getting loaded in popup

šŸ‘:0

I think you need to make a few changes to get it to work.

L.DomUtil.create(ā€˜canvasā€™, ā€˜popupGraphā€™);

You are creating a canvas element with class popupGraph, but you donā€™t append it to the DOM structure (i.e. there is no container). I donā€™t see it used in the code sample too.


var ctx = document.getElementById("popupChart").getContext("2d");

At this point, I donā€™t think you have an element with ID = popupChart added (you seem to be adding code to add it down the line). So, unless your HTML already has an element with ID = popupChart, this is not going to work.


new Chart(ctx).Doughnut(chartData, chartOptions);

ā€¦

layer.bindPopup(content)

You should draw the chart only once the canvas element is visible (otherwise Chart.js will assume the width and height is 0) and properly sized. You need to move this to after you have your canvas element added and visible.

The HTML (i.e. the canvas element) will be shown only once your popup is visible, which in turn will happen only after you click on the layer. Only after the popup is open should you do a new Chart(ctx)ā€¦

Leave a comment