[ ] 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 am rendering a <Bar /> (with horizontal-bar orientation) chart with this lib, and it seems like there's a bug with the underlying "responsive" mode of a chart. I am reporting here because it doesn't seem to happen when not using this library, because there's no "re-rendering" that happens when you're doing the chart manually/imperatively without this lib.
If I manually set the barThickness on the chart (like to 25), and I render a dataset of 24 elements (24 hours in the day), the bars all overlap each other and don't space out. So then I manually set a fixed height for the chart. I picked a height of 950 for the height, which was 24 bars at 25px each, plus 23 spaces of about 15px each. The chart renders fine the first time. Great.
But then I make some update to a state-hook that causes the parent element to re-render, and thus the chart to re-render (even if it's not changing anything about the chart itself), and all of a sudden, the responsive computation of the logical width/height is messed up, because of the same fixed 950 height that I pass in. The style width/height of the chart are the same, but the logical width/height shrinks, so the whole chart is rendered much smaller.
Again, this ONLY happens when a re-render of the chart happens where I've had to manually specify a height to get the 24 bars to spread out. Something about the re-render causes all the previous responsive computation of the canvas logical dimensions to compound instead of reset from zero.
BTW, if I turn off the responsive mode, this re-computation on re-render never happens, so no issues there. But then the chart is not properly resizing itself to the current container as desired.
Reproduction
n/a
chart.js version
4.4.0
react-chartjs-2 version
5.2.0
Possible solution
I had to completely do away with re-rendering of the chart components, and instead just show/hide them with CSS, to prevent all this height calculation.
Would you like to work on a fix?
Current and expected behavior
I am rendering a
<Bar />(with horizontal-bar orientation) chart with this lib, and it seems like there's a bug with the underlying "responsive" mode of a chart. I am reporting here because it doesn't seem to happen when not using this library, because there's no "re-rendering" that happens when you're doing the chart manually/imperatively without this lib.If I manually set the
barThicknesson the chart (like to25), and I render a dataset of 24 elements (24 hours in the day), the bars all overlap each other and don't space out. So then I manually set a fixedheightfor the chart. I picked a height of950for the height, which was 24 bars at 25px each, plus 23 spaces of about 15px each. The chart renders fine the first time. Great.But then I make some update to a state-hook that causes the parent element to re-render, and thus the chart to re-render (even if it's not changing anything about the chart itself), and all of a sudden, the responsive computation of the logical width/height is messed up, because of the same fixed
950height that I pass in. The style width/height of the chart are the same, but the logical width/height shrinks, so the whole chart is rendered much smaller.Again, this ONLY happens when a re-render of the chart happens where I've had to manually specify a
heightto get the 24 bars to spread out. Something about the re-render causes all the previous responsive computation of the canvas logical dimensions to compound instead of reset from zero.BTW, if I turn off the
responsivemode, this re-computation on re-render never happens, so no issues there. But then the chart is not properly resizing itself to the current container as desired.Reproduction
n/a
chart.js version
4.4.0
react-chartjs-2 version
5.2.0
Possible solution
I had to completely do away with re-rendering of the chart components, and instead just show/hide them with CSS, to prevent all this height calculation.