AreaChart - Chart not resizing despite multiple attempted fixes

[SpicyTunaRoller]

Query: Hello, I'm facing an issue where my ApexCharts Area chart isn't resizing correctly. I've tried several fixes, but none have worked so far.

Fixes Tried: Window resize event listener for redrawing the chart Passing height as a number, px, and % (100, 100px, 100%) Setting a max size on the parent div container Opening the source code and picking apart Line.js (parent class for Area) for anything that seemed to force an aspect ratio, no dice. The chart and data displays just fine, but it's not responsive as it should be. Really breaks the flow of the page without it.

Here's the stripped down code and a gif to demonstrate the issue:

const SellerDashboard = () => { // Mock Data const lineData = [ // months, numbers ];

const chartOptions = { chart: { type: 'area',
width: '100%', height: '100%', // various heights has been passed, from 50px to 500, no change on either side // ...Other Options }, xaxis: { categories: lineData.map(data => data.name), }, // ...Other Options };

const series = [ { name: 'Impressions', data: lineData.map(data => data.impressions) }, // ...Other Series ];

return ( <div className="flex flex-col h-screen"> {/* Big Data Graph /} <div className="bg-gray-200 p-4 max-h-[300px] max-w-[1000px] rounded-lg"> <div style={{width: '100%', height: '300px'}}> {/ Wrapper Div. Forced max-h-[value] has not worked */} {lineData ? ( <ReactApexChart options={chartOptions} series={series} type="area" /> ) : ( 'Still collecting data' )} ); };

export default SellerDashboard;

I'd be happy if it didnt even resize dynamically, if it would respond to a forced height/width or just fit the size of the div it's in, that would be good enough. Any help would be greatly appreciated!!

[SpicyTunaRoller]

btw, im not sur why the code snippet i sent doesnt show all the code - when i go to edit my comment, it all shows up though 🤷

here it is without any special formatting: {/* Big Data Graph - double wide /} <div className="col-span-2 bg-gray-200 p-4 max-h-[300px] max-w-[1000px] rounded-lg"> <div style={{width: '100%', height: '300px'}}> {/ Wrapper Div */} {lineData ? ( <ReactApexChart options={chartOptions} series={series} type="area" style={{ height: "300px", width: '100%'}} /> // Extends way beyond the size of the parent, about double ...

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.