Charts

SVG line, bar, sparkline, donut. Hairline grid, ink marks. Series differ by texture: solid, dashed, gray, dotted.

RevenueCosts

Chart data
Label	Revenue	Costs
Jan	12	8
Feb	18	9
Mar	15	11
Apr	26	12
May	24	14
Jun	34	15

Install

npx raster add chart

Markup

<div class="rs-chart"><svg viewBox="0 0 240 64" width="240" height="64"><line class="rs-chart-grid" x1="0" x2="240" y1="56" y2="56"/><path class="rs-chart-line" d="M0 44 L40 36 L80 40 L120 22 L160 26 L200 12 L240 16"/></svg></div>

React

import { BarChart, Donut, LineChart, Sparkline } from "@/components/raster/chart";

<LineChart
  labels={months}
  series={[
    { name: "Revenue", values: revenue },
    { name: "Costs", values: costs },
  ]}
  area
/>

<BarChart data={[{ label: "Q1", value: 42 }, { label: "Q2", value: 58 }]} />
<Sparkline values={[12, 18, 15, 26, 24, 34]} />
<Donut value={72} label="complete" />

Classes

.rs-chart.rs-chart-line.rs-chart-grid.rs-chart-axis.rs-chart-bar.rs-spark