Data display

ScatterChart

Shows numeric relationships and bubble magnitude across one or more series.

View preview API reference Figma behavior note

FrameworksAstro · React · Elements

Registry commandlumen add ScatterChart

InteractionNative markup

Design sourceBehavior-only contract

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.

Engagement and conversion

View chart data

X	Series	Value	Size
12	Conversion	Starter teams	18
38	Conversion	Growing teams	32
72	Conversion	Scaled teams	46

Bubble size represents active team count.

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

const series = [
  {
    data: [
      { label: 'Starter teams', size: 18, x: 12, y: 24 },
      { label: 'Growing teams', size: 32, x: 38, y: 57 },
      { label: 'Scaled teams', size: 46, x: 72, y: 84 }
    ],
    id: 'conversion',
    label: 'Conversion'
  }
]
---

<ScatterChart
  aria-label="Conversion by product engagement"
  caption="Bubble size represents active team count."
  heading="Engagement and conversion"
  {series}
/>

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

export const Example = () => (
  <>
    <ScatterChart
      aria-label="Conversion by product engagement"
      caption="Bubble size represents active team count."
      heading="Engagement and conversion"
      {series}
    />
  </>
)

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

  defineLumenElements()
</script>

<lumen-scatter-chart
  aria-label="Conversion by product engagement"
  caption="Bubble size represents active team count."
  heading="Engagement and conversion"
  {series}></lumen-scatter-chart>

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

lumen add ScatterChart

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add ScatterChart --target react

lumen add ScatterChart --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add ScatterChart --target elements

lumen add ScatterChart --target elements

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
series	LumenChartSeries[]	[]	Provides x/y points with optional labels and bubble sizes.
xScale	"linear" \| "time" \| "log"	"linear"	Selects the numeric x-axis scale used to position points.
formatValue	(value: number) => string	String	Formats point values and bubble sizes in titles and the accessible table.
showLegend	boolean	true for multiple series	Shows the color-independent series key.
showTable	boolean	true	Provides a revealable semantic table containing every point.
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.