ApexCharts.js: No funciona exportar a png

Deja un comentario / Hacks / Por Marcos

Escenario

Ésta es rápida y muy específica, pero nada evidente. Me ha llevado un poco de tiempo dar con el problema. Si no utilizas apexcharts posiblemente no te vaya a interesar esta entrada. Es una biblioteca de JavaScript para dibujar gráficos a partir de datos.

Problema

Apexcharts ofrece la posibilidad de exportar a PNG desde un menú situado en la parte derecha superior de la gráfica. No es la primera vez que lo activo por configuración y hasta ahora me ha funcionado. Pero por más que hago click en enlace ahora no reacciona. Ni siquiera muestra error alguno por consola.

solución

Esta issue de GitHub me puso sobre la pista. Con JavaScript disponemos de una función muy útil para convertir grandes números a un formato más legible para humanos. Por ejemplo, 1000000 se convierte en 1M. Se usa de la manera siguiente:

const numberFormatter = Intl.NumberFormat('es', { notation: 'compact' });
numberFormatter.format(val);

1 2	const numberFormatter = Intl.NumberFormat('es', { notation: 'compact' }); numberFormatter.format(val);

Donde val es la cifra que queremos formatear. Pues bien, resulta que la función format representa el valor convertido con un tipo de espacio que hace que rompa la exportación a PNG de la gráfica de Apexcharts. ¿La manera de solucionarlo?

numberFormatter.format(val).replace('\xa0', ' ');

1	numberFormatter.format(val).replace('\xa0', ' ');

Nota: uso la versión 3.26.3 de ApexCharts.

Deja un comentario Cancelar respuesta