🧰 Chart.js · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Chart.js

Visualización de Datos ⭐ 60k stars
8 tipos de gráficos en Canvas, compatible con todos los navegadores modernos.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm i chart.js

import Chart from 'chart.js/auto';
new Chart(document.getElementById('g'), {
  type: 'bar',
  data: { labels: ['A','B'], datasets: [{ data: [10, 20] }] },
});

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Gráfico de línea (ventas)

Serie temporal de ventas por mes.

import Chart from 'chart.js/auto';

new Chart(document.getElementById('g'), {
  type: 'line',
  data: {
    labels: ['Ene', 'Feb', 'Mar'],
    datasets: [{ label: 'Ventas', data: [120, 190, 170], borderColor: '#f6ad55' }],
  },
  options: { responsive: true },
});
🔁 Cómo funciona: Chart.js dibuja la línea en Canvas con los datos y etiquetas que le pasas.

2. Doughnut por categorías

Distribución de gastos en un gráfico de anillo.

import Chart from 'chart.js/auto';

new Chart(document.getElementById('g'), {
  type: 'doughnut',
  data: {
    labels: ['Comida', 'Servicios', 'Otros'],
    datasets: [{ data: [45, 30, 25], backgroundColor: ['#f6ad55', '#5ad1e6', '#7ee787'] }],
  },
});
🔁 Cómo funciona: `type: 'doughnut'` genera el anillo con los colores y proporciones por segmento.

5 · Referencia

CategoríaVisualización de Datos
Stars (GitHub)⭐ 60k
Sitio oficialhttps://www.chartjs.org/
GitHubhttps://github.com/chartjs/Chart.js
Instalaciónnpm i chart.js
RelacionadasD3.js · Highcharts · Google Charts
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.