LineChart

Plot the data series with actual x/y values as a curve. Suitable for trends such as speed and time, supports coordinate ranges, axes and labels; missing y values will break line segments.

Example

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 }}
    />
  );
}

Usage

value.x/y position samples; label.x/y only supply text. Samples connect in input order, without sorting by x; y=null breaks the line. A scrolling time chart updates both data and rangeX, for example [currentSeconds−30,currentSeconds].
$data.history contains the last 30 seconds of selected data, oldest first. It may be empty or contain missing values. timestamp uses milliseconds; elapsed uses seconds. For time charts preserve null gaps and use elapsed.value, not an array index, for x.
rangeX/rangeY bound numeric values, not labels. Hiding labels does not hide axis lines; use stroke="clear" in xAxis/yAxis to hide them separately. Native layout selects non-overlapping labels, so enabling labels does not guarantee every label appears.
contentAnimation transitions text, images or structured data rather than scalar properties. interpolate needs compatible structure: matching Polyline point count/closed state, Path command sequence or chart samples. Structural changes update immediately.

Properties

dataReadonlyArray<ChartDataPoint>

Chart samples. value.x/y set coordinates and label.x/y set text; null y breaks the line.

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

rangeX?ChartRange

Visible numeric axis range [min, max]. Omit to fit data automatically.

Example[0, 30]

rangeY?ChartRange

Visible numeric axis range [min, max]. Omit to fit data automatically.

Example[0, 100]

showXLabels?boolean

Show axis labels. Native layout selects a non-overlapping subset.

Exampletrue

showYLabels?boolean

Show axis labels. Native layout selects a non-overlapping subset.

Exampletrue

xAxis?ChartAxisStyle

Horizontal axis line at the bottom of the plot. Defaults to foreground with 1pt width; use clear stroke to hide.

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

yAxis?ChartAxisStyle

Vertical axis line at the left of the plot. Defaults to foreground with 1pt width; use clear stroke to hide.

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

stroke?Paint

Stroke paint; accepts a color or gradient. Use clear to hide the stroke.

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

lineWidth?number

Stroke thickness in points; 0 draws no stroke.

Example2

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

Stroke end shape: butt stops at the endpoint, square extends it, round rounds it.

Example"round"

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

Shape of joined stroke segments: miter, round or bevel.

Example"round"

dash?number[]

Alternating painted and empty lengths in points; an empty array makes a solid stroke.

Example[]

dashPhase?number

Offset along the dash pattern, in points.

Example0

contentAnimation?ContentAnimation

Optional content transition. Interpolate requires the same sample count and missing-value pattern; otherwise updates immediately.

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

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example"fill"

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example"fill"

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

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

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

blur?number

Blur radius in points; 0 disables blur.

Example4

innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

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

glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

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

shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")

shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0

shadowRadius?number

Outer shadow blur radius in points.

Example4

shadowX?number

Outer shadow offset in points: x right, y down.

Example0

shadowY?number

Outer shadow offset in points: x right, y down.

Example2

animations?LineChartAnimation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

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

key?string | number

Stable identity among siblings.

Practical example

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' }}
    />
  );
}

Animation

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeX.0rangeX.1rangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`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 }`

Example

Usage

Properties

Practical example

Animation

When omitted

$data · Driving data

Animation

BarChart

Color / Gradient

On this page

LineChart

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

$data · Driving data

Animation

BarChart

Color / Gradient

On this page