Necesito gráficos altos para adaptar su ancho al ancho de los padres. Entonces, si cambiamos el ancho del padre sin cambiar los datos, el gráfico debería cambiar de tamaño. Pero como los datos son los mismos, no sucede.
Parece que funciona si cambiamos el tamaño de la pantalla del navegador, pero eso no es lo que necesitamos.
import React, { useState } from 'react'; import { render } from 'react-dom'; import HighchartsReact from 'highcharts-react-official'; import Highcharts from 'highcharts'; function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1) + min); } const LineChart = () => { const [width, setWidth] = useState(null); const [chartOptions, setChartOptions] = useState({ xAxis: { categories: ['A', 'B', 'C'], }, series: [{ data: [1, 2, 3] }], }); const handleWidth = () => { const w = getRandomIntInclusive(100, 500); setWidth(w); }; return ( <div style={{ width }}> <HighchartsReact highcharts={Highcharts} options={chartOptions} /> <button onClick={handleWidth}>change container width</button> </div> ); }; render(<LineChart />, document.getElementById('root'));Aquí hay un enlace a un ejemplo de "no funciona": https://stackblitz.com/edit/react-xhcmx4?file=index.js
Desde la API de Highcharts:
reflujo([e])
Refluye el gráfico a su contenedor. De forma predeterminada, el gráfico se ajusta automáticamente a su contenedor después de un evento window.resize, según la opción chart.reflow. Sin embargo, no hay eventos confiables para el cambio de tamaño de div, por lo que si se cambia el tamaño del contenedor sin un evento de cambio de tamaño de ventana, se debe llamar explícitamente.
Como solución, llame al método de reflow después del cambio de width .
useEffect(() => { const chart = chartComponent.current?.chart; if (chart) chart.reflow(false); }, [width]);Demostración en vivo: https://stackblitz.com/edit/react-zydh8m?file=index.js
Referencia de API: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow