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.

var visitasDel2018 = [ 100525, 80555, 152263, 124369, 200965, 125896, 305362, 405935, 102548, 598625, 102549, 365241 ], 
    etiquetas = [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ];

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:

var opciones = {
    // Los colores. En este caso sólo es uno pero puede haber más si tenemos más datos
    // por ejemplo si mostrásemos del 2018 y 2019
    colors: ['#8BC34A'],
    chart: {
        height: 380, //La altura. La anchura es tomada como el 100 % del padre
        type: 'area',// Es una gráfica de tipo area
    },
    stroke: {
        //La curvatura al unir los puntos
        //smooth o straight. smooth es más suave y straight es rígido
        curve: 'smooth',
    },
    dataLabels: {
        enabled: false, // No mostrar las etiquetas sin hacer hover
    },
    series: [{
        name: "Número de visitas", // Lo que describe a nuestros datos
        data: visitasDel2018
    },
    ],
    title: {
        text: 'Visitas del 2018', //El título como cadena
        align: 'left', //Alineación. Puede ser left, right o center
    },
    subtitle: {
        text: 'parzibyte.me/blog',//Subtítulo. Si no queremos incluirlo, eliminamos todo este objeto
        align: 'left', //La alineación aplica igual que para el título
    },
    xaxis: {
        // Lo que irá en el eje X.
        // Su longitud debe ser igual a la de los datos
        // Es decir, si nuestros datos son 12, las etiquetas deben ser 12
        categories: etiquetas,
    },
    yaxis: {
        //Si queremos que el eje y esté a la izquierda lo dejamos en false. Si queremos
        // que esté a la derecha, pues en true
        opposite: true,
    }
};

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

Finalmente obtenemos el elemento así, usando querySelector:

var elemento = document.querySelector("#contenedorGrafica");//El id del div, con todo y #;

Y ahora sí construimos nuestra gráfica:

var grafica = new ApexCharts(elemento, opciones);
grafica.render();// La gráfica no será creada hasta llamar a este método

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

var visitasDel2018 = [
        100525,
        80555,
        152263,
        124369,
        200965,
        125896,
        305362,
        405935,
        102548,
        598625,
        102549,
        365241
    ],
    etiquetas = [
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ];
var opciones = {
    // Los colores. En este caso sólo es uno pero puede haber más si tenemos más datos
    // por ejemplo si mostrásemos del 2018 y 2019
    colors: ['#8BC34A'],
    chart: {
        height: 380, //La altura. La anchura es tomada como el 100 % del padre
        type: 'area',// Es una gráfica de tipo area
    },
    stroke: {
        //La curvatura al unir los puntos
        //smooth o straight. smooth es más suave y straight es rígido
        curve: 'smooth',
    },
    dataLabels: {
        enabled: false, // No mostrar las etiquetas sin hacer hover
    },
    series: [{
        name: "Número de visitas", // Lo que describe a nuestros datos
        data: visitasDel2018
    },
    ],
    title: {
        text: 'Visitas del 2018', //El título como cadena
        align: 'left', //Alineación. Puede ser left, right o center
    },
    subtitle: {
        text: 'parzibyte.me/blog',//Subtítulo. Si no queremos incluirlo, eliminamos todo este objeto
        align: 'left', //La alineación aplica igual que para el título
    },
    xaxis: {
        // Lo que irá en el eje X.
        // Su longitud debe ser igual a la de los datos
        // Es decir, si nuestros datos son 12, las etiquetas deben ser 12
        categories: etiquetas,
    },
    yaxis: {
        //Si queremos que el eje y esté a la izquierda lo dejamos en false. Si queremos
        // que esté a la derecha, pues en true
        opposite: true,
    }
};
var elemento = document.querySelector("#contenedorGrafica");//El id del div, con todo y #
var grafica = new ApexCharts(elemento, opciones);
grafica.render();// La gráfica no será creada hasta llamar a este método

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 😉