Charts is not fit to parent until screen is resized
See original GitHub issueHi, I am using react-apexcharts and set height as fixed 300px. I thought the chart’s width should be set typed or fit to parent tag. But when I using react-apexcharts, it overs parent div.
Here is my chart code:
export default function ProjectStatusGraph() {
const options = {
chart: {
toolbar: {
show: false,
},
id: 'project-status-graph',
},
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
},
xaxis: {
type: 'datetime',
labels: {
show: true,
showDuplicates: true,
datetimeUTC: true,
},
},
};
const activatedProjectMock = projectUsageMock
.map(r => [Number(r.date), r.projects.filter(p => p.activated).length])
.sort((a, b) => a[0] - b[0]);
const workingProjectMock = projectUsageMock
.map(r => [Number(r.date), r.projects.filter(p => p.activated && p.usage > 10).length])
.sort((a, b) => a[0] - b[0]);
return (
<Card title="Project Activated / Working" size="small">
<ReactApexChart
options={options}
series={[
{
name: 'activated',
data: activatedProjectMock,
},
{
name: 'working',
data: workingProjectMock,
},
]}
height={300}
type="area"
/>
</Card>
);
}
And here is behavior:
The chart is overflowed until I adjust screen width or some re-rendering. Is it a bug or correct behavior of apexcharts which can be handled by developer?
Issue Analytics
- State:
- Created 3 years ago
- Comments:20 (4 by maintainers)
Top Results From Across the Web
Responsive Highcharts not sizing correctly until window resize
However, when the window is resized or I try to investigate using Inspect element, the charts immediately snap into the correct dimensions.
Read more >Chart not getting resize on parent <div> width change
Hi Team, Today we encountered issue with chart reflow when chart container changed in width. Please find the below attached image.
Read more >Move or resize a chart - Microsoft Support
Prevent a chart from moving and sizing with cells on the worksheet · Click anywhere in the chart. · Click the Format tab,...
Read more >Problem with figure not updating dimensions when its parent ...
In my application I have a tab system containing a div that fits the rest of the screen that will most often display...
Read more >Charts aren't full-size until page is refreshed - CanvasJS.com
Whenever the window size changes the chart checks to see if the parent container's size is still the same. If not, it re-adjusts...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I have the same problem. In the meantime I used the
mounted
event as a work-around the issue.This is a nice solution but really messes up the animation when loading in. Is there another fix found?