Posted in Uncategorized

ChartJS and Flexbox not so responsive

   February 23, 2021  5 Comments on ChartJS and Flexbox not so responsive

I have made a grid system using flex and now I insert some charts. And I try to use simple(display: flex).

Expected Behavior

When I increase the width of the screen, myChart must increase too and conversely, when i minimize .

Current Behavior

When I increase worked correct, but when minimize, myChart didn’t minimized too

Possible Solution

I think. problem, that I use FlexBox, but answer i can’t find.

Author: Fantashit

5 thoughts on “ChartJS and Flexbox not so responsive”

  1. Flexbox is so poorly supported in IE that I would actually recommend you to avoid it.

    Besides that I have had major issues with responsive and flexbox (in Firefox and Chrome).

  3. documenting this for future reference:

    i am seeing this on chrome 59 (electron 1.7.9). when the chart is inside of a flex container, the initial size is fine. and the responsive bits respond well to increases in the size of the container. but the chart does not respond to decreases in container size. i note this also by attaching an onResize handler to the chart. i get callbacks for increases, but not for decreases.

    https://jsfiddle.net/pgg9pz7c/1/

    try growing the width of the window. observe that both charts respond well, growing in size; now try shrinking the width of the window. observe that only the lower chart responds well. the upper one, contained in a flexbox, does not respond to the shrinkage.

    i also observe this behavior in firefox 57, in addition to the chrome embedded in electron 1.7.9

    for future reference, the above suggestion of min-width: 0 seems to resolve this issue. not on the immediate container of the chart, but on the flex parent.

Comments are closed.