---
title: "Grafici della dashboard senza nessuna dipendenza"
description: "Abbiamo costruito le linee di tendenza, gli sparkline e le barre per categoria della nostra dashboard come semplice SVG in linea. Nessuna libreria di grafici, poche centinaia di righe in tutto, tema scuro incluso. Ecco perché conviene farseli a mano, e quando invece non bisogna assolutamente farlo."
url: "https://bookatu.com/it-it/blog/dashboard-charts-with-zero-dependencies"
language: "it"
section: "Blog"
category: "Tecnica"
author: "Il team tecnico di Bookatu"
published: "2026-07-11"
updated: "2026-07-11"
tags: ["grafici svg", "grafici senza libreria", "grafici in tema scuro", "prestazioni frontend", "visualizzazione dei dati"]
---

# Grafici della dashboard senza nessuna dipendenza

Abbiamo costruito le linee di tendenza, gli sparkline e le barre per categoria della nostra dashboard come semplice SVG in linea. Nessuna libreria di grafici, poche centinaia di righe in tutto, tema scuro incluso. Ecco perché conviene farseli a mano, e quando invece non bisogna assolutamente farlo.

> **In breve**
>
> - I grafici di una dashboard di solito sono una manciata di forme: una linea, un'area, qualche barra. Sono poche decine di elementi SVG, non una libreria.
> - Colorare tratti e riempimenti con variabili CSS vuol dire che i grafici seguono il tuo tema in automatico, tema scuro compreso.
> - Ogni stato è tuo: vuoto, un solo dato, movimento ridotto, lettori di schermo.
> - Prendi una libreria quando ti servono interattività, scale o tipi di grafico che altrimenti reinventeresti male.

Quando abbiamo aggiunto una dashboard di magazzino, la mossa ovvia era installare una libreria di grafici. Quelle diffuse sono ottime. Sono anche grandi, hanno idee precise sul tema e sono fatte per gestire mille casi quando a noi ne servivano quattro: una linea di tendenza a due serie, uno sparkline per riga, una barra del livello di giacenza e una ripartizione per categoria. Li abbiamo scritti come SVG in linea, e tutto l'insieme è venuto più piccolo delle definizioni di tipi della maggior parte delle librerie.

![Una dashboard di magazzino con un grafico di tendenza, la ripartizione per categoria e una classifica, in tema chiaro](https://bookatu.com/blog/shots/inventory-control-center-light.png)

*Quattro grafici fatti a mano: linee di tendenza, una barra di categoria a segmenti, barre di valore in classifica e sparkline per riga.*

## Un grafico è un tracciato

Togli di mezzo gli strumenti e un grafico a linee è una stringa: un tracciato SVG costruito dai tuoi valori. Mappi l'indice di ogni punto sulla x, ogni valore sulla y, e li unisci. L'unica sottigliezza che vale la pena scriversi è il margine: mappa il valore massimo qualche pixel sotto il bordo superiore, altrimenti il tratto sul picco viene tagliato a metà dal viewBox.

```js
const W = 300, H = 80, PAD = 3; // top pad so the peak stroke is not clipped
const max = Math.max(1, ...values);
const x = (i) => (i / (values.length - 1)) * W;
const y = (v) => PAD + (H - PAD) * (1 - v / max);

const d = values
  .map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)} ${y(v).toFixed(1)}`)
  .join(' ');

// <path d={d} fill="none" stroke="var(--color-primary)" strokeWidth="2" />
```

## Il tema scuro non costa niente

Il guadagno silenzioso è il tema. I nostri token di design sono variabili CSS, e i tratti e i riempimenti SVG le accettano come qualsiasi altra proprietà. stroke="var(--color-primary)" vuol dire che il grafico si ricolora nell'istante in cui il tema cambia, senza configurazione del tema a livello di grafico, senza una tavolozza duplicata e senza scarti tra i grafici e il resto dell'interfaccia. Quando più avanti abbiamo ritoccato la nostra tavolozza scura, i grafici l'hanno seguita senza che li toccassimo.

![La stessa dashboard di magazzino disegnata in tema scuro](https://bookatu.com/blog/shots/inventory-control-center-dark.png)

*Gli stessi componenti in tema scuro. Nessun grafico è stato modificato, il lavoro l'hanno fatto le variabili CSS.*

## I casi limite sono tuoi

Le librerie sono generose di funzioni e avare sui casi limite che riguardano solo te. Cosa dovrebbe fare uno sparkline con un solo dato? Cosa dice il grafico di tendenza quando un'attività è appena nata e ogni valore è zero? I componenti fatti a mano rendono queste decisioni esplicite e poco costose: uno stato vuoto onesto con una frase, una linea piatta invece di un errore, un riassunto testuale accanto a ogni grafico per i lettori di schermo, e un'unica media query prefers-reduced-motion che spegne l'animazione di tracciamento.

- Dai a ogni grafico un aria-label e un riassunto in parole semplici. L'SVG è decorazione, il dato è la frase.
- Anima i tratti con stroke-dashoffset per l'effetto di tracciamento, e mettilo dietro a prefers-reduced-motion.
- Tieni insieme i calcoli e il markup. Un componente grafico che leggi dall'inizio alla fine in una schermata è un grafico che sai sistemare alle 23.
- Progetta per primo lo stato vuoto. Gli account nuovi lo vedono più di qualsiasi altro stato.

## Quando conviene usare una libreria

Farseli a mano smette di essere furbo nel momento in cui i requisiti mettono i denti. Zoom e selezione a trascinamento, scale logaritmiche, aree impilate con interpolazione seria, assi con tacche posizionate in modo intelligente, disegno su canvas per decine di migliaia di punti: sono problemi già risolti, e risolverli di nuovo a mano è il modo in cui una funzione da due giorni diventa un passatempo da due mesi. La nostra regola è semplice. Se il grafico è presentazione, scrivi l'SVG. Se il grafico è uno strumento che l'utente usa, prenditi la dipendenza e ringrazia che qualcuno la mantenga.

> La libreria di grafici migliore per quattro grafici piccoli si è rivelata essere un ciclo for.