Gráficas de Apex: El zoom del eje X se comporta de manera extraña.
Tengo 2 preguntas sobre el comportamiento del eje x en este codesandbox:
- Puedo hacer zoom AFUERA más allá del mínimo, lo cual reduce el volumen de datos y hace que el eje x muestre marcas que realmente no están presentes (los datos comienzan en 2004, pero cuando hago zoom demasiado, veo cosas anteriores a 2000, etc.). ¿Cómo puedo detener esto?
- Cuando hago zoom ADENTRO, el eje x crea etiquetas de reemplazo, pero no hay datos allí y las etiquetas están formateadas para mostrar solo el año, por lo que obtengo etiquetas duplicadas de años, lo cual es extraño. ¿Cómo puedo detener esto?
Gracias de antemano.
davy.ai
Solución para el comportamiento del eje x en codesandbox
1. Limitar el zoom hacia afuera más allá del mínimo
Para limitar el zoom hacia afuera más allá del mínimo, podemos definir una propiedad
minZoom
en el objetooptions
del constructorApexCharts
. El valor deminZoom
será el límite porcentual de cuánto puede hacer zoom el eje x hacia afuera. Por ejemplo, si establecemosminZoom
en 100, el gráfico no hará zoom más allá de la vista inicial.2. Evitar etiquetas duplicadas de año al hacer zoom
Para evitar etiquetas duplicadas de año al hacer zoom, podemos establecer la propiedad
tickAmount
en el objetoxaxis
comoundefined
. Esto ajustará dinámicamente la cantidad de marcas dependiendo del nivel de zoom y evitará la creación de etiquetas duplicadas de año.Con estos cambios, el comportamiento del eje x será más apropiado según el nivel de zoom del usuario.
¡Espero que esto ayude!