Setup

Add @viraui/charts and @visx/visx to a themed ViraUI React app.

Charts are an optional add-on. Theme CSS, fonts, preflight, and overlay roots stay with the design-system Setup. This page only adds @viraui/charts and its @visx/visx peer, then a sample plot that picks up the theme.

The agent composes charts through viraui-design once those skills are already loaded from the design-system Setup. If the app is not themed yet, finish that Setup first, then come back here.

Requirements

  • A React app already bootstrapped with @viraui/react (theme + preflight + overlay roots)
  • A Node-capable package manager
  • A coding agent that can edit the repo and run installs
  • @visx/visx as the only charts peer beyond React / React DOM

Setup

Install the charts packages

Add the charts package and the visx peer. Keep the versions in the range the charts package declares.

Install @viraui/charts
pnpm add @viraui/charts @visx/visx

Add a sample chart with your agent

Paste the Setup prompt after the packages are installed. Point the agent at the already-themed app so it only wires a plot — not a second design-system bootstrap.

Use Verify when the sample renders so the agent smoke-checks theme colors and a fluid host.

This app already uses ViraUI. Add a simple line chart with the charts package so it picks up theme colors for strokes and fills, and show it in a fluid host that resizes with its container.

Manual fallback

Only when you must wire by hand. Prefer the prompts above.

  1. Install @viraui/charts and @visx/visx (same major as the charts peer range).
  2. Keep theme CSS → fonts → @viraui/react/preflight.css from design-system Setup. Charts ship no extra CSS entry.
  3. Import primitives from @viraui/charts (not deep package paths).
  4. Compose scales, marks, and axes in a client component; wrap fluid hosts with ParentSize or useParentSize when the plot should fill its container.

Verify by hand: a sample chart uses theme colors, light/dark still resolve, and the plot is not clipped to zero width in a fluid host.

Last updated on

Overview

What @viraui/charts is — token-styled visx primitives that sit beside @viraui/react.

Responsive

Size charts from the parent, the viewport, or a fixed ScaleSVG viewBox — plus a mobile scrub shell.

On this page

RequirementsSetupInstall the charts packagesAdd a sample chart with your agentManual fallback