Introducción a ApexCharts: Creando gráficas de datos interactivas para tus proyectos en JavaScript

En este artículo vamos a hablar un poco sobre ApexCharts. Seguro que te has fijado que muchas webs presentan atractivos gráficos de datos que son además interactivos sin apenas tiempo de espera entre presentaciones. Pues bien, ApexCharts tiene gran culpa de esta magia.

ApexCharts no es nada más que una completa librería para JavaScript que puede ser empleada en numerosos proyectos ofreciendo gráficas de datos. Y quien dice JavaScript también podemos hablar de integración nativa con aplicaciones desarrolladas en Angular, React, jQuery y Vue pero también podemos usarlo con Java, PHP o ASP.NET

Primeros pasos con ApexCharts

Para comenzar a trabajar con ApexCharts no hay nada mejor que visitar la web oficial del proyecto en donde encontraremos todo tipo de documentación, trucos y demos que nos permitirán sacar lo máximo de esta librería sin despeinarnos. Debo reconocer que su curva de aprendizaje es bastante fácil y no nos costará tomar el control. La instalación podemos hacerla de varios modos dependiendo del tipo de proyecto que estemos desarrollando.

Por ejemplo podemos instalar usando NPM:

npm install apexcharts --save

Y luego podemos importando a nuestro proyecto mediante:

import ApexCharts from 'apexcharts'

Otro modo es mediante la inserción directa en nuestro código HTML usando la etiqueta script:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Y ya está, así de simple. Ahora vamos a poner manos a la obra viendo algunos ejemplos:

Gráficos de líneas con Apexcharts

El gráfico más sencillo de interpretar. Este tipo de presentación se utiliza para mostrar información que ha ido cambiando con el tiempo y consiste en una línea que va enlazando puntos. Por ejemplo, es muy usado para mostrar balances de ventas, datos demográficos, etc.

Este gráfico cuenta con los siguientes elementos:

• Título: Esto se encuentra en la parte superior del gráfico e informa al usuario sobre los datos que representa el gráfico.
• Barra de herramientas: La barra de herramientas está en la esquina derecha de la imagen de arriba. Controla el nivel de zoom del gráfico. También puede exportar el carácter a través de la barra de herramientas.
• Etiquetas de eje: En los ejes izquierdo y derecho, tenemos las etiquetas para cada eje.
• Etiquetas de datos: Las etiquetas de datos son visibles en cada punto de la gráfica de la línea. Facilitan la visualización de los datos en el gráfico.

        var options = {
          series: [{
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }],
          chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        title: {
          text: 'Product Trends by Month',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

Gráficos de área con Apexcharts

Al igual que los gráficos de líneas, los gráficos de área representan cómo un dato cambia con el tiempo. Sin embargo, a diferencia de los gráficos de líneas, también pueden representar visualmente el volumen. Suelen ser muy útiles para entender cómo los grupos de datos se van cruzando.

        var options = {
          series: [{
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100]
        }, {
          name: 'series2',
          data: [11, 32, 45, 32, 34, 52, 41]
        }],
          chart: {
          height: 350,
          type: 'area'
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        xaxis: {
          type: 'datetime',
          categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm'
          },
        },
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

Gráfica de barras con Apexcharts

Usamos gráficos de barras para presentar datos con barras rectangulares en alturas o longitudes proporcionales a los valores que representan. Es mejor usarlo para comparar diferentes categorías, como qué tipo de automóvil tiene la gente o cuántos millones invierte cada país en investigación y desarrollo.

var options = {
          series: [{
          data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
        }],
          chart: {
          type: 'bar',
          height: 350
        },
        plotOptions: {
          bar: {
            horizontal: true,
          }
        },
        dataLabels: {
          enabled: false
        },
        xaxis: {
          categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
            'United States', 'China', 'Germany'
          ],
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

Gráficos de columnas con Apexcharts

Siguiendo con la teoría, un gráfico de columnas es una visualización de datos en la que cada categoría está representada por un rectángulo, siendo la altura del rectángulo proporcional a los valores trazados. Al igual que los gráficos de barras, los gráficos de columnas se utilizan para comparar diferentes categorías de datos.

     var options = {
          series: [{
          name: 'Inflation',
          data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
        }],
          chart: {
          height: 350,
          type: 'bar',
        },
        plotOptions: {
          bar: {
            dataLabels: {
              position: 'top', // top, center, bottom
            },
          }
        },
        dataLabels: {
          enabled: true,
          formatter: function (val) {
            return val + "%";
          },
          offsetY: -20,
          style: {
            fontSize: '12px',
            colors: ["#304758"]
          }
        },
        
        xaxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          position: 'top',
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          },
          crosshairs: {
            fill: {
              type: 'gradient',
              gradient: {
                colorFrom: '#D8E3F0',
                colorTo: '#BED1E6',
                stops: [0, 100],
                opacityFrom: 0.4,
                opacityTo: 0.5,
              }
            }
          },
          tooltip: {
            enabled: true,
          }
        },
        yaxis: {
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: false,
            formatter: function (val) {
              return val + "%";
            }
          }
        
        },
        title: {
          text: 'Monthly Inflation in Argentina, 2002',
          floating: true,
          offsetY: 330,
          align: 'center',
          style: {
            color: '#444'
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

Gráficos de tarta y rosquilla con Apexcharts

Un gráfico circular con forma de tarta o rosquilla es un gráfico que muestra categorías individuales como porciones, o porcentajes, del total. Seguro que estás cansado de verlo por ejemplo en las últimas elecciones mostrando porcentajes de participación o los escaños ganados por uno u otro partido.

     var options = {
          series: [44, 55, 13, 43, 22],
          chart: {
          width: 380,
          type: 'pie',
        },
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

        var options = {
          series: [44, 55, 41, 17, 15],
          chart: {
          type: 'donut',
        },
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

Gráficos mixtos con Apexcharts

Los gráficos mixtos le permiten combinar dos o más tipos de gráficos en un solo gráfico. Puede utilizar gráficos mixtos cuando los números de sus datos varían mucho de una serie de datos a otra o cuando tiene tipos de datos mixtos (por ejemplo, precio y volumen). Los gráficos mixtos facilitan la visualización simultánea de diferentes tipos de datos en el mismo formato.

var options = {
          series: [{
          name: 'Website Blog',
          type: 'column',
          data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
        }, {
          name: 'Social Media',
          type: 'line',
          data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
        }],
          chart: {
          height: 350,
          type: 'line',
        },
        stroke: {
          width: [0, 4]
        },
        title: {
          text: 'Traffic Sources'
        },
        dataLabels: {
          enabled: true,
          enabledOnSeries: [1]
        },
        labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
        xaxis: {
          type: 'datetime'
        },
        yaxis: [{
          title: {
            text: 'Website Blog',
          },
        
        }, {
          opposite: true,
          title: {
            text: 'Social Media'
          }
        }]
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

Conclusión

Y hasta aquí nuestro artículo de hoy. Estoy seguro que tras conocer las posibilidades que ofrece ApexCharts hemos abierto tu curiosidad. Además hemos descubierto alguna de las muchas gráficas disponibles y cómo introducir datos en ellas.

El siguiente paso sería comenzar a trabajar en formas para personalizar la apariencia de nuestros gráficos. Como puedes ver todavía hay muchas cosas por descubrir, así que te invitamos a sumergirte en los documentos de ApexCharts. ¿A qué esperas?