0
470
ViewsChart.js: How to set minimum height of chart but still maintain aspect ratio?
How can I set a fixed aspect ratio to the chart but also set a minimum height so that it behaves like below:
I have tried using react-chartjs-2:
<div
style={{
minHeight: 300,
paddingTop: "33.33333%",
}}
>
<Bar
style={{ width: "100%", height: "100%" }}
//data={...}
options={{
maintainAspectRatio: false,
}}
/>
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
Solved it by adding an intermediate div between container and chart:
<div
style={{
minHeight: 300,
paddingTop: "33.33333%",
position: "relative",
}}
>
<div
style={{
position: "absolute",
inset: 0,
}}
>
<Bar
style={{ width: "100%", height: "100%" }}
//data={...}
options={{
maintainAspectRatio: false,
}}
/>
</div>
</div>
·
Juan Pablo Isaza
Report
Answer question