Visual guides / Chart animation

Let the data keep its place.

Animate line, area, and bar updates. Inspect linked charts and try loading, empty, and reduced-motion states.

Show how values changed without replacing the whole chart. Keep IDs stable and let accessible data update immediately.

Loading the interactive workbench…

Start building

Load your adapter stylesheet once. Astro needs its client runtime for enhanced interactions; React manages its own lifecycle; Elements needs client registration.

---
// 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:
import '@santi020k/lumen-react/styles.css'

// Import components from the public package:
import { ChartMotion, LineChart, BarChart } from '@santi020k/lumen-react'

// pnpm add @santi020k/lumen-elements
// In your client entry, processed by a bundler:
import '@santi020k/lumen-elements/styles.css'
import { defineLumenElements } from '@santi020k/lumen-elements'

defineLumenElements(['ChartMotion', 'LineChart', 'BarChart'])

Starter example

The React example includes local state. Astro and Elements show the component structure; your client code owns data updates and event handlers.

'use client'

import { useState } from 'react'
import { Button, ChartMotion, LineChart } from '@santi020k/lumen-react'

export function ProgressChart() {
  const [values, setValues] = useState([12, 18, 16, 24])
  const series = [{ id: 'progress', label: 'Progress', data: values.map((y, x) => ({
    id: String(x), x, y
  })) }]
  return <>
    <Button onClick={() => setValues(current => current.map(value => 52 - value))}>
      Update values
    </Button>
    <ChartMotion>
      <LineChart heading="Progress" series={series} markers="all" interactive />
    </ChartMotion>
  </>
}

---
import { ChartMotion, LineChart } from '@santi020k/lumen-astro'
const series = [{ id: 'progress', label: 'Progress', data: [
  { id: 'mon', x: 'Mon', y: 12 },
  { id: 'tue', x: 'Tue', y: 18 }
] }]
---
<ChartMotion>
  <LineChart heading="Progress" series={series} markers="all" interactive />
</ChartMotion>

<lumen-chart-motion>
  <lumen-line-chart heading="Progress" markers="all" interactive
    series='[{"id":"progress","label":"Progress","data":[{"id":"mon","x":"Mon","y":12},{"id":"tue","x":"Tue","y":18}]}]'>
  </lumen-line-chart>
</lumen-chart-motion>
<!-- Update the chart series property from your application to animate changes. -->

Adapter setup: Astro · React · Elements.

Before you ship

Wrap a LineChart or BarChart in ChartMotion. Filled line areas are supported too.
Keep series IDs and datum IDs stable across refreshes. Duplicate identities skip ambiguous animation.
Tables, summaries, and inspection values update immediately. Animation should never delay access to the latest data.
Use interactive and syncGroup for linked inspection. Keep transport, playback, loading, and refresh state in your application.
Path interpolation depends on browser support; immediate rendering remains usable. Avoid animating thousands of marks at once.

Component reference

Find props, events, keyboard behavior, and Astro, React, and Elements examples for each primitive.

Explore more chart types in the data visualization guides.

Next: AI interfaces