Data displayGlass surface

LineChart

Shows ordered trends, multiple series, missing-value gaps, areas, markers, and reference values.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add LineChart

InteractionEnhanced runtime

Design sourceLinked component node

← All chart guides · Framework setup · Native counterparts

See it and copy it

Framework example

Explore the live chart, then open its code for Astro, React, or Elements.

Website traffic

Page views
Visits

View chart data

Category	Page views	Visits
Mon	120	82
Tue	168	104
Wed	154	97
Thu	201	128
Fri	238	146

Traffic increased through the end of the week.

View LineChart code

Framework usage

Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.

---
import { LineChart } from '@santi020k/lumen-astro'

const series = [
  {
    data: [
      { x: 'Mon', y: 120 },
      { x: 'Tue', y: 168 },
      { x: 'Wed', y: 154 },
      { x: 'Thu', y: 201 },
      { x: 'Fri', y: 238 }
    ],
    id: 'views',
    label: 'Page views'
  },
  {
    data: [
      { x: 'Mon', y: 82 },
      { x: 'Tue', y: 104 },
      { x: 'Wed', y: 97 },
      { x: 'Thu', y: 128 },
      { x: 'Fri', y: 146 }
    ],
    id: 'visits',
    label: 'Visits'
  }
]
---

<LineChart
  aria-label="Page views and visits from Monday through Friday"
  area
  caption="Traffic increased through the end of the week."
  heading="Website traffic"
  {series}
/>

import { LineChart } from '@santi020k/lumen-react'

const series = [
  {
    data: [
      { x: 'Mon', y: 120 },
      { x: 'Tue', y: 168 },
      { x: 'Wed', y: 154 },
      { x: 'Thu', y: 201 },
      { x: 'Fri', y: 238 }
    ],
    id: 'views',
    label: 'Page views'
  },
  {
    data: [
      { x: 'Mon', y: 82 },
      { x: 'Tue', y: 104 },
      { x: 'Wed', y: 97 },
      { x: 'Thu', y: 128 },
      { x: 'Fri', y: 146 }
    ],
    id: 'visits',
    label: 'Visits'
  }
]

