Mejores Librerías de gráficas con JavaScript

• 18/12/2023

Las 4 mejores librerías JavaScript para crear impresionantes gráficos y visualizaciones de datos

¿Buscas mejorar la presentación de datos en tu sitio web o aplicación? Entonces estás en el lugar correcto.

En este post descubrirás las librerías JavaScript más populares para crear impactantes gráficos y visualizaciones.

Te explicaré en profundidad cómo funcionan, sus ventajas, desventajas y las diferencias entre ellas. Además aprenderás con ejemplos prácticos cómo implementarlas paso a paso.

¡Al finalizar este post, podrás decidir cuál es la mejor opción para tu proyecto y sorprender a tus usuarios con visuales espectaculares!

Chart.js, la popular librería de gráficos de código abierto

Chart.js es probablemente la librería de visualización de datos con JavaScript más popular y de código abierto que existe.

Ha sido creada desde cero pensado específicamente en las necesidades de los desarrolladores. Por esta razón su curva de aprendizaje es corta y cuenta con abundante documentación y tutoriales. Te recomiendo esta guía de uso con 6 ejemplos prácticos.

Chart.js te permite crear de forma sencilla todo tipo de gráficos aprovechando el potencial de HTML5 y el canvas. Además funciona en todos los navegadores modernos sin problema.

Instalación rápida de Chart.js con NPM o CDN

Para empezar a usar Chart.js solo necesitas vincular la librería desde una CDN como esta:

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

O puedes instalar Chart.js via NPM:

npm install chart.js

¡Muy sencillo! Esto permite que empieces a crear gráficos personalizados con unas líneas de código JavaScript.

Tipos de gráficos soportados por Chart.js

Estos son los principales tipos de gráficos que puedes crear con Chart.js:

• - Line Chart - Gráfico de Líneas

• - Bar Chart - Gráfico de Barras

• - Radar Chart - Gráfico de Radar

• - Pie Chart - Gráfico Circular

• - Polar Area Chart - Gráfico de Áreas Polares

• - Scatter Chart - Diagrama de Dispersión

• - Bubble Chart - Diagrama de Burbujas

Nota: Chart.js también soporta gráficos de tipo "Doughnut" así como variaciones y combinaciones de los tipos antes mencionados. Sus opciones son realmente amplias.

Explicación paso a paso ejemplo sencillo Chart.js

A continuación veremos cómo implementar Chart.js para graficar datos estadísticos de forma muy sencilla:

1. Inserta un canvas vacío. El elemento HTML canvas será el contenedor de nuestro gráfico

<canvas id="myChart" width="400" height="400"></canvas>

2. Inserta Chart.js. Referenciamos la librería desde la CDN:

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

3. Define los datos y etiquetas. Creamos los arrays de datos y sus etiquetas:

var dataValues = [60, 35, 40, 10];
var dataLabels = ["Manzanas", "Plátanos", "Naranjas", "Peras"];

4. Obtén elemento canvas y crea gráfico. Seleccionamos el canvas por su id y llamamos al método .Line():

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  // Tipo de gráfico
  type: 'pie',
  data: {
    // Propiedades
    labels: dataLabels,
    datasets: [{
      data: dataValues
    }]
  }
});

¡Listo! De forma super sencilla hemos graficado unos datos en un gráfico de torta o Pie Chart. ¡Pruébalo en Codepen!

Explicación paso a paso ejemplo avanzado Chart.js

Crea otro HTML básico importando el archivo de chart.js por cdn como hemos hecho anteriormente

1. Inserta un canvas vacío:

<canvas id="myChart" width="400" height="200"></canvas>

2. Inserta Chart.js. Referenciamos la librería desde la CDN:

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

3. Define los datos y etiquetas. Definimos Arrays anidados para 2 series temporales:

var dataValues = {
  2021: [50, 60],
  2022: [20, 45]
}

var dataLabels = ["Producto A", "Producto B"];

4. Obtén elemento canvas y crea gráfico. Seleccionamos el elemento canvas y configuramos el gráfico:

