React-chartjs-2: How can I set height of chart to 100%?

[alexchoiweb]

Currently in the documentation there is way to set the height of the chart component to a specified pixel height via

<Bar
    data={data}
    height={50}
    options={{
        maintainAspectRatio: false
    }}
/>

How can I make it so that instead of using pixels as a value, I can set the chart height to 100% (Therefore the height of its parent container)?

[tkeesling]

It will fill its parent container if the height and width are not set, null, or an empty string. In the package, the default width and height are 300 and 150 respectively so the aspect ratio _always_ maintains a 2:1 even if you set aspectRatio to something else (which is a bug IMO). So try this:

<Bar
    data={data}
    height={null}
        width={null}
    options={{
        aspectRatio: 1,  // this would be a 1:1 aspect ratio
    }}
/>

This would have the chart fill the space to either the width or the height of the container, whichever comes first.

The library doesn't allow for mapping relative values (100%, 40vh, etc) to the canvas. So it _can_ grow to fit the container, but it depends on the aspect ratio and the width/height of the container.

[kybishop]

The above didn't work for me, but the following did:

<Line data={data} options={{ maintainAspectRatio: false }} />

[SenseiCain]

You can override the default styling in CSS
canvas { height: 100 !important }