@usevyre/react @usevyre/vue

Charts

Five zero-dependency SVG charts — no Recharts, no D3. All are data-driven (data + a config map of { label, color } per series), token-locked (colors come only from --vyre-* tokens), and ship gridlines, a hover tooltip, a click-to-toggle legend, and keyboard-accessible tooltips. Jump to a chart from the list below or the "On this page" rail.

Which chart should I use?

ChartUse it for
Line Chart Trends over time (revenue, signups). Multiple series, smooth curves.
Area Chart Volume / cumulative trends. Like Line but filled; gradient and stacked modes.
Bar Chart Compare categories (sales per region). Grouped or stacked, vertical or horizontal.
Pie Chart Parts of a whole (browser share). Pie or donut.
Sparkline Tiny inline chart for Stat cards and table cells. No axis/legend/tooltip.
Shared API. Every chart (except Sparkline) takes data, a config object mapping each series key to { label, color }, and xKey. Grid, legend and tooltip are boolean props (showGrid / showLegend / showTooltip). There is no color prop and no Recharts-style JSX children (<XAxis/>, <Tooltip/>) — colors live in config as --vyre-* tokens.

Line Chart

Multi-series trends over time. Two series (revenue, users) defined as config keys; one line per key, colors from --vyre-* tokens.

01020304050JanFebMarAprMayJunJulAug
 
import { LineChart, Card, CardBody } from "@usevyre/react";

const data = [
  { month: "Jan", revenue: 18, users: 12 },
  { month: "Feb", revenue: 22, users: 15 },
  { month: "Mar", revenue: 20, users: 17 },
  { month: "Apr", revenue: 28, users: 21 },
  { month: "May", revenue: 34, users: 26 },
  { month: "Jun", revenue: 31, users: 29 },
];

const config = {
  revenue: { label: "Revenue", color: "var(--vyre-color-semantic-accent)" },
  users:   { label: "Users",   color: "var(--vyre-color-semantic-teal)" },
};

<Card>
  <CardBody>
    <LineChart data={data} config={config} xKey="month" curve="smooth" dots />
  </CardBody>
</Card>

Props

Prop Type Default Description
data * ChartDatum[] — Array of row objects (required), e.g. [{ month: "Jan", revenue: 10 }].
config * ChartConfig — Per-series settings (required): { seriesKey: { label, color } }. Colors are token strings; one line per key.
xKey * string — Field in each row used for the x-axis (required), e.g. "month".
curve "linear" | "smooth" "linear" Line interpolation.
dots boolean false Draw a dot at each data point.
width number 480 SVG width in px.
height number 240 SVG height in px.
showGrid boolean true Show background grid lines and axis labels.
showLegend boolean true Show the legend; clicking a legend item toggles that series.
showTooltip boolean true Show the hover/arrow-key tooltip.

Area Chart

Filled trends (line + area). Supports a fade-to-transparent gradient (default) and stacked series.

020406080100JanFebMarAprMayJunJulAug
 
import { AreaChart, Card, CardBody } from "@usevyre/react";

const data = [
  { month: "Jan", revenue: 18, users: 12 },
  { month: "Feb", revenue: 22, users: 15 },
  { month: "Mar", revenue: 20, users: 17 },
  { month: "Apr", revenue: 28, users: 21 },
  { month: "May", revenue: 34, users: 26 },
  { month: "Jun", revenue: 31, users: 29 },
];

const config = {
  revenue: { label: "Revenue", color: "var(--vyre-color-semantic-accent)" },
  users:   { label: "Users",   color: "var(--vyre-color-semantic-teal)" },
};

<Card>
  <CardBody>
    <AreaChart data={data} config={config} xKey="month" curve="smooth" stacked />
  </CardBody>
</Card>

Props

Prop Type Default Description
data * ChartDatum[] — Array of row objects (required).
config * ChartConfig — Per-series settings (required): { seriesKey: { label, color } }. Colors are token strings.
xKey * string — Field in each row used for the x-axis (required).
curve "linear" | "smooth" "linear" Line/area interpolation.
gradient boolean true Fill each area with a fade-to-transparent gradient (false = flat low-opacity fill).
stacked boolean false Stack series on top of each other instead of overlaying.
width number 480 SVG width in px.
height number 240 SVG height in px.
showGrid boolean true Show background grid lines and axis labels.
showLegend boolean true Show the legend; clicking a legend item toggles that series.
showTooltip boolean true Show the hover/arrow-key tooltip.

Bar Chart

Category comparison. Multiple series render as grouped side-by-side bars or stacked; supports vertical and horizontal orientation.

