Chartjs Graph is not showing in colorbox - chart.js

Question

I am trying to display a Doughnut Chart in the popup(colorbox) with the dummy values but it is giving error, but if i simply call it in browser(via url) it display the graph.
IndexSizeError: 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 needs the canvas to have a rendered size before it can be rendered. So you need to have your chart initialization inside the cbox_complete event hook instead of doing it first and then opening the colorbox
Something like
$(document).bind('cbox_complete', function () {
var DoughnutChart = [{
...
...
var myDoughnutChart = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(DoughnutChart);
});