Visão geral

O Chart usa ChartContainer para aplicar automaticamente os tokens de cor e o tema do design system.

Bar Chart

Import

import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from "@/components/ui/chart" // Componentes de gráfico (recharts) import { BarChart, Bar, LineChart, Line, ... } from "recharts"

ChartConfig

O ChartConfig mapeia chaves de dados para labels e cores. Use as cores como var(--color-chart-1) até var(--color-chart-6) definidas no design system.

Tipos de gráfico

Exemplos dos tipos mais comuns construídos com Recharts + ChartContainer.

Line Chart

Area Chart

Paleta de cores para gráficos

Tokens de cor dedicados para dados. Definidos no globals.css e disponíveis como variáveis CSS.

Verde — dados primários

--chart-1

#8AD059

Azul — dados secundários

--chart-2

#58C7FF

Laranja — terceiro dataset

--chart-3

#FF8B58

Vermelho — dados críticos

--chart-4

#FB5053

Roxo — quinto dataset

--chart-5

#C059FF

Cinza — dados neutros

--chart-6

#A3A3A3

Padrão de implementação

Receita para criar qualquer gráfico usando o sistema de charts do projeto.

Bar Chart completo

"use client"
import { BarChart, Bar, CartesianGrid, XAxis } from "recharts"
import {
  ChartContainer, ChartTooltip, ChartTooltipContent,
  type ChartConfig
} from "@/components/ui/chart"

const data = [
  { mes: "Jan", vendas: 4000 },
  { mes: "Fev", vendas: 5200 },
]

const config = {
  vendas: { label: "Vendas", color: "var(--color-chart-1)" },
} satisfies ChartConfig

export function MeuGrafico() {
  return (
    <ChartContainer config={config} className="h-[300px] w-full">
      <BarChart data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="mes" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="vendas" fill="var(--color-vendas)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}

Como acessar as cores no config

const config = {
  receita: {
    label: "Receita",
    color: "var(--color-chart-1)",  // verde
  },
  despesa: {
    label: "Despesa",
    color: "var(--color-chart-4)",  // vermelho
  },
} satisfies ChartConfig

// No gráfico, acesse via var(--color-[key]):
<Bar dataKey="receita" fill="var(--color-receita)" />

Props e uso

API do ChartContainer e dos componentes de suporte.

ChartContainer

config

ChartConfig

Mapa de dados para labels e cores. Injeta variáveis CSS para uso no gráfico.

className

string

Use para definir a altura: className='h-[300px] w-full'.

children

ReactElement (recharts)

Qualquer componente de gráfico do recharts.

Acessibilidade

O ChartContainer adiciona role="img" automaticamente. Adicione aria-label descritivo no container para descrever o gráfico para leitores de tela.

Para dados críticos, forneça também uma tabela de dados como alternativa acessível ao gráfico visual.

Não use cor como único diferenciador — garanta que label e forma também distinguem as séries.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter