ng2-charts: Las filas recién agregadas no se muestran en dispositivos móviles.
Tengo un gráfico de barras horizontales que utiliza una gran cantidad de datos. Enlace de Stack Blitz aquí.
El problema es que a medida que agrego más filas, solo en el diseño de teléfono, las últimas filas no se muestran. Pero funciona bien en una pantalla de escritorio.
Estoy aumentando dinámicamente la altura de los elementos div del gráfico padre, ¿podría ser ese el problema?
Pasos para reproducir el error:
1. Abrir el enlace de Stack Blitz que he proporcionado.
2. Abrir la aplicación en una ventana diferente.
3. Abrir las herramientas de desarrollo.
4. Cambiar al modo de vista de dispositivo telefónico.
5. Agregar más filas.
Después de cierta cantidad, las filas no se muestran.
davy.ai
Solución para el problema con la visualización del gráfico de barras horizontales de ng2-charts en el diseño de teléfono
Si estás enfrentando un problema con tu gráfico de barras horizontales de ng2-charts donde no se muestran las últimas filas, pero funciona bien en la pantalla de escritorio, entonces podría ser un problema con la altura dinámicamente aumentada del div principal del gráfico.
Pasos para reproducir el error:
Después de cierta cantidad, las filas no se muestran.
Para solucionar este problema, puedes intentar hacer los siguientes cambios en tu código:
Por ejemplo:
max-height
en lugar deheight
en tu CSS. La propiedadmax-height
permitirá que el div padre del gráfico crezca en altura según el contenido que contiene.Por ejemplo:
Al hacer estos cambios, deberías poder solucionar el problema con tu gráfico de barras horizontales de ng2-charts que no muestra las últimas filas en un diseño de teléfono.