Chart.js para KPIs

1npm install chart.js

1import Chart from 'chart.js/auto';

1<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

1new Chart(ctx, {
2  type: '...',     // QUE tipo de grafica dibujar
3  data: { ... },   // QUE datos mostrar (labels + datasets)
4  options: { ... } // COMO se ve y comporta (colores, ejes, leyendas, animaciones)
5});

1data: {
2  labels: ['Ene', 'Feb', 'Mar'],   // string[] — eje X
3  datasets: [
4    {
5      label: 'Producto A',          // nombre que aparece en la leyenda
6      data: [10, 20, 30],           // number[] — los valores
7      backgroundColor: '...',
8      borderColor: '...',
9      // ...mas propiedades de estilo
10    },
11    {
12      label: 'Producto B',
13      data: [15, 25, 35],
14    }
15  ]
16}

1const ctx = document.getElementById('ventas');
2 
3const grafica = new Chart(ctx, {
4  // ─────────────────────────────────────────────────────
5  // PARAMETRO 1: type — que tipo de grafica
6  // ─────────────────────────────────────────────────────
7  type: 'line',
8 
9  // ─────────────────────────────────────────────────────
10  // PARAMETRO 2: data — los datos
11  // ─────────────────────────────────────────────────────
12  data: {
13    labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'],
14 
15    datasets: [
16      {
17        label: 'Producto A',                   // nombre en leyenda
18        data: [120, 190, 300, 250, 420, 380],  // valores
19 
20        borderColor: 'rgb(168, 85, 247)',      // color de la linea
21        backgroundColor: 'rgba(168, 85, 247, 0.2)', // relleno
22        borderWidth: 3,                         // grosor en px
23 
24        fill: true,                             // pintar area bajo la linea
25        tension: 0.4,                           // curvatura (0 = recto)
26        pointRadius: 4,                         // tamano de puntos
27        pointHoverRadius: 6,                    // tamano al hacer hover
28        pointBackgroundColor: 'rgb(168, 85, 247)',
29      },
30      {
31        label: 'Producto B',
32        data: [80, 150, 220, 310, 280, 350],
33        borderColor: 'rgb(236, 72, 153)',
34        backgroundColor: 'rgba(236, 72, 153, 0.2)',
35        borderWidth: 3,
36        fill: true,
37        tension: 0.4,
38      }
39    ]
40  },
41 
42  // ─────────────────────────────────────────────────────
43  // PARAMETRO 3: options — como se ve y comporta
44  // ─────────────────────────────────────────────────────
45  options: {
46    responsive: true,                  // se adapta al contenedor
47    maintainAspectRatio: false,        // llena todo el contenedor
48 
49    // Animaciones
50    animation: {
51      duration: 1000,                  // ms
52      easing: 'easeInOutQuart'         // tipo de curva
53    },
54 
55    // Plugins (leyenda, titulo, tooltip)
56    plugins: {
57      legend: {
58        display: true,
59        position: 'top',               // top|bottom|left|right
60        labels: { color: '#e2e8f0', font: { size: 13 } }
61      },
62      title: {
63        display: true,
64        text: 'Ventas mensuales 2026',
65        color: '#f1f5f9',
66        font: { size: 18, weight: 'bold' }
67      },
68      tooltip: {
69        enabled: true,
70        backgroundColor: 'rgba(15, 23, 42, 0.95)',
71        titleColor: '#f1f5f9',
72        bodyColor: '#cbd5e1',
73        callbacks: {
74          // Personalizar el texto del tooltip
75          label: (ctx) => `${ctx.dataset.label}: $${ctx.parsed.y}`
76        }
77      }
78    },
79 
80    // Configuracion de los ejes
81    scales: {
82      y: {
83        beginAtZero: true,
84        min: 0,
85        max: 500,
86        ticks: { color: '#94a3b8', stepSize: 100 },
87        grid: { color: 'rgba(148, 163, 184, 0.1)' },
88        title: { display: true, text: 'Ventas ($)' }
89      },
90      x: {
91        ticks: { color: '#94a3b8' },
92        grid: { display: false },
93        title: { display: true, text: 'Mes' }
94      }
95    }
96  }
97});

1const grafica = new Chart(ctx, {
2  type: 'line',
3  data: { labels: [], datasets: [{ label: 'Usuarios', data: [] }] }
4});
5 
6function tick() {
7  const ahora = new Date().toLocaleTimeString();
8  const valor = Math.floor(Math.random() * 100) + 50;
9 
10  // Agregamos el nuevo punto
11  grafica.data.labels.push(ahora);
12  grafica.data.datasets[0].data.push(valor);
13 
14  // Mantenemos solo los ultimos 20
15  if (grafica.data.labels.length > 20) {
16    grafica.data.labels.shift();
17    grafica.data.datasets[0].data.shift();
18  }
19 
20  grafica.update(); // anima la transicion
21}
22 
23setInterval(tick, 1500); // cada 1.5s

1---
2// src/pages/dashboard.astro
3---
4<canvas id="ventas"></canvas>
5 
6<script>
7  import Chart from 'chart.js/auto';
8 
9  const ctx = document.getElementById('ventas');
10 
11  const grafica = new Chart(ctx, {
12    type: 'line',
13    data: {
14      labels: [],
15      datasets: [{ label: 'Ventas', data: [], borderColor: '#a855f7' }]
16    }
17  });
18 
19  setInterval(() => {
20    grafica.data.labels.push(new Date().toLocaleTimeString());
21    grafica.data.datasets[0].data.push(Math.random() * 100);
22    if (grafica.data.labels.length > 15) {
23      grafica.data.labels.shift();
24      grafica.data.datasets[0].data.shift();
25    }
26    grafica.update();
27  }, 1000);
28</script>