Lumina

Component · Visual

Chart

Wrapper sobre Recharts com tokens semânticos do Lumina. Cores respondem ao mood automaticamente, tooltip e legenda já vêm com a tipografia certa.

rechartssource

Import

import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartConfig } from "@nimbuslab/lumina/components/chart"

Bar chart

Demanda por mood na última semana. Cor única, eixo X discreto, grid horizontal apenas.

Bar chart com múltiplas séries

Cada série mapeia um produto. A legenda usa o ChartLegendContent pra herdar tipografia mono.

Area chart

Receita acumulada em moeda. Gradient suave usando o token primary e fade pro background.

Line chart

Mesma série em traço puro. Use quando o foco for a tendência, sem peso de área.

Pie chart

Distribuição de share. Quatro fatias com opacidades distintas do mesmo primary, mantém coesão cromática.

Receita

Como montar um chart novo do zero, em 4 passos.

meu-chart.tsxTSX

Tokens

  • Cor primária: sempre hsl(var(--primary)). Nunca hex no color.
  • Cor secundária: hsl(var(--muted-foreground)) ou opacidades do primary (/ 0.7, / 0.5).
  • Grid: strokeOpacity={0.2} e vertical={false} por padrão.
  • Eixos: tickLine={false} + axisLine={false}. Tudo respira.
  • Bar radius: 4 (multi-série) ou 8 (série única).

Anti-padrões

  • Cor hard-coded (hex). Quebra o mood, prefira hsl(var(--primary)).
  • Tooltip nativo do Recharts. Use ChartTooltipContent pra herdar tipografia e radius do Lumina.
  • Eixos cheios. Linhas, ticks, grid completo. Vira ruído visual e esmaga o dado.
  • Mais de 3 cores num pie. Vira pizza de aniversário, perde hierarquia.
  • Bar chart com 1 ponto só. Vira retângulo. Prefira big number.