Area chart

A filled field under the first series. Same law as the line: hairlines, texture, one optional spot.

1020PressMonFri
Sheetssheets
Chart data
LabelSheets
Mon8
Tue14
Wed12
Thu22
Fri18

Sheet

Density this run

The field is filled, not shaded. One series, one ink, one press mark.

Sheets

1020PressMonFri
Sheetssheets
Chart data
LabelSheets
Mon8
Tue14
Wed12
Thu22
Fri18

Install

npx @noordvc/raster-cli add area-chart

Markup

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

React

import { AreaChart } from "@/components/raster/chart";

<AreaChart
  height={204}
  labels={days}
  series={[{ name: "Sheets", values: sheets }]}
  unit="sheets"
  annotations={[{ at: 3, label: "Press" }]}
/>

Classes

.rs-chart-area

Depends on

/chart