Chart.js es una de las biblioteca de JavaScript más conocidas y populares para la creación de gráficas y visualizaciones de datos interactivas, de manera simple y flexible.
Su diseño está centrado tanto en ser fácil de usa, como en ofrecer una amplia gama de opciones para personalizar gráficos. Permite crear varios tipos de gráficos, como barras, líneas, pastel y radar, entre otros.
Chart.js es Open Source, y se basa en HTML5 Canvas para dibujar los gráficos en la página web. Por ejemplo, aquí tenéis un gráfico creado con Chart.js
Algunas de las características de Chart.js
- Soporte para varios tipos de gráficos: Incluye gráficos de líneas, barras, tortas, radar, burbuja, polar, y más.
- Interactividad: Los gráficos son interactivos por defecto, con funcionalidades como tooltips y leyendas.
- Animaciones: Los gráficos pueden ser animados durante su renderización.
- Configuración flexible: Permite una personalización detallada de los estilos, colores y comportamientos de los gráficos.
- Escalabilidad: Compatible con diferentes tamaños de pantalla y dispositivos.
Para más información sobre Chart.js, podéis visitar el sitio oficial de Chart.js y consultar la documentación completa. También podemos explorar el repositorio en GitHub para ver el código fuente y contribuir a la comunidad.
Instalación de Chart.js
Para comenzar a usar Chart.js en nuestros proyectos, primero debemos instalarlo. Si utilizamos npm, podemos instalar Chart.js con el siguiente comando:
npm install chart.jsAlternativamente, podemos incluir Chart.js directamente en nuestro HTML mediante una etiqueta <script>:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>Cómo usar Chart.js
Añadir el elemento al HTML
En primer lugar, tenemos que añadir el contenedor donde Chart.js renderizará el gráfico. Para estos ejemplos lo haremos así
<canvas id="myChart" width="400" height="200"></canvas>Creación de un gráfico de líneas
const ctx = document.getElementById('myChart').getContext('2d');
const myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Monthly Sales',
data: [10, 20, 15, 30, 25, 40, 35],
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
fill: true
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Sales: $${tooltipItem.raw}`;
}
}
}
}
}
});Creación de un Gráfico de Barras
El siguiente ejemplo muestra cómo crear un gráfico de barras.
const ctx = document.getElementById('myChart').getContext('2d');
const myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Votes: ${tooltipItem.raw}`;
}
}
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});Creación de un gráfico de circular
Para representar datos proporcionales, podemos usar un gráfico de circular.
const ctx = document.getElementById('myChart').getContext('2d');
const myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Value: ${tooltipItem.raw}`;
}
}
}
}
}
});