Chart

Visão geral

Chart é o primitive de fundação sobre o qual todo gráfico rx-* é composto. Portado do wrapper recharts consagrado do shadcn/ui e adaptado aos tokens do Gremorie, ele fornece as peças em que você envolve recharts cru: ChartContainer (frame responsivo + CSS vars de cor por série), ChartTooltip / ChartTooltipContent (o hover card) e ChartLegend / ChartLegendContent (a legenda). O hook useChart retorna o ChartConfig ativo a partir do contexto.

Normalmente você recorre a um gráfico pronto — BarChart, LineChart, AreaChart e o resto são wrappers finos sobre este primitive. Desça direto para Chart quando precisar de controle total: linhas de referência extras, uma legenda customizada, séries mistas ou um tipo de recharts que os wrappers não cobrem. ChartContainer continua injetando suas cores de token como var(--color-<key>) e estiliza o tooltip, então você só escreve os recharts que realmente precisa.

Preview

'use client';import {  ChartContainer,  ChartLegend,  ChartLegendContent,  ChartTooltip,  ChartTooltipContent,  type ChartConfig,} from '@gremorie/rx-data';import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';const data = [  { month: 'Jan', desktop: 186, mobile: 80 },  { month: 'Feb', desktop: 305, mobile: 200 },  { month: 'Mar', desktop: 237, mobile: 120 },  { month: 'Apr', desktop: 173, mobile: 190 },  { month: 'May', desktop: 209, mobile: 130 },  { month: 'Jun', desktop: 214, mobile: 140 },];const config: ChartConfig = {  desktop: { label: 'Desktop', color: 'var(--chart-1)' },  mobile: { label: 'Mobile', color: 'var(--chart-2)' },};export function ChartPreview() {  return (    <ChartContainer config={config}>      <BarChart accessibilityLayer data={data}>        <CartesianGrid vertical={false} />        <XAxis          dataKey="month"          tickLine={false}          axisLine={false}          tickMargin={10}        />        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />        <ChartLegend content={<ChartLegendContent />} />        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={8} />      </BarChart>    </ChartContainer>  );}

Anatomia

ChartContainer                 responsive frame; injects --color-<key> from config; provides chart context
├─ ChartStyle                  emits the per-series CSS color vars (light + dark)
└─ ResponsiveContainer         recharts responsive wrapper
   └─ <recharts chart>         your BarChart / LineChart / etc.
      ├─ ChartTooltip          recharts Tooltip
      │  └─ ChartTooltipContent  token-styled tooltip body
      └─ ChartLegend           recharts Legend
         └─ ChartLegendContent   token-styled legend body

Instalação

Traz o recharts. Todo outro primitive de chart (rx-bar-chart, rx-line-chart, …) depende deste.

Uso

import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@gremorie/rx-data";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

const config: ChartConfig = {
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
};

export function Example({ data }: { data: Record<string, string | number>[] }) {
  return (
    <ChartContainer config={config}>
      <BarChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={10} />
        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={8} />
      </BarChart>
    </ChartContainer>
  );
}

API

<ChartContainer>

Fornece o contexto do chart. Renderiza ChartStyle + um ResponsiveContainer do recharts.

<ChartTooltip> / <ChartTooltipContent>

ChartTooltip é o Tooltip do recharts. ChartTooltipContent é o corpo estilizado por token.

<ChartLegend> / <ChartLegendContent>

ChartLegend é o Legend do recharts. ChartLegendContent é o corpo estilizado por token.

useChart()

Hook que retorna { config } do ChartContainer mais próximo. Lança erro se usado fora de um.

Types

Composição

1. Escreva o config — uma entrada por série com um label e uma cor de token (var(--chart-1)…).
2. Envolva o recharts em <ChartContainer config={config}> — ele injeta var(--color-<key>) e dimensiona o frame.
3. Referencie as cores como var(--color-<key>) no fill/stroke de Bar/Area/Line.
4. Adicione <ChartTooltip content={<ChartTooltipContent />} /> e, se necessário, <ChartLegend content={<ChartLegendContent />} />.

Variações

Indicador de tooltip customizado

<ChartTooltip content={<ChartTooltipContent indicator="line" />} />

Legenda no topo

<ChartLegend verticalAlign="top" content={<ChartLegendContent />} />

Acessibilidade

• Accessibility layer: habilite o accessibilityLayer do recharts no seu chart para navegação por teclado e anúncios de screen reader dos pontos de dados.
• Contraste de token: os tokens --chart-1 até --chart-5 vêm com contraste AA contra a superfície do card em ambos os temas.
• Cor não é o único sinal: combine as cores das séries com labels no tooltip e na legenda para que o significado sobreviva sem cor.

Relacionados

• Bar Chart - o wrapper categórico construído sobre este primitive.
• Line Chart - tendências de domínio ordenado.
• Area Chart - magnitude preenchida sobre um domínio ordenado.