Overview
What @viraui/charts is — token-styled visx primitives that sit beside @viraui/react.
@viraui/charts wraps visx primitives with Vira theme tokens for stroke, fill, and chrome. You compose scales, marks, axes, and tooltips the same way you would with visx — the package styles the defaults so plots match light and dark mode without a separate chart CSS layer.
It is a peer of @viraui/react, not a replacement. Theme, preflight, and overlay roots still come from the design-system Setup. Charts add @viraui/charts plus @visx/visx.
When to reach for it
- Dashboards and analytics surfaces that need Cartesian, pie, or radar plots
- Fluid hosts where the plot should resize with
ParentSize/useParentSize - Hover readouts built from visx tooltip helpers, styled with theme tokens
Chart families
- Line — curves, multi-series, markers, labels
- Area — filled series, gradient, stacked
- Bar — vertical, horizontal, grouped, stacked, negative
- Pie — slices, donut, legend, interactive
- Radar — polar series, grid, legend
Sizing patterns live under Responsive. Tooltip compose lives under Tooltips. Series and chrome overrides live under Overrides.
Ask your agent
Add a ViraUI charts package to this app and explain which chart type fits a monthly visitors trend with desktop and mobile series.Last updated on