componentes

chart

Chart é o wrapper de gráficos do design system, baseado em MUI X Charts, para exibir dados em formatos bar, line, pie e scatter com tokens visuais do tema.

índice

uso
tipos de gráfico
formas de alimentar os dados
variações visuais
legenda, eixos e grade
estados
recomendações de uso

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

property	description	required	default value	type
variation	Chooses the leading palette from the design system graphic tokens.	`false`	`brand1`	`brand1brand2brand3brand4brand5`
title	Optional heading rendered above the chart.	`false`	`undefined`	`string`
type	Tipo de gráfico renderizado pelo wrapper.	`true`	`undefined`	`linebarscatterpie`
loading	Shows the chart in a loading state when supported by MUI X Charts.	`false`	`false`	`boolean`
grid	Configuração de linhas de grade para gráficos cartesianos.	`false`	`undefined`	`Pick<ChartsGridProps, "horizontal" \| "vertical">`
colors	Overrides the generated palette for the chart series.	`false`	`undefined`	`string[]`
dataset	Conjunto de dados tabulares usado para popular séries e eixos via `dataKey`.	`false`	`undefined`	`readonly DatasetElementType<unknown>[]`
series	Séries exibidas no gráfico, de acordo com o tipo selecionado.	`false`	`undefined`	`ChartSeries`
xAxis	Configuração do eixo horizontal para gráficos cartesianos.	`false`	`undefined`	`readonly (MakeOptional<AxisConfig<"time", any, ChartsXAxisProps>, "id"> \| MakeOptional<AxisConfig<"log", any, ChartsXAxisProps>, "id"> \| ... 6 more ... \| MakeOptional<...>)[]`
yAxis	Configuração do eixo vertical para gráficos cartesianos.	`false`	`undefined`	`readonly (MakeOptional<AxisConfig<"time", any, ChartsYAxisProps>, "id"> \| MakeOptional<AxisConfig<"log", any, ChartsYAxisProps>, "id"> \| ... 6 more ... \| MakeOptional<...>)[]`
description	Optional supporting description rendered above the chart.	`false`	`undefined`	`string`
tone	Chooses which token shade is used for the generated series palette.	`false`	`base`	`basestrongsoftestsoftersoftstronger`
emptyMessage	Placeholder shown when no usable series is provided.	`false`	`Nenhum dado disponível para exibir este gráfico.`	`string`
showLegend	Toggles the chart legend.	`false`	`false`	`boolean`

*valores gerados automaticamente.

uso

Chart é o ponto único do design system para visualização de dados com @mui/x-charts. O componente centraliza:

seleção do tipo de gráfico via prop type
paleta baseada em tokens com variation e tone
cabeçalho com title e description
comportamento visual compartilhado, como legenda, estado vazio e loading

Use esse wrapper sempre que o objetivo for manter consistência visual entre gráficos do produto e os demais componentes do design system.

tipos de gráfico

bar

Use para comparar volumes entre categorias ou períodos discretos.

line

Use para mostrar evolução, tendência e comportamento ao longo do tempo.

pie

Use para mostrar participação relativa entre partes de um todo.

scatter

Use para correlacionar duas métricas numéricas e localizar agrupamentos ou outliers.

formas de alimentar os dados

com `dataset` e `dataKey`

Esse é o formato mais indicado quando os dados já estão em estrutura tabular e os eixos e séries podem ser resolvidos por chave.

com `series`

Use esse formato quando o tipo de gráfico pede uma estrutura própria de série, como pie e scatter, ou quando os dados já chegam prontos nesse formato.

variações visuais

tokens com `variation` e `tone`

Use variation para escolher o ponto de partida da paleta do design system e tone para controlar a intensidade das cores.

paleta customizada com `colors`

Use colors apenas quando houver necessidade de uma paleta fixa para leitura específica do dado.

legenda, eixos e grade

estados

loading

vazio

Quando não houver série utilizável, o componente mostra o estado vazio do wrapper.

recomendações de uso

Use bar para comparação entre categorias.
Use line para evolução temporal.
Use pie para composição de um todo com poucas categorias.
Use scatter para correlação entre métricas.
Prefira dataset com dataKey quando os dados vierem em tabela.
Use showLegend quando houver mais de uma série ou quando a cor não for suficiente para interpretação.
Evite sobrescrever colors sem necessidade, para preservar consistência com os tokens do DS.