Estoy usando Recharts con Next.js y Tailwindcss, copié un fragmento de código de gráfico de barras en Recharts para crear mi propio gráfico de barras también. Tengo que cambiar la altura al aspecto para que funcione. Pero el ancho 100% no funciona en absoluto. El gráfico de barras permanece como un bloque y ocupa poco ancho. Por favor, ¿qué se supone que debo hacer para que el gráfico de barras cubra el 100% del ancho de div?
Aquí está mi fragmento de código.
const MyChart = () => { return ( <div className="flex shadow-md p-4 w-full pb-0 relative text-xs m-4"> <ResponsiveContainer width="100%" aspect={2}> <AreaChart width={500} height={400} data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0, }} > <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" /> <Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" /> <Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" /> </AreaChart> </ResponsiveContainer> </div> ); };La visualización predeterminada del elemento div es
bloquear
Y los elementos de bloque ocupan el 100% del ancho del elemento principal. En este caso, cambia la visualización de div de bloque a flex, por lo que el elemento div solo ocupa el ancho de su contenido, por lo que <ResponsiveContainer ocupa el 100% del ancho de este div
Estoy luchando con lo mismo y, aunque no encontré ninguna solución clara y agradable, obtuve un truco que funciona.
En resumen, cuando cambia el ancho de la pantalla, cambio la clave de ResponsiveContainer para que se reproduzca con el 100% del ancho correcto de su padre. El valor de la clave no es importante, lo importante es que debe cambiar después de cambiar el tamaño, lo que activa el montaje del componente, porque nueva clave === nuevo componente para React
Estoy eliminando rebotes para reducir la cantidad de renderizaciones innecesarias, solo una vez después de terminar de cambiar el tamaño es suficiente.
const OverviewChart: FC<IOverviewChart> = ({ data }) => { const [chartWidth, setChartWidth] = useState(0); const { width } = useWindowDimensions(); const debouncedSetChartWidth = useDebounce(setChartWidth, 100); useEffect(() => { debouncedSetChartWidth(width); }, [debouncedSetChartWidth, width]); return ( <ResponsiveContainer key={chartWidth} className={styles.element} width={"100%"} height={300}> ... </ResponsiveContainer> ); };aquí está el contenido del gancho personalizado useWindowDimensions
import { useEffect, useState } from "react"; export type TWindowDimensions = { width: number; height: number; }; const getWindowDimensions = (): TWindowDimensions => ({ width: window.innerWidth, height: window.innerHeight, }); const useWindowDimensions = (): TWindowDimensions => { const [windowDimensions, setWindowDimensions] = useState<TWindowDimensions>({ width: 0, height: 0, }); useEffect(() => { const handleResize = () => { setWindowDimensions(getWindowDimensions()); }; handleResize(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); return windowDimensions; }; export default useWindowDimensions;