BarChart

Plote cada item de dados como uma barra, adequada para comparar valores categóricos. Ele pode ser organizado horizontalmente ou verticalmente, definir intervalos numéricos, rótulos de categorias e rótulos numéricos e suportar valores positivos e negativos.

Exemplo

function main() {
  return (
    <BarChart
      data={[
        { value: 30, label: 'A' },
        { value: 70, label: 'B' },
      ]}
      axis="vertical"
      rangeY={[0, 100]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={6}
      yAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

Uso

Cada item data é uma barra, em ordem de categorias, sem x. horizontal mantém rangeY como faixa numérica. Faixa automática inclui zero, negativos atravessam a base e background preenche barras.
rangeX/rangeY limita números, não rótulos. Ocultar rótulos não remove eixos; use stroke="clear" separadamente. O motor evita sobreposição, portanto nem todo rótulo habilitado aparece.
contentAnimation transiciona texto, imagem ou dados estruturados. interpolate exige pontos/closed Polyline, sequência Path ou amostras compatíveis. Mudanças estruturais atualizam imediatamente.

Propriedades

dataReadonlyArray<BarChartDataPoint>

Categorias na ordem do array. Cada item tem um valor numérico e um rótulo opcional.

Exemplo[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]

axis?"horizontal" | "vertical"

Direção: vertical da esquerda para a direita; horizontal de cima para baixo.

Exemplo"vertical"

rangeY?ChartRange

Intervalo visível [min, max]. Se omitido, ajusta-se aos dados incluindo zero.

Exemplo[0, 100]

showLabels?boolean

Mostrar rótulos das categorias. Os ausentes ficam vazios; o layout nativo evita sobreposição.

Exemplotrue

showValueLabels?boolean

Mostrar rótulos numéricos do eixo gerados automaticamente.

Exemplotrue

barThickness?number | "auto"

Espessura das barras em pontos ou auto conforme o espaçamento das categorias.

Exemplo"auto"

xAxis?ChartAxisStyle

Linha horizontal na parte inferior do gráfico. Padrão: cor de primeiro plano, largura 1pt; stroke: clear a oculta.

Exemplo{stroke: HDR($env.foreground), lineWidth: 1}

yAxis?ChartAxisStyle

Linha vertical à esquerda do gráfico. Padrão: cor de primeiro plano, largura 1pt; stroke: clear a oculta.

Exemplo{stroke: HDR($env.foreground), lineWidth: 1}

background?Paint

Preenchimento de cada barra. O padrão é a cor de primeiro plano do tema.

ExemploHDR($env.dark ? "white" : "black")

cornerRadius?number

Raio dos cantos de cada barra, limitado ao seu tamanho.

Exemplo0

stroke?Paint

Cor ou gradiente do traço; clear o oculta.

Exemplo"clear"

lineWidth?number

Espessura do traço em pontos; 0 não desenha traço.

Exemplo2

strokePosition?"inside" | "center" | "outside"

Posição do traço em relação a cada barra. O padrão é inside.

Exemplo"inside"

dash?number[]

Comprimentos alternados de traço e espaço em pontos; matriz vazia faz linha contínua.

Exemplo[]

dashPhase?number

Deslocamento do padrão tracejado em pontos.

Exemplo0

contentAnimation?ContentAnimation

Transição opcional. interpolate exige a mesma quantidade de categorias e direção; caso contrário, atualiza imediatamente.

Exemplo{type: "interpolate", duration: 0.25}

Propriedades comuns

width?number | "auto" | "fill"

Largura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo"fill"

height?number | "auto" | "fill"

Altura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo"fill"

x?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0

y?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0

transform?ViewTransform

Transforma o View inteiro sem mudar o layout. Translação em pontos, rotação/inclinação em graus, escala 1 sem mudança, âncoras 0–1.

Exemplo{rotation: 0}

opacity?number

Opacidade de todo o View: 0 transparente, 1 opaco.

Exemplo1

clipped?boolean

Recorta o desenho que ultrapassa os limites do View.

Exemplofalse

clip?"rectangle" | "ellipse"

Recorte rectangle ou ellipse; Material também aceita false para desativar.

Exemplo"rectangle"

mask?View | null

View de máscara alfa. Centralizada sem afetar o layout; null desativa a máscara.

Exemplo<Circle width="fill" height="fill" background="white"/>

zIndex?number

Ordem entre elementos irmãos; valores maiores ficam na frente.

Exemplo0

blur?number

Raio do desfoque em pontos; 0 desativa.

Exemplo4

innerShadow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Cor da sombra externa.

ExemploHDR("black")

shadowOpacity?number

Opacidade da sombra entre 0 e 1; 0 oculta.

Exemplo0

shadowRadius?number

Raio de desfoque da sombra externa em pontos.

Exemplo4

shadowX?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo0

shadowY?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo2

animations?BarChartAnimation[]

Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.

Exemplo[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Identidade estável entre elementos irmãos.

Exemplo prático

function main() {
  return (
    <BarChart
      width={260}
      height={160}
      axis="horizontal"
      rangeY={[-50, 100]}
      data={[
        { value: 80, label: 'A' },
        { value: -25, label: 'B' },
        { value: 45, label: 'C' },
      ]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={4}
      xAxis={{ stroke: $env.foreground, dash: [4, 3] }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

Animação

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

Quando omitido

A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.

Propriedades	Quando omitido
`data`	`[]`
`axis`	`"vertical"`
`showLabels`	`true`
`showValueLabels`	`true`
`cornerRadius`	`0`
`strokePosition`	`"inside"`
`background`	`HDR($env.dark ? 'white' : 'black')`
`xAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`
`yAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

LineChart

Color / Gradient

Nesta página

BarChart

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

APIs relacionadas

LineChart

Color / Gradient

Nesta página