LineChart#

The LineChart component renders a single continuous line across discrete labeled points. It is useful for visualizing simple trends or progressions where each data point is mapped to a category or label.

It shares the same API as BarChart and is ideal for basic one-line comparisons over labeled axes.

Example Scenario#

This example visualizes the count of different toy shapes (Cube, Sphere, Pyramid) using a single line. The user can toggle between horizontal and vertical layouts using labelOnYAxis.

Usage#

1<Chart>
2  <LineChart
3    labelOnYAxis={false}
4    marks={[
5      { label: "Cube", value: 5 },
6      { label: "Sphere", value: 4 },
7      { label: "Pyramid", value: 4 },
8    ]}
9  />
10</Chart>

Props#

labelOnYAxis?: boolean#

• When true, category labels are shown on the Y-axis, and the line is plotted horizontally.
• When false (default), labels appear on the X-axis, and the line is plotted vertically.

marks: Array<object> (required)#

Each item defines a point on the line:

• label: string | Date The axis label corresponding to the point (e.g., category, time, name).

• value: number The numeric value for this point.

• Optional fields from ChartMarkProps can also be applied:

  • foregroundStyle
  • symbol
  • annotation
  • cornerRadius
  • opacity, etc.

Full Example#

1const toysData = [
2  { type: "Cube", count: 5 },
3  { type: "Sphere", count: 4 },
4  { type: "Pyramid", count: 4 },
5]
6
7<LineChart
8  marks={toysData.map(toy => ({
9    label: toy.type,
10    value: toy.count,
11  }))}
12/>

Use Cases#

LineChart is useful for:

• Showing a basic trend or progression over a labeled axis
• Comparing changes across a single dimension
• Minimal visualizations with one continuous line