[Bug]: Responsive chart shrinks only

[vrde]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I was checking the docs for the Line component and I noticed that if I resize the preview and make it smaller the chart shrinks (that is correct), but when I give it more space it doesn't grow, try it here https://react-chartjs-2.js.org/examples/line-chart/

Reproduction

https://react-chartjs-2.js.org/examples/line-chart

chart.js version

the one used by the docs

react-chartjs-2 version

the one used by the docs

Possible solution

No response

[vrde]

:wave: any update on this?

[diegotraid]

Hi! You should wrap the chart component within a <div> with position relative and width and height values set.

More on this: https://www.chartjs.org/docs/latest/configuration/responsive.html

Working example (based on the one you are referring to): here

Note that the maintainAspectRatio option is set to false.

[vrde]

@diegotraid thanks for your answer! I'm a bit surprised this configuration isn't the default one as responsive widgets are more or less the default 😄

I'll implement your suggestions.

[GeorgeFlorian]

Every example from your websites: https://react-chartjs-2.js.org/examples and https://www.chartjs.org/docs/latest/samples/information.html suffers from this bug: the charts only shrink.

@diegotraid Also, your working example is not a valid link: https://46yzc4-5173.csb.app/

[diegotraid]

Every example from your websites: https://react-chartjs-2.js.org/examples and https://www.chartjs.org/docs/latest/samples/information.html suffers from this bug: the charts only shrink.

@diegotraid Also, your working example is not a valid link: https://46yzc4-5173.csb.app/

Sorry about the wrong link, check again.

[imbwaldo]

Hey, @vrde and @diegotraid, I found that adding an explicit resize() fixed the problem. Here's my function, bwChart being the name of my chart instance:

function chartWide() {
  bwChart.options.plugins.title.display = false;
  bwChart.options.plugins.legend.position = 'right';
  bwChart.options.plugins.legend.title.display = true;
  bwChart.options.plugins.legend.title.position = 'start';
  bwChart.update();
  bwChart.resize(); // without this, it'll only shrink, not grow
}

Hope that works for you, too.

[kostia1st]

@imbwaldo Unfortunately it does not, or at least, it does not in an acceptable and stable way. For me, during resizing to grow, it flickers in size all the time, and what size it ends up with depends on the current moon-phase.

The only way to fix it reliably that I found, is to set maintainAspectRatio: false in options, and implement my own resize-observer logic, and enforce the width and height values via the ref.current?.resize(w, h) call. The downside is that this requires me to look after the aspect ratio on my own (if I need it maintained).

[imbwaldo]

Thanks, @kostia1st. I eventually found this worked for me (see last two lines):

function chartWide() {
   yeahChart.options.aspectRatio = 2;
   yeahChart.options.plugins.title.display = false;
   yeahChart.options.plugins.legend.position = 'right';
   yeahChart.options.plugins.legend.title.display = true;
   yeahChart.options.plugins.legend.title.position = 'start';
   yeahChart.options.plugins.legend.title.padding.bottom = 16;
   yeahChart.options.plugins.legend.labels.boxWidth = 40;
   yeahChart.options.plugins.legend.labels.padding = 13;
   yeahChart.options.plugins.legend.labels.font.size = 13;
   yeahChart.update(); // maybe not necessary?
   yeahChart.resize(); // without this, it'll only shrink, not grow
 }

Don't know if that'll work for you, too. Hope so. Thanks again for your reply!