[Chartjs-v2.0] Infinite .resize() when scrollbar appears

[madmoizo]

https://jsfiddle.net/egnLh4a3/

Resize the chart window (horizontally) until scrollbar appears/disappears (on chrome), the chart starts to blink, it seems to be an infinite .resize()

[etimberg]

I've seen this before. I'm not entirely sure of the best way to fix it yet. The problem happens because the height of the chart causes the browser to add scrollbars which causes a resize which changes the height of the chart removing the need for scrollbars. This then continues indefinitely.

Some possible work-arounds:

• Show the scrollbars all the time
• Use max-width and max-height on the div containing the canvas to prevent the chart from getting too large

[Luca7993]

a possible solution is set responsive: false and resize the chart manually:
var myPieChart = new Chart($("#myChart"), { type: "pie", data: data, options: options }); $(window).bind("resize", function () { myPieChart.resize(); //resize the chart when the window size is changed }); myPieChart.resize(); //call it the first time