Data displayGlass surface

BarChart

Compares categorical or discrete-period values with grouped and stacked bars.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add BarChart

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.

Package downloads

View chart data

Category	Downloads
Lumen	18,420 downloads
Astro Doctor	9,870 downloads
Dep Beacon	4,210 downloads

Rolling 30-day npm downloads.

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 { BarChart } from '@santi020k/lumen-astro'

const series = [
  {
    data: [
      { label: '18,420 downloads', x: 'Lumen', y: 18420 },
      { label: '9,870 downloads', x: 'Astro Doctor', y: 9870 },
      { label: '6,320 downloads', x: 'Astro Doctor', y: 6320 },
      { label: '4,210 downloads', x: 'Dep Beacon', y: 4210 }
    ],
    id: 'downloads',
    label: 'Downloads'
  }
]
---

<BarChart
  aria-label="Package downloads by project"
  caption="Rolling 30-day npm downloads."
  heading="Package downloads"
  orientation="horizontal"
  {series}
/>

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

export const Example = () => (
  <>
    <BarChart
      aria-label="Package downloads by project"
      caption="Rolling 30-day npm downloads."
      heading="Package downloads"
      orientation="horizontal"
      {series}
    />
  </>
)

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

  defineLumenElements()
</script>

<lumen-bar-chart
  aria-label="Package downloads by project"
  caption="Rolling 30-day npm downloads."
  heading="Package downloads"
  orientation="horizontal"
  {series}></lumen-bar-chart>

Edit BarChart 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 BarChart

lumen add BarChart

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add BarChart --target react

lumen add BarChart --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add BarChart --target elements

lumen add BarChart --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.

Pipeline duration

View chart data

Category	Minutes
Build	18
Test	11
Deploy	7

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 { BarChart } from '@santi020k/lumen-astro'

const series = [
  {
    data: [
      { x: 'Build', y: 18 },
      { x: 'Test', y: 11 },
      { x: 'Deploy', y: 7 }
    ],
    id: 'minutes',
    label: 'Minutes'
  }
]
---

<div class="docs-glass-demo">
  <BarChart
    aria-label="Pipeline duration"
    glass
    heading="Pipeline duration"
    {series}
  />
</div>

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

export const Example = () => (
  <>
    <div className="docs-glass-demo">
      <BarChart
        aria-label="Pipeline duration"
        glass
        heading="Pipeline duration"
        {series}
      />
    </div>
  </>
)

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

  defineLumenElements()
</script>

<div class="docs-glass-demo">
  <lumen-bar-chart
    aria-label="Pipeline duration"
    glass
    heading="Pipeline duration"
    {series}></lumen-bar-chart>
</div>

Edit BarChart 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 already-aggregated categorical values and stable series metadata.
orientation	"horizontal" \| "vertical"	"vertical"	Controls whether values extend across the x or y axis.
layout	"grouped" \| "stacked"	"grouped"	Places series beside one another or combines their positive and negative totals.
categoryWidth	number	112	Reserves 64–240 SVG units for horizontal category labels.
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.
showLegend	boolean	true for multiple series	Shows the color-independent series key.
showTable	boolean	true	Provides a revealable semantic table containing every plotted value.
heading, description, caption	string	-	Adds visible chart context without replacing the accessible name.
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.