[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]

👋 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.