LineChart

Trace a série de dados com valores reais de x/y como uma curva. Adequado para tendências como velocidade e tempo, suporta faixas de coordenadas, eixos e rótulos; valores y ausentes quebrarão os segmentos de linha.

Exemplo

function main() {
  return (
    <LineChart
      data={[
        { value: { x: 0, y: 20 }, label: { x: '0s', y: '20' } },
        { value: { x: 10, y: 60 }, label: { x: '10s', y: '60' } },
      ]}
      rangeX={[0, 10]}
      rangeY={[0, 100]}
      showXLabels={true}
      showYLabels={true}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

Uso

value.x/y posiciona; label.x/y só fornece texto. Não ordena por x; y=null interrompe. Gráficos temporais móveis atualizam data e rangeX, por exemplo [segundosAtuais−30,segundosAtuais].
$data.history cobre 30 segundos, antigos primeiro, podendo estar vazio ou incompleto. timestamp em milissegundos, elapsed em segundos. Preserve lacunas null e use elapsed.value, não índice, no eixo temporal.
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<ChartDataPoint>

Dados do gráfico. value.x/y define coordenadas e label.x/y o texto; y nulo interrompe a linha.

Exemplo[{value: {x: 0, y: 12}, label: {x: "0s", y: "12"}}, {value: {x: 10, y: 24}, label: {x: "10s", y: "24"}}]

rangeX?ChartRange

Intervalo numérico visível [min, max]. Se omitido, ajusta-se aos dados.

Exemplo[0, 30]

rangeY?ChartRange

Intervalo numérico visível [min, max]. Se omitido, ajusta-se aos dados.

Exemplo[0, 100]

showXLabels?boolean

Mostrar rótulos do eixo. O layout nativo seleciona um subconjunto sem sobreposição.

Exemplotrue

showYLabels?boolean

Mostrar rótulos do eixo. O layout nativo seleciona um subconjunto sem sobreposição.

Exemplotrue

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}

stroke?Paint

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

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

lineWidth?number

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

Exemplo2

lineCap?"round" | "butt" | "square"

Ponta da linha: butt corta, square estende em quadrado, round arredonda.

Exemplo"round"

lineJoin?"round" | "miter" | "bevel"

Formato das junções: miter, round ou bevel.

Exemplo"round"

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 amostras e posições ausentes; 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?LineChartAnimation[]

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() {
  const now = $data.current.elapsed?.value ?? 0;
  const data = $data.history
    .filter((sample) => sample.elapsed?.value != null)
    .map((sample) => ({
      value: { x: sample.elapsed.value, y: sample.speed?.value ?? null },
      label: {
        x: sample.elapsed.value.toFixed(0) + 's',
        y: sample.speed?.value == null ? '' : sample.speed.value.toFixed(0),
      },
    }));
  return (
    <LineChart
      data={data}
      rangeX={[now - 30, now]}
      rangeY={[0, 160]}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

Animação

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeX.0rangeX.1rangeY.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`	`[]`
`showXLabels`	`true`
`showYLabels`	`true`
`lineWidth`	`2`
`stroke`	`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

$data · Dados de condução

Animação

BarChart

Color / Gradient

Nesta página

LineChart

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

APIs relacionadas

$data · Dados de condução

Animação

BarChart

Color / Gradient

Nesta página