React
Grafici shadcn con Recharts
ChartContainer inietta i colori del config come variabili CSS, ma serve un contenitore con altezza e un client component: senza, il grafico resta vuoto.
In sintesi
- Ogni chiave di `ChartConfig` diventa una variabile `--color-
` usata da `fill` e `stroke`. - `ChartContainer` include `ResponsiveContainer`: senza un genitore con altezza il grafico misura zero.
- Recharts gira solo nel browser: il file del grafico ha bisogno di `"use client"`.
Risposta breve: npx shadcn@latest add chart installa un wrapper su Recharts; definisci un ChartConfig, metti il grafico dentro ChartContainer con un'altezza esplicita e usa var(--color-chiave) in fill e stroke. Il file deve essere un client component.
Il config è la mappa dei colori
Recharts vuole un colore su ogni serie. shadcn lo sposta in un oggetto: la chiave deve corrispondere al dataKey, il campo color diventa una variabile CSS e label finisce nel tooltip e nella legenda. Se la chiave non combacia, il grafico disegna ma la serie resta senza colore.
"use client";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/components/ui/chart";
const data = [
{ month: "Gen", desktop: 186, mobile: 80 },
{ month: "Feb", desktop: 305, mobile: 200 },
{ month: "Mar", desktop: 237, mobile: 120 },
];
const config = {
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig;
export function VisitsChart() {
return (
} />
);
}Il meccanismo: ChartContainer legge il config e scrive le variabili --color-desktop e --color-mobile sull'elemento che avvolge il grafico. fill="var(--color-desktop)" legge quella variabile, quindi cambiare il tema cambia il grafico senza toccare il componente.
Perché il grafico resta vuoto
| Sintomo | Causa | Correzione |
|---|---|---|
| Area bianca, nessuna barra | Il genitore non ha altezza: ResponsiveContainer misura 0. | className="h-[280px] w-full" sul ChartContainer. |
| Avviso width(0) and height(0) | Il grafico sta in una griglia o in un flex senza min-width. | Aggiungi min-w-0 al figlio della griglia. |
| Errore di hydration o import | Il file non è un client component. | Aggiungi "use client" in cima al file del grafico. |
| Serie trasparente | La chiave del config non corrisponde al dataKey. | Allinea le due stringhe, senza rinominare una sola delle due. |
Tooltip e legenda
ChartTooltip sostituisce il tooltip predefinito di Recharts e ChartTooltipContent applica lo stile del design system. Con labelFormatter formatti la data o il mese; con formatter cambi il valore mostrato, per esempio da 186 a 186 visite. La legenda funziona allo stesso modo, con ChartLegend e ChartLegendContent.
`Mese: ${value}`}
formatter={(value) => `${value} visite`}
/>
}
/>Accessibilità
accessibilityLayer rende il grafico raggiungibile da tastiera e annuncia i punti con le frecce. Non basta: un grafico è un'immagine di dati, e chi usa uno screen reader ha bisogno degli stessi numeri in testo. Aggiungi una tabella nascosta o un riepilogo accanto al grafico, non un alt generico.
Limite dichiarato
Recharts misura il contenitore nel browser: in SSR il grafico non esiste e il primo paint mostra uno spazio vuoto. Se il grafico è above the fold, riserva l'altezza con aspect-video o un h-[280px] sul wrapper, altrimenti il contenuto sotto salta quando il grafico compare e il CLS peggiora. Il catalogo, misurato il 1 novembre 2026, contiene 70 blocchi in categoria charts: sono composizioni statiche, non ricette di accessibilità.
Dove continuare
Nel catalogo trovi un blocco chart con anteprima, la categoria chart e il record del componente chart. Per i colori leggi che cosa è shadcn/ui e come tematizzare shadcn/ui; la selezione dei blocchi è in migliori chart blocks 2026.
Domande frequenti
Perché il grafico non si vede?
Quasi sempre perché il contenitore ha altezza zero: ResponsiveContainer misura il genitore e senza un'altezza esplicita disegna nulla. Aggiungi h-[280px] o aspect-video al ChartContainer.
Perché la serie è trasparente?
Perché la chiave nel ChartConfig non corrisponde al dataKey della serie. Il colore arriva da var(--color-chiave), quindi i due nomi devono essere identici.
Posso usare il grafico in un Server Component?
No. Recharts misura il DOM e usa stato nel browser: il file che contiene ChartContainer deve avere "use client" in cima. Puoi passare i dati dal server come props.
Come cambio i colori delle serie?
Cambia il campo color nel ChartConfig, oppure punta a un token del tema come var(--chart-1). Il ChartContainer riscrive le variabili e il grafico segue il tema chiaro e scuro.
Il grafico è accessibile?
Con accessibilityLayer è raggiungibile da tastiera, ma i dati restano invisibili a uno screen reader. Aggiungi una tabella nascosta o un riepilogo testuale accanto al grafico.