Chartjs chart not showing in colorbox

Question

I am trying to display a donut chart in a popup window (colorbox) with dummy values, but it gives an error, but if I just call it in the browser (via url), it displays a graph.

IndexSizeError: The index or size is negative or greater than the allowed amount.

var DoughnutChart = [{ value: 60, color: "#fcc79e" }, { value: 30, color: "#beefd2" }, { value: 50, color: "#ffddfb" }, { value: 20, color: "#cdecff" }, { value: 90, color: "#fff5bc" }]; var myDoughnutChart = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(DoughnutChart); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <canvas id="canvas" height="450" width="600"></canvas> 

Answer 1

Chart.js requires the canvas to have a rendered size before it can be displayed. So you need to have the chart initialized inside cbox_complete , and not do it first, and then open colorbox

Sort of

 $(document).bind('cbox_complete', function () { var DoughnutChart = [{ ... ... var myDoughnutChart = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(DoughnutChart); });