Introducción

ApexCharts es una librería nueva que provee gráficas en formato SVG (en lugar de canvas como se venía haciendo). No necesita ninguna librería (como jQuery, AngularJS, VueJS, etcétera). Hoy veremos cómo crear una Area Chart en ApexCharts.

Nota: puede que también quieras ver cómo crear gráficas en la web usando chart.js.

Cómo crear una Area chart en ApexCharts

Por si no lo sabes, una Area chart es una gráfica como esta:

Descargar librería

Podemos descargar la librería para crear gráficas en formato SVG. La última versión se encuentra en https://cdn.jsdelivr.net/npm/apexcharts o en el repositorio oficial. La incluimos con la etiqueta <script> en nuestro HTML y listo.

También podemos instalarla con NPM si es que ese es nuestro entorno. Para ello usamos lo siguiente:

npm install apexcharts --save

Y lo siguiente para usarla:

import ApexCharts from 'apexcharts'

Crear gráfica

Vamos a crear una simple gráfica en donde mostramos las visitas que tiene un blog durante un año. Obviamente serán datos falsos pero servirán para ejemplificar.

HTML

Comenzamos creando el elemento que mantendrá a nuestros datos. Será un div:

<div style="max-width: 100%; margin: 1em;" id="contenedorGrafica"></div>


Como vemos tiene los estilos como atributos. Podemos sacarlos y ponerlos en una hoja de estilos, da igual. Lo que hay que notar es que debemos ponerle un pequeño margen así como indicar que no puede medir más que el padre.

Ah, y no olvidemos su id. Ese será importante más abajo.

JavaScript

Hora de darle funcionamiento a nuestro código HTML. Vamos a ver el código JavaScript de ejemplo para crear una Area chart en ApexCharts.

Para crear una gráfica necesitamos llamar al constructor con dos argumentos: un elemento del DOM (que obtenemos con querySelector pero igualmente podríamos usar getElementById) y un objeto con las opciones.

Los datos y etiquetas de la gráfica van dentro de las opciones.

Primero necesitamos los datos y las etiquetas. Como serán visitas,los datos serán un arreglo de enteros. Y las etiquetas un arreglo de strings con los meses.

See the gist on github.

Es importante notar que deben tener la misma longitud. Hay 12 meses, y por lo tanto debe haber sólo 12 datos.

Luego creamos las opciones:

See the gist on github.

Ahí ponemos la altura, colores, etcétera. El código está comentado.

Finalmente obtenemos el elemento así, usando querySelector:

See the gist on github.

Y ahora sí construimos nuestra gráfica:

See the gist on github.

El código completo (del script) queda así:

See the gist on github.

Y he aquí el resultado:

See the Pen Gráfica Area con ApexCharts by Luis Cabrera Benito (@parzibyte) on CodePen.

¿No es maravilloso? te invito a que te suscribas ingresando tu correo en la barra de la derecha. Si quieres ver más tutoriales de ApexCharts ya sabes en dónde hacer click 😉