LCLiveCharts

Roadmap

Planned framework bindings, plain HTML usage, and design-system integrations

LiveCharts ships a framework-agnostic canvas engine today, with a React binding on top. This page is what we intend to build next — not a promise of dates.

The core stays the same: one LiveChartEngine, one rAF loop, opt-in features. Bindings and integrations wrap that engine; they do not fork the drawing logic.

Status today

SurfaceStatus
livecharts (engine + types)Shipped (0.1.0)
livecharts/reactShipped
livecharts/vueShipped
livecharts/data (pushTick, walker, candles)Shipped
Nuxt modulePlanned (optional)
Astro / plain HTML / Web ComponentsPlanned
Chrome slots / shadcn recipesChrome slots shipped; shadcn recipes next
AccessibilityKeyboard scrub + live region shipped

See Architecture for how the layers split.

Framework bindings

Vue

livecharts/vue ships <LiveChart />, LiveChartTransition, and useLiveChartEngine for Vue 3 — near parity with React.

Still planned: optional Nuxt module if demand shows up.

Astro & plain HTML

Astro and static sites need a chart that does not assume a React tree:

  • Astro — client island or a small script that owns the canvas
  • Vanilla HTML / JSnew LiveChartEngine(canvas) with your own feed loop
  • Optionally a Web Component wrapper so markup stays declarative: <live-chart></live-chart>

The engine already supports this path; the work is docs, examples, and a polished package entry (e.g. livecharts/html or a custom element) so you are not wiring lifecycle by hand.

Other frameworks

Svelte, Solid, and similar hosts are in the same bucket: thin bindings over the shared engine once Vue/HTML patterns are settled. No separate canvas engines.

Design systems & shadcn

LiveCharts is a chart, not a full UI kit — but it should sit cleanly next to component libraries.

Exploring next:

  • Chrome slots / render props — shipped: renderWindows / renderModeToggle / renderSeriesToggle (React) and #windows / #mode-toggle / #series-toggle (Vue). See Chrome slots
  • Accessibility v1 — shipped: keyboard scrub + polite live region. See Accessibility
  • shadcn/ui-style recipes — copy-paste chart shells themed with CSS variables
  • Token alignment — map theme / accent to common design tokens
  • Possible Sora UI / registry snippets later if that distribution model fits

This is additive: the npm package stays lean; kits and registry items live as optional docs or separate templates.

Chart features (engine)

Bindings aside, engine work we care about:

  • Better multi-series ergonomics and legends
  • More window / scrubbing polish
  • Stronger SSR / hydration guidance for Next, Nuxt, and Astro
  • Performance notes for dense feeds

Priorities shift with real usage — open an issue if something blocks you.

Feedback

Roadmaps change. If Vue, Astro, plain HTML, or shadcn integration matters for your project, say so on GitHub — that is how we order the queue.

On this page