React-chartjs-2: Bar Chart resizes incorrectly (funky responsive issue)

Created on 20 Nov 2017 · 5Comments · Source: reactchartjs/react-chartjs-2

There's some weird behavior when resizing an app that uses Bar Charts. This behavior can be seen right on the docs page: http://jerairrest.github.io/react-chartjs-2/

Video (click to view):

Environment info:

Chrome 62.0.3202.94 (latest)
macOS High Sierra 10.13.1

react-chartjs-2 versions

2.4.0 (public docs page linked above)
2.6.4 - seeing something similar where the element is creating some bad feedback with react-flexbox-grid, starting at a normal size and then continually growing heightwise, eventually resulting in a canvas 200,000+ pixels high. This is done without the user resizing the browser, though I think react-flexbox-grid is doing something behind the scenes to mutate the DOM, which react-chartjs-2 is probably reacting responsively to.

Source

davidcalhoun

Most helpful comment

@daru23
hey I realized what should I do
just set maintainAspectRatio True like this:
<Bar data={data} width={100} height={50} options={{ maintainAspectRatio: true }} />
and it all be done

mahdidavoodi7 on 6 Jun 2018

👍2

All 5 comments

This seems to happen when maintainAspectRatio is set to false.

fozcodes on 6 Dec 2017

👍2

I have the same problem and I don't know what should I do

mahdidavoodi7 on 30 May 2018

I have the same problem :(

daru23 on 6 Jun 2018

@daru23
hey I realized what should I do
just set maintainAspectRatio True like this:
<Bar data={data} width={100} height={50} options={{ maintainAspectRatio: true }} />
and it all be done

mahdidavoodi7 on 6 Jun 2018

👍2

Closing for now. Please supply a sandbox or code example with the latest versions of both libraries. If the problem persists, feel free to open a new issue.