Serious resize issue if custom size is specified

[domehead100]

Whenever there is a resize of the canvas element, such as if the user resizes their browser window, and there is a custom size specified on the chart, the chart grows in vertical height. Chart.js itself does not seem to have this issue.

To see an example, try the samples page, http://jerairrest.github.io/react-chartjs-2/, and watch the "Bar Example (custom size)" sample. Each time you resize the browser window, the chart will grow in vertical height.

In my own project, the chart will go into an infinite loop and grow until the browser runs out of memory, though this doesn't happen on the sample page. I suppose the chartjs-size-monitor is the culprit since I don't see my component rerendering.

[domehead100]

As a note, a simple workaround seems to be to not use the height prop at all but just set the height of the container and let the chart fill its container. In my case, I'm resizing the div that is the parent of the canvas element, and it seems to work fine.

[GregoryMender]

Also, experiencing this issue, Also, options for y-axis don't seem to do anything at all, it just fits in the container height in whatever the least expected way would be.

[retwedt]

Any update on this? I am having the same infinite-growing loop issue, not really the effect I am going for.

[NoFr1ends]

Having the same issue

[steeply]

+1

[pfreedmanJG]

+1

[goranefbl]

+1. Anyone found a workaround? For some reason, if i dont specify size, it does not follow container size.

[brianlaw033]

add a overflow-y: scroll to the body fix the problem
a little bit ugly tho

[cention-sany]

I created a HOC like below:

import { Doughnut } from 'react-chartjs-2';

function withChartSizeControl(Component) {
	return props => (
		<div
			className="chart"
			style={{
				position: "relative"
				, height: props.height+"px"
				, width: props.width+"px"
			}}
		>
			<Component {...props} />
		</div>
	);
}

const NewDoughnut = withChartSizeControl(Doughnut);

<NewDoughnut width={200} height={100} />

Reference: https://www.chartjs.org/docs/latest/general/responsive.html#important-note

[cujarrett]

I'm seeing this behavior as well. When I resize smaller the chart doesn't respond.

[tahv0]

I created a HOC like below:

import { Doughnut } from 'react-chartjs-2';

function withChartSizeControl(Component) {
	return props => (
		<div
			className="chart"
			style={{
				position: "relative"
				, height: props.height+"px"
				, width: props.width+"px"
			}}
		>
			<Component {...props} />
		</div>
	);
}

const NewDoughnut = withChartSizeControl(Doughnut);

<NewDoughnut width={200} height={100} />

Reference: https://www.chartjs.org/docs/latest/general/responsive.html#important-note

For me this didn't work. I had to put !important to the end of height value, then it did work.

[davidcalhoun]

I also ran into this problem, which is why I filed #222 a few years back. Sorry I didn't provide the steps to reproduce. It's still happening right on the docs as of right now:

1. Open http://jerairrest.github.io/react-chartjs-2/
2. Scroll to Bar Example (custom size)
3. Expand and contract the window width several times.

Observed: the height of the Bar Chart continues to grow way offscreen.
Expected: the height of the Bar Chart should maintain a reasonable height.

Video (click to view):