React-chartjs-2 update height dynamically

Question

I am using react-chartjs-2 library. I have used HorizantalBar which will receive data through props dynamically from parent component. I have wrapped HorizantalBar inside a div to control its height according to data. The height is getting updated in div but not in chart unless the browser is refreshed/resized. I inspected and checked the element. The height of canvas element of chart is not getting updated on re-render. Can someone please help?

<div className={classes.chart}  style={{ height: calculateHeight()}}>
    <HorizontalBar data={dataHorizontal}
    ref={(reference) => { chartReference = reference }}
    options={chartOptions}>
    </HorizontalBar>
</div>

function calculateHeight() {
    let length = arrayData ? arrayData.length : 0
    switch (true) {
        case length >= 0 && length <= 7:
            // console.log("1");
            return 50 + length * 50;
        case length > 8:
            // console.log("2");
            return 450 + ((length - 8) * 50);
        default:
            // console.log("3");
            return 450
    }
}

Answer 1

I stumbled on a likewise issue. My best solution was to add below code.

responsive: true

and

maintainAspectRatio: true