Components
Line Chart
SketchLineChart — a hand-drawn line chart with sketched axes and data points.
SketchLineChart plots a series of labelled values as a rough.js line with sketched axes
and filled data-point circles. It's fluid — it fills the width of its container, so wrap
it to size it. Pass area to shade the region under the line.
Default
import { SketchLineChart } from "blackchalk";<SketchLineChartdata={[ { label: "Mon", value: 12 }, { label: "Tue", value: 28 }, { label: "Wed", value: 19 }, { label: "Thu", value: 44 }, { label: "Fri", value: 33 }, { label: "Sat", value: 51 },]}/>Area
Pass area to fill the region beneath the line.
import { SketchLineChart } from "blackchalk";<SketchLineChartdata={[ { label: "Mon", value: 12 }, { label: "Tue", value: 28 }, { label: "Wed", value: 19 }, { label: "Thu", value: 44 }, { label: "Fri", value: 33 }, { label: "Sat", value: 51 },]}area/>Props
| Prop | Type | Default |
|---|---|---|
data | { label: string; value: number }[] | — |
height | number | 250 |
area | boolean | false |
See it in the Storybook playground, or read the source.