Chart card

Web only — React, from @krizaka/charts/card. Beta: its API may still change in a minor version.

Why it is here. The one frame of every chart of Orazaka's dashboard and usage pages (#253).

Installation

Install

npm install @krizaka/charts

Import

import { ChartCard } from "@krizaka/charts/card";

Examples

Props

Accessibility

• The chart keeps its data table in the page, its written summary and its keyboard walk inside the card.
• The actions menu is a real menu: arrow keys, Escape, focus returned to the ⋯ button; the table opens in a sheet with a focus trap.
• Legend chips are toggle buttons (aria-pressed); the last visible series cannot be switched off.

Best practices

• Write the insight from the data, in one line: the figure first, then the change (100 jobs · +100 % vs last week).
• Leave the chart without a title: the card hands it its own, which stays the chart's accessible name.
• Zoom the time axis on the period that has data with autoRange rather than drawing empty days.
• Keep the footer for the source and the freshness; never a second insight.

Related components

• KPI statA key figure with its change against the previous period and a sparkline of the period, on the kit's Stat.
• Line chartChange over time: one line per series, the last value written at its end, thresholds, markers and a crosshair tooltip.
• Bar chartAmounts compared across categories: grouped, stacked or horizontal bars, each value written at its tip.
• Pie and donut chartPart of a whole: slices sorted by size, folded into “Other” past six, each share written in the legend; a donut carries the total in its hole.
• SparklineA word-sized trend without axes — in a stat, a table cell or a sentence — drawn on the server when its width is known.

Generated from the code of @krizaka/ui 3.19.0: its meta.ts, its examples and its types.Edit this documentation on GitHub