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

InteractionNative markup

Design sourceLinked component node

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

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.

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.

---
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'

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

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

  defineLumenElements()
</script>

<lumen-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"
  {series}></lumen-line-chart>

Edit LineChart in browser

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

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.

---
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'

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

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

  defineLumenElements()
</script>

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

Edit LineChart in browser

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

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.
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.