Concepts
Common props
The props every chart takes, besides its own. Names follow each framework: camelCase in React and Angular, kebab-case in Vue templates, snake_case in Reflex.
Defaults
| Prop | Default | What it does |
|---|---|---|
data | demo dataset | The rows to draw. Without it the demo dataset renders; accessor props are ignored, every other prop applies. |
ground / substrate / mode | 'silverpoint' / 'cream' / 'ink' | Style; mode 'precision' turns off inking. |
seed, id | derived, stable | The hand drawing is deterministic: same props, same strokes. |
height, width | 160, container width | Size of the drawing area in px. |
chrome | 'card' | 'bare' draws only the plot. |
title, badge, value, unit, footerLeft, footerRight | — | The card's text. |
label, description, dataTable | from title, —, 'hidden' | Accessibility. |
locale, numberFormat | environment | Number formatting (Intl.NumberFormatOptions). |
hatchFill | 'tile' | 'per-shape' gives richer hatching at a much greater weight. |
Reference
| React / Angular | Vue | Reflex | Type | Description |
|---|---|---|---|---|
data | data | data | readonly Datum[] | Rows to draw. If omitted, the demo dataset is rendered (REQ-093) and the accessor props (…_key, keys, names) are ignored. |
ground | ground | ground | GroundRef | Style ground: silverpoint or cyanotype, or a ground object. Defaults to the app provider's, or silverpoint. |
substrate | substrate | substrate | SubstrateName | Prepared substrate within the ground (REQ-046). |
mode | mode | mode | InkMode | ink by default; precision disables inking (REQ-021). |
seed | seed | seed | Seed | Seed. If omitted, it is derived from id stably (REQ-003). |
id | id | id | string | Stable identifier. If omitted, it is generated deterministically. |
height | height | height | number | Height of the drawing area in px. Width is the container's unless pinned. |
width | width | width | number | — |
chrome | chrome | chrome | 'card' | 'bare' | card draws the full frame; bare only the drawing area (REQ-095). |
hatchFill | hatch-fill | hatch_fill | 'tile' | 'per-shape' | How areas are filled (REQ-029). |
title | title | title | string | — |
badge | badge | badge | string | — |
value | value | value | string | number | — |
unit | unit | unit | string | — |
footerLeft | footer-left | footer_left | string | — |
footerRight | footer-right | footer_right | string | — |
label | label | label | string | Accessible name. If omitted, it is derived from title (REQ-120). |
description | description | description | string | Long description for screen readers (REQ-120). |
dataTable | data-table | data_table | 'visible' | 'hidden' | 'none' | Tabular alternative; hidden leaves it for assistive technology only (REQ-121). |
locale | locale | locale | string | — |
numberFormat | number-format | number_format | Intl.NumberFormatOptions | — |
className | class-name | class_name | string | — |
Accessor props
Each chart names the fields of your rows with accessor props: xKey, valueKey, nameKey, keys… Their names and meaning are on each chart's reference page. In JavaScript an accessor can also be a function of the row.