Data display

LollipopChart

Rank categories using a dot and a zero-based stem.

View preview API reference Figma behavior note

FrameworksAstro · React · Elements

Registry commandlumen add LollipopChart

InteractionNative markup

Design sourceBehavior-only contract

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

Team performance

Score out of 100 · highest first

CategoryScore

Engineering91
Design88
Support74

View chart data

Category	Score
Engineering	91
Design	88
Support	74

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

const data = [
  { id: 'engineering', label: 'Engineering', value: 91 },
  { id: 'design', label: 'Design', value: 88 },
  { id: 'support', label: 'Support', value: 74 }
]
---

<LollipopChart
  aria-label="Team scores, current quarter"
  heading="Team performance"
  description="Score out of 100 · highest first"
  data={data}
  domain={{ min: 0, max: 100 }}
  valueLabel="Score"
/>

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

const data = [
  { id: 'engineering', label: 'Engineering', value: 91 },
  { id: 'design', label: 'Design', value: 88 },
  { id: 'support', label: 'Support', value: 74 }
]

export const Example = () => (
  <>
    <LollipopChart
      aria-label="Team scores, current quarter"
      heading="Team performance"
      description="Score out of 100 · highest first"
      data={data}
      domain={{ min: 0, max: 100 }}
      valueLabel="Score"
    />
  </>
)

<lumen-lollipop-chart
  id="example-lollipop-chart"
  aria-label="Team scores, current quarter"
  heading="Team performance"
  description="Score out of 100 · highest first"
  domain-min="0" domain-max="100"
  value-label="Score"
></lumen-lollipop-chart>

<!-- In a module processed by your bundler, after the chart markup. -->
<script type="module">
import { defineLumenElements, LumenLollipopChartElement } from '@santi020k/lumen-elements'

defineLumenElements(['LollipopChart'])

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

if (chart instanceof LumenLollipopChartElement) {
  chart.data = [
    { id: 'engineering', label: 'Engineering', value: 91 },
    { id: 'design', label: 'Design', value: 88 },
    { id: 'support', label: 'Support', value: 74 }
  ]
}
</script>

Edit LollipopChart in browser

Framework differences

Elements: Register LollipopChart, assign numeric rows to the data property or a JSON data attribute, and use domain-min/domain-max for a shared scale. Assign a function to valueFormatter for units; functions cannot be HTML attributes.

When to use LollipopChart

Use for a concise ranking with one measurement per category and readable row labels.

The dot marks the value and the stem shows its distance from zero. Negative values extend to the opposite side of the baseline.
Set valueLabel and formatValue to explain the measurement consistently in row values, ticks, and the exact-data table.

Prepare the data

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

const data = [
  { id: 'engineering', label: 'Engineering', value: 91 },
  { id: 'design', label: 'Design', value: 88 },
  { id: 'support', label: 'Support', value: null }
] satisfies readonly LumenComparisonDatum[]

Each row needs a unique nonempty id, a label, and a finite value or null. Input order is preserved; sort a copy in your application to create a ranking.
A supplied domain must be finite, increasing, and include zero plus every measured value. Use the same domain when comparing panels.
The shared comparison datum also accepts reference, but LollipopChart only plots value. Use DumbbellChart to display both endpoints.

Shared data and formatting guidance →

Avoid misleading comparisons

A null value is unavailable, while zero is an actual measurement. Do not substitute one for the other.
Invalid rows, duplicate ids, or a domain that excludes a value make the dataset invalid; validate before rendering.

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 LollipopChart

lumen add LollipopChart

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add LollipopChart --target react

lumen add LollipopChart --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add LollipopChart --target elements

lumen add LollipopChart --target elements

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
data	readonly LumenComparisonDatum[]	required	Unique non-empty id, label, nullable finite value, and optional tone. Input order is preserved; reference is not plotted.
domain	LumenChartDomain	automatic	Must include zero and every displayed measurement.
formatValue	(value: number) => string	String	Formats numeric values, ticks, and exact data. Keep the source data numeric.
labels	Partial<LumenChartLabels>	English	Localizes unavailable, empty, invalid-data, and data-disclosure text.
valueLabel	string	labels.value	Names the measured value in the row header and exact table.
heading, description, caption, summary	string	unset	Supplies visible context, a caption, and an optional screen-reader summary.
presentation	"default" \| "bare"	"default"	Uses bare inside a parent surface that already provides padding and a border.
aria-label	string	unset	Names the chart figure; include the measurement and reporting period.
showTable	boolean	true	Keeps the keyboard-accessible exact data disclosure available.
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.