'Responsive container needs be filled height and width
Please help how I can fill container in a height and width? It is necessary that the container is always filled with a chart, regardless of the height and width.
<div className={styles.widget}>
<div className={styles.content}>
<ResponsiveContainer className={styles.container} width="99%" minHeight="100%" aspect={3}>
<LineChart
width="100%"
height="100%"
data={data}
tickFormatter={(tick) => `${tick}%`}
margin={{
right: 20,
top: 0,
left: 0,
bottom: 0
}}
>
<CartesianGrid
horizontal="true"
vertical="true"
className={styles.grid}
strokeDasharray="5, 5"
stroke="#7E8699"
/>
....
</LineChart>
</ResponsiveContainer>
</div>
</div>
CSS code
.widget {
background: rgba(255, 255, 255, 0.8);
position: relative;
border-radius: 6px;
overflow: hidden;
height: 100%;
}
.content {
overflow: auto;
height: 100%;
padding-top: 45px;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
