"responsive" option problem since v4

Expected behavior

Chart should be resized when window size changes. (now it resizes only when scaling to smaller resolution)

Current behavior

I am using "responsive" option to resize chart based on it's parent container size.
Everything works while scaling window size down, but when it comes to changing window resolution to larger one that doesn't work.

Reproducible sample

https://codepen.io/ouqu5/pen/ZEjEPqm

Optional extra steps/info to reproduce

1. Resize window to mobile/tablet (chart resizes properly)
2. Resize it back to full screen (chart is not resized)

Possible solution

No response

Context

No response

chart.js version

4.1.1

Browser name and version

No response

Link to your project

No response

[igomonteiro]

Hi ouqu5, have you tried to set the option maintainAspectRatio to false? And also, you will probably need to set the width and height in the parent container, not in the canvas element.

Read this docs about responsiveness: Responsive charts, read the important note about responsive charts and also check this example which is full responsive.

I know that maintainAspectRatio fixes this problem but it should work event with this option enabled.
I've followed all steps in docs so my chart setup is 100% valid.

Example you've send works because it's using chart.js 3.5.1 version while problem occurs only from version 4 of this library.

[igomonteiro]

@ouqu5 the example also works with the latest version

[legege]

There is indeed an issue with version 4.x. When reducing size of container, it works. But not when increasing. Last working version 3.9.1.

@igomonteiro example works only because of maintainAspectRatio: false. Try enabling it, as it is by default.

[jonbuda]

seeing this issue as well, with 4.1.1. in most cases. I would think this should work regardless of what maintainAspectRatio is set to.

[JordanXA]

Any update on this? Still appears to be an issue in 4.2.0

[ipax77]

From my experience you have to define the height of the container, too, now.
maintainAspectRatio respects container height.

[JordanXA]

By setting an aspect-ratio on the containing div I was able to get the same responsiveness for graphs using an aspect ratio. This confuses me because it seems like maintainAspectRatio should control the size of the canvas because if I wanted to size the container I would just size the container in the first place.

[pavelspichonak]

Have this issue as well.

[ZLevine]

I've had this issue as well—I have found a workaround, however. I'm using MUI specifically.

As long as the chart has a sibling that consumes space inside its parent, auto-resizing works. As soon as the chart sits alone in a parent, it will resize down but not up.

This does not work:

  return (
    <Box>
      <Chart
        type="bar"
        datasetIdKey="name" // the dataset property to use as the unique identifier for the data set. See: https://react-chartjs-2.js.org/docs/working-with-datasets/
        options={options}
        data={data}
        plugins={[legendExtraMargin]}
      />
    </Box>

This does not work:

  return (
    <Box>
      <div />
      <Chart
        type="bar"
        datasetIdKey="name" // the dataset property to use as the unique identifier for the data set. See: https://react-chartjs-2.js.org/docs/working-with-datasets/
        options={options}
        data={data}
        plugins={[legendExtraMargin]}
      />
    </Box>

This does work:

  return (
    <Box>
      <div>&nbsp;</div>
      <Chart
        type="bar"
        datasetIdKey="name" // the dataset property to use as the unique identifier for the data set. See: https://react-chartjs-2.js.org/docs/working-with-datasets/
        options={options}
        data={data}
        plugins={[legendExtraMargin]}
      />
    </Box>

YMMV but hopefully this workaround helps. Obviously, being forced to display something is not ideal, but you could adjust the size of the rendered element to mitigate. Interestingly, making it very small (max-height: 1px, font-size: 1px, or line-height: 0.1) causes the resize to animate very slowly ¯\(ツ)/¯

[athisun]

I was able to fix this without setting an exact container height by defining an aspect-ratio instead. The default aspect ratio for Chart.js is 2, so doing this restores Chart.js 3 behaviour:

<div class="chart-container" style="aspect-ratio: 2">
    <canvas id="chart"></canvas>
</div>

Edit: I believe this issue was introduced in #10646, though I'm not familiar enough with the logic or its intended effect to offer a PR to fix it.

[pavelspichonak]

I would suggest just to fix it instead of using workarounds. This is maybe not critical but important issue.

[dan-ville]

Bumping this issue.

If I pass an onResize function to the options array of a chart component, like onResize: () => {console.log('Resizing chart')}, I am experiencing that the function fires when scaling the chart down, but it doesn't fire when the viewport scales up.