// Obtener canvas
var ctx = document.getElementById("myChart");

// Crear gráfico
var myChart = new Chart(ctx, {
  type: 'bar', // Tipo bar chart
  data: {
    labels: dataLabels,
    datasets: [
      {
        label: "Ventas 2021",
        data: dataValues[2021]
      },
      {
        label: "Ventas 2022",
        data: dataValues[2022]
      }
    ]
  }
});

Con este código estamos graficando 2 series temporales con la evolución de ventas de Producto A y Producto B. ¡Prueba en vivo el ejemplo avanzado de Chart.js!

¡Ya conoces lo básico para crear todo tipo de gráficos con Chart.js! Esta librería te permite además personalizar colores, tooltip, leyendas y casi cualquier propiedad. Ahora descubre otra muy potente herramienta para visualización de datos científicos:Plotly.js

Puedes ver la documentación de Chart.js en el siguiente enlace

---

Plotly.js, gráficos interactivos para ciencia de datos

Plotly.js es una impresionante librería open source para crear gráficos de alta calidad, interactivos y con aspecto profesional.

Se integra muy bien con otras librerías de Ciencia de Datos como Pandas, MATLAB y NumPy para graficar datos estadísticos.

Ha sido creada por expertos de Mozilla, Google, Yahoo y MathWorks por lo que cumple con los más altos estándares.

Yahoo utiliza Plotly para analizar el tráfico de miles de millones de visitantes en sus sitios web!

Entre sus grandes ventajas están las funciones avanzadas de analytic, 3d y mapeo geoespacial. Pero tranquilo, ¡empezar es muy fácil!

Instalación con NPM y CDN de Plotly.js

Para utilizar Plotly puedes vincular el CDN:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

O instalar con NPM:

npm install plotly.js

Tipos de gráficos con Plotly.js

Con plotly puedes crear estos avanzados tipos de visualizaciones:

• - Line Charts - Líneas

• - Area Charts - Áreas

• - Bar Charts - Barras

• - Box Plots - Diagramas de Caja y Bigotes

• - Heatmaps - Mapas de Calor

• - Histogramas

• - Embudos

• - Dispersión o Scatter

• - Burbujas - Bubble Charts

• - Mapas Geoespaciales

• - Gráficos 3D

¡Un abanico enorme de posibilidades! Te recomiendo seguir el curso interactivo de plotly para aprender más. A continuación explico un ejemplo práctico para que empieces.

Explicación paso a paso ejemplo sencillo Plotly.js

Crearemos un gráfico de líneas básico para visualizar la evolución de 2 productos:

1. Inserta contenedor DIV. Este elemento albergará nuestro gráfico:

<div id='myDiv'></div>

2. Inserta Plotly.js. Referenciamos el CDN de la librería::

<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

3. Define datos y etiquetas. Estructuramos los datos en JSON:

var data = [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
}, {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
}]

var layout = {
  title: 'Evolución de Ventas'
};

4. Pinta el gráfico en el DIV

Plotly.newPlot('myDiv', data, layout);

Listo! La sintáxis es bastante simple. Para más detalles consulta la documentación oficial de plotly.

Puedes ver cómo queda con este ejemplo en vivo a traves de Codepen

Explicación paso a paso ejemplo avanzado Plotly.js

Veamos ahora un caso más avanzado creando un mapa de calor interactivo.

Lo primero es definir una matriz de datos como esta:

var z = [[0.1, 0.2, 0.6],
        [1.3, 1.4, 1.6],
        [2.0, 2.1, 2.4]];

Luego establecemos la configuración avanzada de ejes, colorscale, colorbar, etc:

var layout = {
  title: 'Mapa de Calor',
  xaxis: {ticks: 'outside', title: 'X Label'},
  yaxis: {ticks: 'outside', title: 'Y Label'},
  width: 500,
  height: 500
};

var trace = {
  z: z,
  type: 'heatmap',
  colorscale: 'Jet'
};

