Open vrde opened 1 year ago
:wave: any update on this?
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
.
@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.
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/
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.
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.
@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).
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!
Would you like to work on a fix?
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