React-chartjs-2: 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):

[Pringels]

Thanks for supplying more information @davidcalhoun 👍 I will add it to the bugfix backlog

[andrewbrntt]

Any fix for this yet?

[herwaldt]

Check out this suggestion. This solved the issue for me.

I wrapped my component with a div like in the link below and added height: "30vh" for what I needed

<div style={{ position: "relative", margin: "auto", width: "80vw", height: '30vh' }}>
              <Bar
                data={data}
                options={options}
                className={classes.barchart}
              />
</div>

https://stackoverflow.com/questions/57385938/how-to-get-react-chartjs-to-resize-back-down-with-window

[fakorede-bolu]

I was able to get this to work by:

1. set options {{responsive: true, maintainAspectRatio: true}}

2. remove the width and height from the options

3. Set the parent to position: relative.

[4eshircat]

I was able to get this to work by:

1. set options {{responsive: true, maintainAspectRatio: true}}
2. remove the width and height from the options
3. Set the parent to position: relative.

Thank you very much!
maintainAspectRatio: true fixed the issue 🎉

[DiegoOquendo]

The problem

ChartJS in its documentation explain that you should no change the sizes in the _canva_ element directly. The _Canva_ element should be wrapped in a _div_ element and then follow the rest of the steps.

The solution

In my case using React, the solution is here:

<div className="chart-container">
    <Bar
        data={{ ... }}
        options={{
            responsive: true,
            maintainAspectRatio: false
        }}
    >
    </Bar>
</div>

In the CSS:

.chart-container {
  width: 100%;
  height: 80vh;
}

And that's it.

Solution for Vanilla JS

If your using Vanilla JavaScript check this video

The oficial documentation for the solution is here

[fafa1]

I was able to get this to work by:

1. set options {{responsive: true, maintainAspectRatio: true}}
2. remove the width and height from the options
3. Set the parent to position: relative.

Thanks a Lot, this tip help me a lot and work very well. I set a parent div with position: relative.