010203040NAEUAPACLATAM
 
import { BarChart, Card, CardBody } from "@usevyre/react";

const data = [
  { region: "NA",    sales: 38, returns: 6 },
  { region: "EU",    sales: 31, returns: 5 },
  { region: "APAC",  sales: 27, returns: 4 },
  { region: "LATAM", sales: 14, returns: 3 },
];

const config = {
  sales:   { label: "Sales",   color: "var(--vyre-color-semantic-accent)" },
  returns: { label: "Returns", color: "var(--vyre-color-semantic-warning)" },
};

<Card>
  <CardBody>
    <BarChart data={data} config={config} xKey="region" />
  </CardBody>
</Card>

Props

Prop Type Default Description
data * ChartDatum[] — Array of row objects (required), e.g. [{ region: "NA", sales: 30 }].
config * ChartConfig — Per-series settings (required): { seriesKey: { label, color } }. One bar group per datum.
xKey * string — Field in each row used for the category axis (required).
orientation "vertical" | "horizontal" "vertical" Bar direction.
stacked boolean false Stack series per category instead of grouping them side-by-side.
width number 480 SVG width in px.
height number 240 SVG height in px.
showGrid boolean true Show background grid lines and axis labels.
showLegend boolean true Show the legend; clicking a legend item toggles that series.
showTooltip boolean true Show the hover/arrow-key tooltip.

Pie Chart

Parts of a whole. Takes flat { name, value } data (not multi-series rows, not numbers). config is optional; unmatched names use a built-in token color cycle. Set donut for a hollow center. 

import { PieChart, Card, CardBody } from "@usevyre/react";

const data = [
  { name: "Chrome",  value: 62 },
  { name: "Safari",  value: 19 },
  { name: "Firefox", value: 9 },
  { name: "Edge",    value: 7 },
  { name: "Other",   value: 3 },
];

const config = {
  Chrome:  { label: "Chrome",  color: "var(--vyre-color-semantic-accent)" },
  Safari:  { label: "Safari",  color: "var(--vyre-color-semantic-teal)" },
  Firefox: { label: "Firefox", color: "var(--vyre-color-semantic-warning)" },
  Edge:    { label: "Edge",    color: "var(--vyre-color-semantic-success)" },
  Other:   { label: "Other",   color: "var(--vyre-color-semantic-danger)" },
};

<Card>
  <CardBody>
    <PieChart data={data} config={config} donut />
  </CardBody>
</Card>

Props

Prop Type Default Description
data * PieDatum[] — Flat array of { name: string; value: number } objects (required).
config ChartConfig — Optional per-segment settings: { name: { label, color } }. Unmatched names use a token color cycle.
donut boolean false Render a hollow-center donut instead of a full pie.
size number 240 SVG width AND height in px (the chart is square).
showLegend boolean true Show the legend; clicking a legend item toggles that segment.
showTooltip boolean true Show the hover tooltip.

Sparkline

A tiny inline chart — no axis, legend, or tooltip — for Stat cards and table cells. Takes a flat number[] and a variant.

Revenue$48.2k+12%last 8 months
 
import { Sparkline, Stat, Card, CardBody } from "@usevyre/react";

<Card>
  <CardBody>
    <Stat
      label="Revenue"
      value="$48.2k"
      delta="+12%"
      trend="up"
      deltaLabel="last 8 months"
      icon={
        <Sparkline
          data={[18, 22, 20, 28, 34, 31, 40, 46]}
          color="var(--vyre-color-semantic-success)"
          width={96}
          height={28}
        />
      }
    />
  </CardBody>
</Card>

Three variants: line, area, bar.

 
import { Sparkline } from "@usevyre/react";

<Sparkline data={[3, 7, 4, 9, 6, 11, 8]} variant="line" />
<Sparkline data={[3, 7, 4, 9, 6, 11, 8]} variant="area" />
<Sparkline data={[3, 7, 4, 9, 6, 11, 8]} variant="bar" />

Props

Prop Type Default Description
data * number[] — Series of numbers to plot (required). A flat array of numbers, not row objects.
variant "line" | "area" | "bar" "line" Render style of the sparkline.
color string var(--vyre-color-semantic-accent) Stroke/fill color as a token string.
width number 80 SVG width in px.
height number 24 SVG height in px.

AI Context

Copy-paste context per chart for Claude, Cursor, Copilot, Windsurf, and Gemini. Each block is labelled with its component.

LineChart

AreaChart

BarChart

PieChart

Sparkline
← Carousel Checkbox →