Finalmente pintamos el mapa de calor con .newPlot():

Plotly.newPlot('myDiv', [trace], layout);

Puedes probar este mapa de calor que hemos creado en el siguiente Codepen

Como ves, Plotly.js permite visualizaciones avanzadas difíciles de lograr con otras librerías. Aporta interactividad, tooltips, zoom, slicers, análisis estadístico y otras funcionalidades potentes.

¡Una excelente alternativa! Y está documentada al detalle para que puedas explotar todo su poder.

Continuamos ahora con ApexCharts ideal para Dashboards y Paneles de Control.

---

ApexCharts para dashboards y paneles de control

ApexCharts es una de las librerías de gráficos más modernas basadas en SVG animado.

La recomiendo totalmente si buscas crear dashboards y controles visuales con Javascript reactive (React, Angular, Vue). Porque está diseñada para trabajar con frameworks JS modernos y SPA (Single Page Applications).

Entre sus virtudes están los veloces tiempos de render, la alta interactividad, la personalización extrema y docenas de ejemplos prácticos listos para usar.

Instalación rápida de ApexCharts con NPM o CDN

Para implementar ApexCharts tienes 2 opciones:

Vía NPM

npm install apexcharts

Usando CDN

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

Tipos de gráficos soportados por ApexCharts

ApexCharts provee estos avanzados tipos de visualizaciones:

• - Líneas - Line charts

• - Areas

• - Columnas - Bar charts

• - Histogramas

• - Mapas de calor - Heatmaps

• - Burbujas - Bubble charts

• - Dispersión - Scatter plots

• - Gráficos radiales

• - Gráficos de Dona - Pie charts

• - Diagramas de Gaantt

• - Candlestick o Velas japonesas

• - y muchos más

Podrás crear tanto gráficos estadísticos simples como complejos paneles de control analíticos. ¡Excelentes resultados!

A continuación explicaré con un ejemplo desde cero cómo usar ApexCharts.

Explicación paso a paso ejemplo sencillo ApexCharts

Para crear un gráfico de columnas o barras sencillo solo se requieren 3 pasos:

1. Inserta un elemento contenedor DIV:

<div id="chart"> </div>

2. Define Series & Configuración:

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'Ventas 2020',
    data: [30, 40, 45, 50, 49, 60, 70, 91]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
  }
}

      

3. Inicia nueva instancia de Chart:

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

chart.render();

Y listo! Con este sencillo código ya pintamos un gráfico de barras en la página. Prueba la demo interactiva a través del siguiente enlace

Explicación paso a paso ejemplo avanzado ApexCharts

A continuación explico la creación de un gráfico de áreas apiladas con múltiples series:

1. Inserta un elemento DIV

<div id="chart"></div>

2. Crea Series de datos. Definimos 3 arrays de datos para cada área apilada:

var series1 = [30, 40, {
  x: new Date("July 03").getTime(),
  y: 65
}]

var series2 = [20, 40, {
  x: new Date("July 04").getTime(),
  y: 50
}]

var series3 = [10, 30, {
  x: new Date("July 05").getTime(),
  y: 30
}]

3. Establece opciones avanzadas. Configuramos comportamiento y aspecto:

var options = {
  chart: {
    stacked: true,
    animations: { enabled: true }
  },

  series: [
    {name: 'Serie A', data: series1},
    {name: 'Serie B', data: series2},
    {name: 'Serie C', data: series3}
  ],

  xaxis: {type: 'datetime'}
}

4. Render Chart.

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

¡Impresionante! Aquí el demo interactivo. ¿Qué te parece ApexCharts? Ofrece un amplio abanico de opciones, tipos de gráficos y funcionalidades avanzadas. Ideal para Dashboards y Paneles de Control modernos. ¡Pero aún falta conocer otra genial herramienta! Continuamos con ZingChart

---

ZingChart para gráficos HTML5 interactivos

ZingChart es una impresionante librería que te permite crear más de 30 tipos distintos de gráficos interactivos y responsive en HTML5.

