Vox Mente
Navegação

Componentes

Chart

beta

Visualização de dados sobre recharts, com as cores vindas dos tokens de gráfico. Nunca cor literal.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/chart

Playground
<ChartContainer config={config}>
  <LineChart data={evolucaoDoAluno}>
    <ChartTooltip content={<ChartTooltipContent />} />
    <Line dataKey="leitura" stroke="var(--color-leitura)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>

Uso

Casca em torno do Recharts: `ChartContainer` injeta as cores de `config` como variáveis CSS e resolve o container responsivo. Ele não desenha nada — quem desenha é o Recharts, dentro do `children`.

Só dentro de componente de cliente

O Recharts chama `React.createContext` na avaliação do módulo e não se declara como cliente. Importá-lo de um componente de servidor derruba o build inteiro com `createContext is not a function` — sem erro de tipo e sem aviso de lint. Todo gráfico precisa viver num arquivo com `"use client"`.

Esta página segue a própria regra: as demonstrações de gráfico estão em chart.demo.tsx, e o conteúdo só as renderiza.

Cores por config

A cor nunca é literal no traço ou na barra: vem de `var(--color-<chave>)`, resolvida a partir de `config`. As cinco cores disponíveis (`--chart-1` a `--chart-5`) estão documentadas em Fundamentos → Cor — mudar o tema muda o gráfico junto.

Tooltip

`ChartTooltipContent` lê o rótulo e a cor direto de `config` pela `dataKey` — por isso o rótulo do tooltip já sai em português mesmo a chave sendo `leitura`.

Legenda

`ChartLegendContent` faz o mesmo mapeamento da tooltip, agora para os rótulos abaixo do gráfico — útil quando o gráfico tem mais de uma série e o eixo sozinho não distingue quem é quem.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

ChartContainer

PropTipoPadrão
config*{ [x: string]: { label?: ReactNode; icon?: ComponentType<{}> | undefined; } & ({ color?: string | undefined; theme?: undefined; } | { color?: undefined; theme: Record<"light" | "dark", string>; }); }—
initialDimension{ width: number; height: number; }INITIAL_DIMENSION

Também aceita as props de React, incluindo className e os atributos de DOM.

ChartLegendContent

PropTipoPadrão
hideIconbooleanfalse
nameKeystring—

Também aceita as props de React e outras, incluindo className e os atributos de DOM.

ChartStyle

PropTipoPadrão
config*{ [x: string]: { label?: ReactNode; icon?: ComponentType<{}> | undefined; } & ({ color?: string | undefined; theme?: undefined; } | { color?: undefined; theme: Record<"light" | "dark", string>; }); }—
id*string—

ChartTooltipContent

PropTipoPadrão
hideIndicatorbooleanfalse
hideLabelbooleanfalse
indicator"line" | "dot" | "dashed""dot"
labelKeystring—
nameKeystring—

Também aceita as props de React e outras, incluindo className e os atributos de DOM.

ChartLegend, ChartTooltip não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css