121
GitHub
Documentation
Data displayGlass surface

Chart

Frames metric headers, SVG plots, and captions for lightweight data visualization.

View previewAPI referenceView in Figma

FrameworksAstro · React · Elements

Registry commandlumen add Chart

InteractionNative markup

01

See it in context

Preview

Revenue

Last five quarters

$128.4K
Revenue is up 42% since Q1 after a temporary Q4 dip.
02

Copy a working example

Usage

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

<Chart aria-labelledby="chart-revenue-title">
  <header>
    <div>
      <h3 id="chart-revenue-title">Revenue</h3>
      <p>Last five quarters</p>
    </div>
    <strong data-ui-chart-value>$128.4K</strong>
  </header>
  <svg viewBox="0 0 120 40" role="img" aria-label="Revenue trend">
    <defs>
      <linearGradient id="chart-revenue-fill" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="currentColor" stop-opacity="0.22" />
        <stop offset="100%" stop-color="currentColor" stop-opacity="0" />
      </linearGradient>
    </defs>
    <path d="M0 35 L30 26 L60 18 L90 22 L120 8 L120 40 L0 40 Z" fill="url(#chart-revenue-fill)" />
    <path d="M0 35 L30 26 L60 18 L90 22 L120 8" fill="none" stroke="currentColor" stroke-width="3" />
    <g fill="currentColor">
      <circle cx="30" cy="26" r="1.6" />
      <circle cx="60" cy="18" r="1.6" />
      <circle cx="90" cy="22" r="1.6" />
      <circle cx="120" cy="8" r="1.6" />
    </g>
  </svg>
  <figcaption>Revenue is up 42% since Q1 after a temporary Q4 dip.</figcaption>
</Chart>
---
import { Chart } from '@santi020k/lumen-astro'
---

<Chart aria-labelledby="chart-revenue-title">
  <header>
    <div>
      <h3 id="chart-revenue-title">Revenue</h3>
      <p>Last five quarters</p>
    </div>
    <strong data-ui-chart-value>$128.4K</strong>
  </header>
  <svg viewBox="0 0 120 40" role="img" aria-label="Revenue trend">
    <defs>
      <linearGradient id="chart-revenue-fill" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="currentColor" stop-opacity="0.22" />
        <stop offset="100%" stop-color="currentColor" stop-opacity="0" />
      </linearGradient>
    </defs>
    <path d="M0 35 L30 26 L60 18 L90 22 L120 8 L120 40 L0 40 Z" fill="url(#chart-revenue-fill)" />
    <path d="M0 35 L30 26 L60 18 L90 22 L120 8" fill="none" stroke="currentColor" stroke-width="3" />
    <g fill="currentColor">
      <circle cx="30" cy="26" r="1.6" />
      <circle cx="60" cy="18" r="1.6" />
      <circle cx="90" cy="22" r="1.6" />
      <circle cx="120" cy="8" r="1.6" />
    </g>
  </svg>
  <figcaption>Revenue is up 42% since Q1 after a temporary Q4 dip.</figcaption>
</Chart>
03

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.

bash@santi020k/lumen-astro
pnpm add @santi020k/lumen-astro
pnpm add @santi020k/lumen-astro
bashAstro wrapper
lumen add Chart
lumen add Chart

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

94%+6 pts
Glass support is available across surface primitives.
astro
---
import { Badge, Chart } from '@santi020k/lumen-astro'
---

<div class="docs-glass-demo">
  <Chart aria-label="Glass adoption" glass>
    <header>
      <h3>Coverage</h3>
      <strong data-ui-chart-value>94%</strong>
      <Badge variant="success">+6 pts</Badge>
    </header>
    <svg viewBox="0 0 120 40" role="img" aria-label="Coverage trend">
      <path d="M0 34 L24 28 L48 22 L72 18 L96 12 L120 7" fill="none" stroke="currentColor" stroke-width="3" />
    </svg>
    <figcaption>Glass support is available across surface primitives.</figcaption>
  </Chart>
</div>
---
import { Badge, Chart } from '@santi020k/lumen-astro'
---

<div class="docs-glass-demo">
  <Chart aria-label="Glass adoption" glass>
    <header>
      <h3>Coverage</h3>
      <strong data-ui-chart-value>94%</strong>
      <Badge variant="success">+6 pts</Badge>
    </header>
    <svg viewBox="0 0 120 40" role="img" aria-label="Coverage trend">
      <path d="M0 34 L24 28 L48 22 L72 18 L96 12 L120 7" fill="none" stroke="currentColor" stroke-width="3" />
    </svg>
    <figcaption>Glass support is available across surface primitives.</figcaption>
  </Chart>
</div>

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.

AttributeValuesDefaultDescription
glassboolean | "subtle" | "strong"falseApplies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity.
class, classNamestring""Merges custom classes with the generated ui-* root classes.
...native attributesHTML attributes-Forwards standard attributes to the root element unless the component consumes them.