Destaca por su versatilidad y porque está pensada para que usuarios sin conocimientos técnicos puedan generar visualizaciones personalizadas de forma sencilla.

Provee cientos de opciones para personalizar tamaño, colores, fuentes, comportamiento y muchos detalles más.

"Hemos elegido ZingChart por su flexibilidad, rendimiento y servicios excepcionales" - Neil Patel, co-founder de Crazy Egg & KISSmetrics

Instalación con NPM y CDN de ZingChart

Puedes usar ZingChart con la CDN:

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>

O bien mediante NPM:

npm install zingchart

Tipos de gráficos con ZingChart

ZingChart es tan versátil que sería imposible nombrar todos los tipos de visualizaciones que soporta, pero entre los más destacados están:

• - Lineas

• - Barras - Columnas

• - Pie o Dona

• - Dispersión

• - Burbujas

• - Spider o Radar

• - Áreas

• - Candlesticks

• - Gauges - Medidores

• - Mapas de calor

• - y muchos más

Incluso permite importar datos desde CSV, JSON y Excel para graficarlos al instante.

Explicación paso a paso ejemplo sencillo ZingChart

Elaboraremos un gráfico de líneas básico:

1. Define el contenedor DIV

<div id="myChart"></div>

2. Inserta ZingChart. Importando la librería desde CDN:

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>

3. Inicializa nuevo gráfico.

var myConfig = {
  "type": "line",
  "title":{
    "text":"Ventas Anuales"
  },
  "scale-x":{
    "labels":["2017","2018","2019","2020","2022"]
  },
  "series": [
    {
      "values":[30, 42, 55, 90, 89]
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 250,
  width: "100%"
});

Listo! Ya está creado un sencillo gráfico de líneas. Pruébalo en este demo interactivo en Codepen

Explicación paso a paso ejemplo avanzado ZingChart

Ahora crearemos un gráfico radial o Spider Chart:

1º Inserta elemento DIV

<div id="chartSpider"></div>

2º Importa ZingChart. Desde la CDN:

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>

3º Configura el gráfico. Definimos la estructura JSON de datos y opciones:

var config = {
  type: 'radar',
  title: {
    text: 'Habilidades'
  },
  scaleX: {
    values: ["HTML", "CSS", "JS", "PHP", "Python"]
  },

  series : [
    {
      values : [90, 70, 65, 85, 70]
    }
  ]
};

4º Renderiza el gráfico:

zingchart.render({
	id: 'chartSpider',
	data: config,
	height: 400,
	width: "100%"
});

¡Impresionante gráfico Spider! Pruébalo en Codepen

Como ves en los ejemplos, ZingChart permite de forma sencilla implementar todo tipo de visualizaciones enriquecidas e interactivas. ¡Una excelente opción!

---

Conclusión

Hemos explorado las 4 opciones más populares para graficar datos con JavaScript:

• 1. Chart.js - Simple, flexible y muy customizable. Ideal para principiantes.

• 2. Plotly - Enfocada a Ciencia de Datos, con functionalidades analíticas avanzadas.

• 3. ApexCharts - Moderna, basada en SVG animado. Excelente para Dashboards interactivos.

• 4. ZingChart - Creada para usuarios no técnicos. Intuitiva, responsive y versátil.

Cada una de ellas tiene sus pros y contras, pero cualquiera puede ser una excelente opción dependiendo del proyecto. Te recomiendo elegir en base a tus necesidades específicas. Por ejemplo:

• - Si buscas simplicidad y facilidad de uso -> Chart.js

• - Si necesitas gráficos 3D, mapas y análisis científico de datos -> Plotly

• - Si trabajas en Dashboards modernos con React, Vue, etc. -> ApexCharts

• - Si requieres total personalización visual sin código -> ZingChart

En resumen, ¡no existe una única solución perfecta! Cada herramienta destaca en áreas diferentes. Valora bien tu caso de uso antes de decidir.

Espero que este artículo te haya aportado una visión completa de las opciones disponibles y cómo implementarlas.