@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 ChartTrends over time (revenue, signups). Multiple series, smooth curves.
Area ChartVolume / cumulative trends. Like Line but filled; gradient and stacked modes.
Bar ChartCompare categories (sales per region). Grouped or stacked, vertical or horizontal.
Pie ChartParts of a whole (browser share). Pie or donut.
SparklineTiny inline chart for Stat cards and table cells. No axis/legend/tooltip.
Shared API. Every chart (except Sparkline) takesdata, 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

PropTypeDefaultDescription
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.
dotsbooleanfalseDraw a dot at each data point.
widthnumber480SVG width in px.
heightnumber240SVG height in px.
showGridbooleantrueShow background grid lines and axis labels.
showLegendbooleantrueShow the legend; clicking a legend item toggles that series.
showTooltipbooleantrueShow 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

PropTypeDefaultDescription
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.
gradientbooleantrueFill each area with a fade-to-transparent gradient (false = flat low-opacity fill).
stackedbooleanfalseStack series on top of each other instead of overlaying.
widthnumber480SVG width in px.
heightnumber240SVG height in px.
showGridbooleantrueShow background grid lines and axis labels.
showLegendbooleantrueShow the legend; clicking a legend item toggles that series.
showTooltipbooleantrueShow the hover/arrow-key tooltip.

Bar Chart

Category comparison. Multiple series render as grouped side-by-side bars orstacked; supports vertical and horizontalorientation.

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

PropTypeDefaultDescription
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.
stackedbooleanfalseStack series per category instead of grouping them side-by-side.
widthnumber480SVG width in px.
heightnumber240SVG height in px.
showGridbooleantrueShow background grid lines and axis labels.
showLegendbooleantrueShow the legend; clicking a legend item toggles that series.
showTooltipbooleantrueShow 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

PropTypeDefaultDescription
data*PieDatum[]—Flat array of { name: string; value: number } objects (required).
configChartConfig—Optional per-segment settings: { name: { label, color } }. Unmatched names use a token color cycle.
donutbooleanfalseRender a hollow-center donut instead of a full pie.
sizenumber240SVG width AND height in px (the chart is square).
showLegendbooleantrueShow the legend; clicking a legend item toggles that segment.
showTooltipbooleantrueShow 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

PropTypeDefaultDescription
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.
colorstringvar(--vyre-color-semantic-accent)Stroke/fill color as a token string.
widthnumber80SVG width in px.
heightnumber24SVG 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

← CarouselCheckbox →