5 thoughts on “[Chartjs-v2.0] Infinite .resize() when scrollbar appears”

  1. 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

  2. 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

  4. We fixed this by setting:
    maintainAspectRatio: false
    in the options which means the height is fixed.
    It’s not ideal but we found we could get a height that worked across all widths.
    Trying to tinker with the scrollbars’ behaviour meant we got into the tricky world of browser functionality which introduced unwanted side effects elsewhere.

  5. Is #6011 supposed to fix this issue? I am still able to replicate it when horizontal and vertical scroll bars show up simultaneously.

Comments are closed.