Data visualization / Guide
Set up Lumen charts
Install and configure accessible Lumen charts in Astro, React, or Web Components.
One import. Your framework.
Charts ship with the existing Lumen packages. Install the adapter you use and load its complete stylesheet once. No additional chart package is needed.
---
// pnpm add @santi020k/lumen-astro
// In your root layout:
import '@santi020k/lumen-astro/styles.css'
import UIPrimitives from '@santi020k/lumen-astro/runtime'
---
<slot />
<UIPrimitives />// pnpm add @santi020k/lumen-react
// In your application entry or root layout:
import '@santi020k/lumen-react/styles.css'
// Import chart components where you use them:
import { LollipopChart, DumbbellChart, BulletChart } from '@santi020k/lumen-react'// pnpm add @santi020k/lumen-elements
// In your client entry, processed by your bundler:
import '@santi020k/lumen-elements/styles.css'
import { defineLumenElements } from '@santi020k/lumen-elements'
defineLumenElements(['LollipopChart', 'DumbbellChart', 'BulletChart'])Complete setup: Astro · React · Web Components. In a React Server Components app, keep formatter functions inside a client component; they cannot cross a server-to-client boundary.