Data displayGlass surface
PieChart
Shows part-to-whole relationships as an accessible donut or pie chart.
01
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.
Framework usage
1 series, 4 points. Values range from 8 to 46.
- Astro
- React
- Web Components
- Other
2,480 Projects
View chart data
| Category | Value | Share |
|---|---|---|
| Astro | 46 | 46% |
| React | 31 | 31% |
| Web Components | 15 | 15% |
| Other | 8 | 8% |
Framework usage
Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens andui-* class contract.---
import { PieChart } from '@santi020k/lumen-astro'
const series = {
data: [
{ label: 'Astro', x: 'astro', y: 46 },
{ label: 'React', x: 'react', y: 31 },
{ label: 'Web Components', x: 'elements', y: 15 },
{ label: 'Other', x: 'other', y: 8 }
],
id: 'frameworks',
label: 'Framework share'
}
---
<PieChart
aria-label="Package usage by framework"
caption="Share of active Lumen projects."
centerLabel="Projects"
centerValue="2,480"
heading="Framework usage"
{series}
/>import { PieChart } from '@santi020k/lumen-react'
export const Example = () => (
<>
<PieChart
aria-label="Package usage by framework"
caption="Share of active Lumen projects."
centerLabel="Projects"
centerValue="2,480"
heading="Framework usage"
{series}
/>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-pie-chart
aria-label="Package usage by framework"
caption="Share of active Lumen projects."
centerLabel="Projects"
centerValue="2,480"
heading="Framework usage"
{series}></lumen-pie-chart>02
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-astropnpm add @santi020k/lumen-astrolumen add PieChartlumen add PieChartpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add PieChart --target reactlumen add PieChart --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add PieChart --target elementslumen add PieChart --target elementsGlass
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.
Framework share
1 series, 3 points. Values range from 13 to 58.
- Astro
- React
- Elements
1,280 Projects
View chart data
| Category | Value | Share |
|---|---|---|
| Astro | 58 | 58% |
| React | 29 | 29% |
| Elements | 13 | 13% |
Framework usage
Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens andui-* class contract.---
import { PieChart } from '@santi020k/lumen-astro'
const series = {
data: [
{ label: 'Astro', x: 'astro', y: 58 },
{ label: 'React', x: 'react', y: 29 },
{ label: 'Elements', x: 'elements', y: 13 }
],
id: 'frameworks',
label: 'Framework share'
}
---
<div class="docs-glass-demo">
<PieChart
aria-label="Framework share"
centerLabel="Projects"
centerValue="1,280"
glass
heading="Framework share"
{series}
/>
</div>import { PieChart } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo">
<PieChart
aria-label="Framework share"
centerLabel="Projects"
centerValue="1,280"
glass
heading="Framework share"
{series}
/>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo">
<lumen-pie-chart
aria-label="Framework share"
centerLabel="Projects"
centerValue="1,280"
glass
heading="Framework share"
{series}></lumen-pie-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.
| 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 one already-aggregated series whose positive finite data points become slices. |
| variant | "donut" | "pie" | "donut" | Uses a center opening by default or renders a traditional pie. |
| centerLabel, centerValue | string | ReactNode | - | Adds optional visual summary content in the donut center. |
| showLegend | boolean | true | Shows the color-independent category key. |
| showTable | boolean | true | Provides a revealable semantic table with category, value, and share columns. |
| valueFormatter | (value: number) => string | String | Formats values in SVG titles and the semantic table for Astro and React; Web Components expose the equivalent JavaScript property. |
| 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. |