[BUG] Pie chart is cut in half when responsive and inside a collapsed element 2.6.0

[Peter-Van-Drunen]

Expected Behavior

Currently while using a pie chart with responsive: true in a bootstrap modal and using Reactjs.net (or any collapsible element in html5 by my reckoning) I experienced a bug where the pie chart in a grid would become broken when re-rendered in a hidden modal.

Before I go any further yes I know reactjs has a charts wrapper called react-chartjs but using react components in Reactjs.net is hard and as far as I can tell charts.js works fine beyond this bug I found.

Here is the modal before I search my list of modals:

The canvas is in a <div class="col-sm-4"> wrapper element. The same goes for the bootstrap panels next to it.

I would expect this behavior to remain constant but when I used a reactjs search feature to filter out my list of modals and then reopen a modal the below behavior is encountered.

Current Behavior

After filtering out the modals based on their name, the pie chart appears like so:

The pie chart will flicker between the half-pie and the small pie depending on which one has had a mouseover event most recently.

Possible Solution

For now, the solution I found was to manually resize the canvas each time the modal is updated in Reactjs using componentWillUpdate(). Simply getting the canvas node and setting canvas.height=height and canvas.width=width works fine. I did this because the issue seems to be related to the responsive resizing returning a value of -30 for the dimensions of the canvas due to the canvas being in a collapsed modal element and then getting confused when it tries to resize from there. So simply changing this value manually before calling new Chart( ... ) works to fix this bug. However this does result in blurry canvas in some situations.

Steps to Reproduce (for bugs)

Bug would be hard to reproduce in a fiddle or something because it involves Reactjs. If someone can point me in the right direction for reproducing this bug in straight-forward way I would be glad to do that.

Environment

• Chart.js version: 2.6.0
• Browser name and version: Chrome Version 58.0.3029.110 (64-bit)
• Reactjs v15.3.2
• Bootstrap v3.3.7

[etimberg]

I think this might be as simple as making sure the outputs of https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L172-L173 are >= 0.

Do you have a fiddle or other equivalent that reproduces this that we could test with

[Peter-Van-Drunen]

I do not have a fiddle up and running. I can provide snippets of the code if that would be useful, however. And I think you're right on the solution.

Other than that I can do some testing of my own tomorrow.

[etimberg]

Ok, if you are able to test a local build with the idea I had above and it works, please submit a PR 😄

[Peter-Van-Drunen]

PR submitted. #4406

[gabrielcht]

I had a similar problem (issue 4410). Strangely i solved with this:

if ((window.outerHeight > window.outerWidth) && window.devicePixelRatio > 1) { alturaCanvas = parseInt(4 * anchoCanvas); $('#contenedorGraficosTemp #grDescuentos').height(alturaCanvas); $('#contenedorGraficosTemp #grDescuentos').width(anchoCanvas); } else { $('#contenedorGraficosTemp #grDescuentos').height(alturaCanvas); }

I don't know why the canvas was smaller than his precedent hidden iframe