Estoy usando la biblioteca de gráficos React Apex en mi proyecto. Me di cuenta de que los gráficos de la biblioteca tienen un pequeño retraso antes de renderizarse en el montaje inicial.
Este problema daña la UX porque el componente que representa ApexCharts no se mostrará hasta después de la demora.
import React from "react"; import Chart from "react-apexcharts"; function MixedChart() { const data = { options: { chart: { id: "basic-bar" }, xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] } }, series: [ { name: "series-1", data: [30, 40, 45, 50, 49, 60, 70, 91] } ] }; return ( <div className="mixed-chart"> <Chart options={data.options} series={data.series} type="bar" width="500" /> </div> ); } export default MixedChart;¿Hay alguna manera de arreglar esto?
Descubrí la solución.
Para evitar que la aplicación no represente nada en ese retraso y tener una mejor experiencia de usuario, puede usar un tiempo de espera establecido dentro del gancho useEffect para actualizar un estado después del montaje inicial del gráfico.
const [dispaly, setDisplay] = useState(false); useEffect(() => { setTimeout(() => setDisplay(true), 1); }, []) if(!display) { return <></>; } return ( <div className="mixed-chart"> <Chart options={data.options} series={data.series} type="bar" width="500" /> </div>);