export const Example = () => (
  <>
    <LineChart
      aria-label="Page views and visits from Monday through Friday"
      area
      caption="Traffic increased through the end of the week."
      heading="Website traffic"
      series={series}
    />
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements(['LineChart'])
</script>

<lumen-line-chart id="example-line-chart"
  aria-label="Page views and visits from Monday through Friday"
  area
  caption="Traffic increased through the end of the week."
  heading="Website traffic"></lumen-line-chart>

<script type="module">
"use strict";
const series = [
    {
        data: [
            { x: 'Mon', y: 120 },
            { x: 'Tue', y: 168 },
            { x: 'Wed', y: 154 },
            { x: 'Thu', y: 201 },
            { x: 'Fri', y: 238 }
        ],
        id: 'views',
        label: 'Page views'
    },
    {
        data: [
            { x: 'Mon', y: 82 },
            { x: 'Tue', y: 104 },
            { x: 'Wed', y: 97 },
            { x: 'Thu', y: 128 },
            { x: 'Fri', y: 146 }
        ],
        id: 'visits',
        label: 'Visits'
    }
];

const chart = document.getElementById('example-line-chart')

chart?.setAttribute('series', JSON.stringify(series))
</script>

Edit LineChart in browser

Framework differences

Elements: Pass series as a JSON attribute or through the public element property. The Elements example serializes the sample data with JSON.stringify; Astro expression bindings are not HTML attributes.

When to use LineChart

Use a line when the order and movement between observations matter: traffic, temperature, balances, or recurring measurements.

A break in the line marks a missing observation. Area fill follows the same gaps.
Use annotations or referenceValue to explain an event or threshold. Include the reporting period and units in the heading, description, or caption.
Enable interactive inspection for pointer, touch, and keyboard exploration. Matching syncGroup values synchronize charts at the same X identity; Astro also needs UIPrimitives.

Prepare the data

import type { LumenChartSeries } from '@santi020k/lumen-core'

const series = [{
  id: 'visits',
  label: 'Visits',
  data: [
    { x: '2026-08-01T00:00:00Z', y: 120 },
    { x: '2026-08-02T00:00:00Z', y: null },
    { x: '2026-08-04T00:00:00Z', y: 180 }
  ]
}] satisfies readonly LumenChartSeries[]

Give each series a unique id and a readable label. Keep y numeric; use null for an observation that is unavailable.
The default xScale is categorical and spaces categories evenly. Use xScale="time" for elapsed-time spacing or "linear" for numeric spacing.
For time data, use timestamps or ISO dates with an explicit time zone, sort ascending, and use formatCategory to display the intended locale and time zone.

Shared data and formatting guidance →

Avoid misleading comparisons

Do not format dates into ambiguous category strings before plotting a time scale.
A shortened Y domain emphasizes small changes. Keep domains consistent when readers compare separate plots, and disclose the units.

Chart accessibility and keyboard guidance →

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add LineChart

lumen add LineChart

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add LineChart --target react

lumen add LineChart --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add LineChart --target elements

lumen add LineChart --target elements

Glass

Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.

Coverage

View chart data

Category	Coverage
Mon	94
Tue	96
Wed	95
Thu	98

View LineChart code

Framework usage

Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.

---
import { LineChart } from '@santi020k/lumen-astro'

const series = [
  {
    data: [
      { x: 'Mon', y: 94 },
      { x: 'Tue', y: 96 },
      { x: 'Wed', y: 95 },
      { x: 'Thu', y: 98 }
    ],
    id: 'coverage',
    label: 'Coverage'
  }
]
---

<div class="docs-glass-demo">
  <LineChart
    aria-label="Test coverage"
    area
    glass
    heading="Coverage"
    referenceValue={95}
    {series}
  />
</div>

import { LineChart } from '@santi020k/lumen-react'

const series = [
  {
    data: [
      { x: 'Mon', y: 94 },
      { x: 'Tue', y: 96 },
      { x: 'Wed', y: 95 },
      { x: 'Thu', y: 98 }
    ],
    id: 'coverage',
    label: 'Coverage'
  }
]

export const Example = () => (
  <>
    <div className="docs-glass-demo">
      <LineChart
        aria-label="Test coverage"
        area
        glass
        heading="Coverage"
        referenceValue={95}
        series={series}
      />
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements(['LineChart'])
</script>

<div class="docs-glass-demo">
  <lumen-line-chart id="example-line-chart"
    aria-label="Test coverage"
    area
    glass
    heading="Coverage"
    reference-value="95"></lumen-line-chart>
</div>

<script type="module">
"use strict";
const series = [
    {
        data: [
            { x: 'Mon', y: 94 },
            { x: 'Tue', y: 96 },
            { x: 'Wed', y: 95 },
            { x: 'Thu', y: 98 }
        ],
        id: 'coverage',
        label: 'Coverage'
    }
];

const chart = document.getElementById('example-line-chart')

chart?.setAttribute('series', JSON.stringify(series))
</script>

Edit LineChart in browser

API reference

Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.

Attribute	Values	Default	Description
glass	boolean \| "subtle" \| "strong"	false	Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity.
xScale	"categorical" \| "linear" \| "time"	"categorical"	Uses numeric or elapsed-time spacing, sorted against one shared X domain. Format dates explicitly for the application locale and time zone.
domain, xDomain	Partial<LumenChartDomain>	automatic	Sets finite axis bounds shared by all series.
interactive, syncGroup	boolean, string	false, unset	Enables keyboard/pointer/touch inspection, toggled legends, and exact-X cursor synchronization. Astro requires UIPrimitives.
annotations	LumenChartAnnotation[]	[]	Places labeled X events or Y reference lines in data coordinates.
cursor, onCursorChange	React cursor identity and callback	uncontrolled	React can supply the active X identity and receive cursor changes. Astro and Elements emit ui:chart-cursor-change.
width, height	number	640, 320	Sets the SVG coordinate dimensions; narrow plots retain internal scrolling.
drilldown	boolean (Astro / Elements attribute)	false	Enables plotted datum actions and an equivalent native button disclosure, including with hidden tables. Astro requires UIPrimitives; Elements owns its lifecycle.
onDatumActivate	(detail: LumenChartDatumActivationDetail) => void (React)	-	Enables React datum actions and receives validated values with raw identities. Navigation and filtering remain application owned.
explore-data-label, datum-action-prefix, datumActionFormatter	string attributes, (context: string) => string property (Elements)	English labels	Localizes the Elements disclosure and datum actions.
labels.exploreData, labels.formatDatumAction	string, (context: string) => string	English labels	Localizes the actions disclosure and each contextual datum button.
series	LumenChartSeries[]	required	Provides ordered, already-aggregated points; null y values create visible gaps.
area	boolean	false	Adds a tokenized fill between each line segment and the zero or domain baseline.
markers	"auto" \| "all" \| "none" \| boolean \| number	"auto"	Controls marker density; a number displays every nth point while retaining all line and table data.
formatCategory, formatValue	formatter functions	String	Formats axes, SVG titles, and the accessible data table without changing data identity.
emptyLabel	string	"No chart data available."	Provides actionable, source-specific empty-state guidance.
referenceValue	number	-	Draws a dashed threshold or comparison line across the plot.
showLegend	boolean	true for multiple series	Shows the color-independent series key.
showTable	boolean	true	Provides a revealable semantic table containing every plotted value.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.

Keyboard interactions

Keyboard behavior provided by the Astro UIPrimitives runtime for this component.

Key	Action
Tab	Focus the actions disclosure and its native buttons in document order.
Enter, Space	Toggle the disclosure or activate the focused datum button. Actions remain available when the data table is hidden.

Runtime events

CustomEvents dispatched by the Astro UIPrimitives runtime for this component.

Event	Target	Detail	When
ui:chart-cursor-change	LineChart	{ x: number \| string \| null }	An interactive chart cursor changes through keyboard, pointer, or touch.
ui:chart-datum-activate	Astro chart figure or Elements data chart host	LumenChartDatumActivationDetail: series { seriesId, x, y, datumId? }, heatmap { x, y, value, datumId? }, range { x, low, high, datumId? }	Fires once after a plotted datum or its native action button is activated. Requires drilldown. Astro uses UIPrimitives, Elements owns its lifecycle, and React uses onDatumActivate instead.