I'm trying to make a responsive data visualization dashboard for a personal project. Everything works fine but I need to make my graphs change its aspect property (from the responsive container tag) in different break points.
In the code below, you'll see the tag with aspect={2.6}. What I need is to make this aspect change its value when my screen size hits certain break points. Is there a way to do this?
function BarChartCard() { return ( <Grid className='BarChartGridContainer' item xs={12} sm={12} md={6} lg={5} xl={5} > <motion.div className="BarChartComponent"> <div className="BarChartHeader"> <h5 className="BarChartHeaderTitle">Ventas Totales 2023</h5> </div> <ResponsiveContainer className="BarChartGraphContainer" aspect={2.6}> <BarChart data={BarChartData}C margin={{ top: 5, right: 30, left: 20, bottom: 5, }} > <CartesianGrid vertical={false}/> <XAxis dataKey="CalendarMonth" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="VentasUSD" fill='#77D5D7'/> </BarChart> </ResponsiveContainer> </motion.div> </Grid> ) }
If you answer this, thank you for trying to solve my problem!
I tried to change it in CSS (not a experienced programmer here!) and it only shows me aspect-ratio which doesn't work. I thing there should be a way to do this with some custom function.