# shadcn charts with Recharts

ChartContainer turns config colours into CSS variables, but it needs a container with height in a client component: without both, the chart stays empty.

> Page: https://ui.eneawork.it/blog/shadcn-chart-recharts
> Markdown: https://ui.eneawork.it/blog/shadcn-chart-recharts.md

*2026-11-01*

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 catalogo EneUI misura 111.985 componenti, 1.556 blocchi, 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. 70 blocchi su 1.556 sono nella categoria charts e 74 hanno «chart» nell'id, contati da data/blocks.json lo stesso giorno.

## 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

## 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.

## FAQ

### 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.