Charts

A line on a 204 field. Hairline grid, ink marks. Series differ by texture: solid, dashed, gray, dotted. One optional Crouwel spot.

2040PressMonFri
SheetsProofssheets
Chart data
LabelSheetsProofs
Mon124
Tue186
Wed155
Thu269
Fri247

Run

Sheets this week

Two textures on one field. Spot is a single Crouwel red — not a rainbow.

2040PressMonFri
SheetsProofssheets
Chart data
LabelSheetsProofs
Mon124
Tue186
Wed155
Thu269
Fri247

Install

npx @noordvc/raster-cli 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 { LineChart } from "@/components/raster/chart";

<LineChart
  height={204}
  labels={days}
  series={[
    { name: "Sheets", values: sheets },
    { name: "Proofs", values: proofs },
  ]}
  unit="sheets"
  annotations={[{ at: 3, label: "Press" }]}
  spot
  inverted={false}
/>

Classes

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