Zenv0.6.1
Storybook

Components

Chart

Areas, lines and bars on one axis, and a donut: plain SVG that draws itself in, with a crosshair tooltip, keyboard reading, a legend and a table for screen readers.

  • Balance
  • Projected
Balance grows from ₹4.2L in April to a projected ₹10.2L next March.
Balance over time
monthBalanceProjected
Apr₹4.2L
May₹5.1L
Jun₹3.8L
Jul₹4.6L
Aug₹6.2L
Sept₹7.1L₹7.1L
Oct₹6.4L
Nov₹7.9L
Dec₹8.8L
Jan₹7.6L
Feb₹9.4L
Mar₹10.2L

Import

import { Chart, ChartArea, ChartLine, ChartBar, ChartReference, ChartTooltipCard, DonutChart } from '@rinzai/zen';

Examples

Cashflow

Bars grouped by month with a line on the same axis; months still to come are faded.

  • Income
  • Spending
  • Net
Income and spending by month
monthIncomeSpendingNet
Apr₹92K₹61K₹31K
May₹92K₹74K₹18K
Jun₹98K₹58K₹40K
Jul₹98K₹1L-₹5K
Aug₹98K₹66K₹32K
Sep₹1.1L₹71K₹41K
Oct₹1.1L₹69K₹43K
Nov₹1.1L₹80K₹32K

Lines

Several series in the chart palette, in the order they're written; the legend appears for two or more.

  • Web
  • iOS
  • Android
Sessions by platform
dayWebiOSAndroid
Mon420310220
Tue480330260
Wed510360250
Thu470390300
Fri560380330
Sat690450310
Sun640470360

Donut

Parts of a whole with the total in the middle, and a legend of your own beside it.

Spent
₹61,200
  • Home₹28,000
  • Food₹14,500
  • Travel₹9,200
  • Fun₹6,100
  • Other₹3,400

API reference

<Chart>

A chart on one axis: areas, lines and bars over rows of data (e.g. months), with a recessive grid, a crosshair and a tooltip listing every series at the pointer (or keyboard: focus it and use the arrow keys), a legend for two or more series, and a table of the values for screen readers. Series draw in as they appear. Colours default to the chart palette (--chart-1…8) in the order the series are written; give each its own color for meaning (e.g. the theme's glow).

PropTypeDefault
childrenRequired

ChartArea, ChartLine, ChartBar and ChartReference parts.

ReactNode—
dataRequired

One row per point on the x axis (e.g. a month).

readonly T[]—
labelRequired

Names the chart for screen readers.

string—
xRequired

The row field placed along the x axis.

string—
className
string—
formatTooltipX

The tooltip's title for an x value (defaults to formatX).

((value: T[X]) => string)—
formatX

Axis labels for x values.

((value: T[X]) => string)—
formatY

Axis ticks and tooltip values (defaults to compact numbers: 1.2K).

((value: number) => string)(n: number) => compactFormat.format(n)
height

Height in px, including the axis labels.

number240
legend

Show the legend. Defaults to on for two or more series.

boolean—
renderTooltip

Your own tooltip for a row (build it from ChartTooltipCard).

((row: T, index: number) => ReactNode)—
summary

A sentence on what the chart shows, for screen readers (e.g. its highest and lowest points).

string—

<ChartArea>

A line with a soft fill down to the baseline.

PropTypeDefault
dataKeyRequired

The row field holding this series' values (numbers; null for none).

string—
labelRequired

Its name in the legend, the tooltip and the table.

string—
color

Any CSS colour. Defaults to the next of --chart-1…8.

string—
curve

Smooth (default) or straight between points.

"linear" | "monotone"—
dashed

Dashed (e.g. a projection).

boolean—

<ChartLine>

A 2px line. Gaps (null values) break it, so one series can be split into solid and dashed parts.

PropTypeDefault
dataKeyRequired

The row field holding this series' values (numbers; null for none).

string—
labelRequired

Its name in the legend, the tooltip and the table.

string—
color

Any CSS colour. Defaults to the next of --chart-1…8.

string—
curve

Smooth (default) or straight between points.

"linear" | "monotone"—
dashed

Dashed (e.g. a projection).

boolean—

<ChartBar>

Bars, grouped with the other bar series, growing from the baseline.

PropTypeDefault
dataKeyRequired

The row field holding this series' values (numbers; null for none).

string—
labelRequired

Its name in the legend, the tooltip and the table.

string—
color

Any CSS colour. Defaults to the next of --chart-1…8.

string—
dim

Rows whose bar is faded, e.g. months still to come.

((row: Row, index: number) => boolean)—

<ChartReference>

A marker across the plot: a horizontal line at y (e.g. zero), or a vertical one at the row whose x is x (e.g. today).

PropTypeDefault
dashed

Vertical lines are dashed unless dashed={false}; horizontal ones solid unless dashed.

boolean—
label

Text beside a vertical line, e.g. "Today".

string—
tone

Destructive for a line that warns (e.g. below zero).

"destructive" | "muted"—
x

A vertical line at the row whose x field equals this.

unknown—
y

A horizontal line at this value.

number—

<ChartTooltipCard>

No props of its own; it accepts the props of the element it renders.

<DonutChart>

No props of its own; it accepts the props of the element it renders.