BetaCharts

LineChart

A line per series, over a shared scale.

Overview

A line per series, over a shared scale.

import { LineChart } from '@xaui/native/line-chart'
;<LineChart
  data={rows}
  xKey="month"
  yKeys={['organic', 'paid']}
  formatY={value => `${value / 1000}k`}
/>

Everything about the plot, the palette, the axes and the API's shape is in chart.md — this page is only what is this chart's own.

First example

import { LineChart } from '@xaui/native/line-chart'

export function Example() {
  return <LineChart />
}

Anatomy

LineChart is a standalone component with no public slots.

Usage

import { LineChart } from '@xaui/native/line-chart' ;<LineChart data={rows} xKey="month" yKeys={['organic', 'paid']} formatY={value => ${value / 1000}k} />

Root props

LineChartProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
curve	`Curve \| undefined`	No	How the line travels between two points. `monotone` bends through them without ever leaving the interval its neighbours set — the reason `chart-path` implements Fritsch–Carlson rather than a midpoint cubic.
strokeWidth	`number \| undefined`	No	The line's thickness, in points.
hasPoints	`boolean \| undefined`	No	A dot on every reading. Off by default: twelve months of dots is a dotted line.

Slots

This component is standalone and exposes no public slot.

Variants, sizes and colour

This component adds no visual axis of its own. The values it does take are in the generated types above and in the live demo.

Accessibility

The source defines no extra rule. Keep the React Native labels, roles, states and focus order your case needs, then check the result with VoiceOver and TalkBack.

Migration from legacy

This component declares no rule of its own. The migration guide covers variants, colours and slots.

Implementation notes

Its own props

Prop	Type	Default	Notes
`curve`	`'monotone' \| 'linear'`	`'monotone'`	The curve never leaves its data
`strokeWidth`	`number`	`2`
`hasPoints`	`boolean`	`false`	A dot on every reading

hasPoints is off by default because twelve months of dots is a dotted line. It earns itself on a short series, where each reading is a thing you point at rather than a trend.

The cap and the join are round: a line ending in a square cap reads as clipped at the axis, and every trend line ends at the edge of its plot.