Bar chart
Amounts compared across categories: grouped, stacked or horizontal bars, each value written at its tip.
Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Counts per category or per period: jobs per day by status, revenue per plan.
- A ranking with long names, as horizontal bars: top supporters, busiest models.
- The parts of a total per category, stacked: completed, failed and queued jobs.
Quand ne pas l’utiliser
- A continuous trend over many points.À la place : Line chart
- Two dimensions of the same measure (weekday × hour).À la place : Heatmap
- Stages that lose people on the way.À la place : Funnel
Installation
Installer
npm install @krizaka/chartsImporter
import { BarChart } from "@krizaka/charts/bar";Exemples
Jobs by status
A week of Orazaka jobs per day, stacked by status in the status tones.
Jobs per day, by status
Orazaka · all workspaces
Bar chart, 3 × 7 (Oct 5 – Oct 11). Completed: from 1,240 to 986, lowest 986 (Oct 11), highest 1,934 (Oct 9), down 20%. Failed: from 38 to 12, lowest 12 (Oct 11), highest 95 (Oct 7), down 68%. Queued: from 12 to 63, lowest 9 (Oct 10), highest 63 (Oct 11), up 425%.
| Category | Completed | Failed | Queued |
|---|---|---|---|
| Oct 5 | 1,240 | 38 | 12 |
| Oct 6 | 1,612 | 41 | 20 |
| Oct 7 | 1,505 | 95 | 31 |
| Oct 8 | 1,788 | 27 | 18 |
| Oct 9 | 1,934 | 33 | 44 |
| Oct 10 | 1,102 | 19 | 9 |
| Oct 11 | 986 | 12 | 63 |
Ranking
Horizontal bars: a creator's top supporters, the value at each tip.
Top supporters this quarter
Bar chart, 6 (Léa Fontaine – Amira Haddad). Total: from €485.00 to €120.50, lowest €120.50 (Amira Haddad), highest €485.00 (Léa Fontaine), down 75%.
| Supporter | Total |
|---|---|
| Léa Fontaine | €485.00 |
| Marcus Oyelaran | €362.00 |
| Hana Watanabe | €299.00 |
| Tomás Ferreira-Lindqvist | €214.00 |
| Eric Dubois | €178.00 |
| Amira Haddad | €120.50 |
Grouped
Revenue per plan, grouped by quarter.
Revenue per plan (k€)
Bar chart, 3 × 4 (Q4 2025 – Q3 2026). Starter: from 18 to 22, lowest 18 (Q4 2025), highest 24 (Q2 2026), up 22%. Pro: from 42 to 66, lowest 42 (Q4 2025), highest 66 (Q3 2026), up 57%. Studio: from 26 to 61, lowest 26 (Q4 2025), highest 61 (Q3 2026), up 135%.
| Quarter | Starter | Pro | Studio |
|---|---|---|---|
| Q4 2025 | 18 | 42 | 26 |
| Q1 2026 | 21 | 51 | 34 |
| Q2 2026 | 24 | 58 | 47 |
| Q3 2026 | 22 | 66 | 61 |
Props
Compare amounts across categories: grouped, stacked or horizontal bars, each value at its tip.
| Prop | Type | Défaut | Description |
|---|---|---|---|
datarequis | readonly T[] | — | The rows, in the order of the x axis. |
titlerequis | string | — | What the chart shows, in a few words: its accessible name, and its heading unless hideTitle. |
brand | BrandId | — | The brand whose palette the charts use. Without it, a chart follows a .brand-<id> ancestor, else Krizaka. Set it
when the app loads a brand stylesheet on :root (@krizaka/tokens/brands/orazaka.css). |
className | string | — | A class on the figure (layout: margins, grid placement). |
dataTable | boolean | — | The "Show data" button (the table is in the page for screen readers either way). Default true. |
description | ReactNode | — | A sentence under the title: the period, the unit, the source. |
empty | ReactNode | — | What to show when there is nothing to draw (default: the empty label). An EmptyState of
@krizaka /ui fits. |
error | ReactNode | — | The data could not be loaded: true says the default words, a node says yours (a retry button…). |
exportable | boolean | readonly ExportFormat[] | — | Export buttons: true for PNG, SVG and CSV, or the formats you want. |
format | ValueFormat | — | How the values are written (axis, tooltip, table, summary). Default "number". |
height | number | — | The height of the plot in pixels. Default 280 (a sparkline: 32). |
hideTitle | boolean | — | Visually hide the title (it stays the chart's accessible name): a card that already has its heading. |
horizontal | boolean | — | Bars grow to the right, the categories down the side: long labels, rankings. |
id | string | — | The id of the figure. |
labels | ChartLabelsInput | — | The words, translated: the buttons, the states, the written summary. |
legend | boolean | — | Show the legend (from two series). Default true. |
live | boolean | — | Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point. |
loading | boolean | — | The data is on its way: a skeleton of the chart, announced once. |
locale | Locale | — | The locale of every figure and date ("fr-FR"). Default "en-US". |
markers | readonly Marker[] | — | Vertical markers at a category: a launch, an incident. |
onSelect | ((datum: T, index: number) => void) | — | Called with the row when a point or a bar is clicked (or Enter is pressed on it). |
series | readonly SeriesSpec<T>[] | — | The series to draw, each with its field and its name; the palette follows their order. |
stacked | boolean | — | Stack the series in one bar per category (a total and its parts); default: grouped side by side. |
style | CSSProperties | — | Inline style on the figure (layout only: colours come from the tokens). |
summary | "hidden" | "visible" | — | The written summary: read by screen readers only ("hidden", default), or shown under the chart ("visible"). |
summaryText | string | — | Your own summary instead of the generated one (still read first by screen readers). |
thresholds | readonly Threshold[] | — | Horizontal lines at a value: a goal, a payout threshold. |
valueLabels | boolean | true | Write each value at the tip of its bar (one series, up to 16 bars). Default true. |
x | string | ((datum: T, index: number) => unknown) | — | The field (or function) of the category: a month ("2026-04"), a day, a label. Default: the row's position. |
xFormat | CategoryFormat | — | How the categories are written. Default: dates by their precision (2026-04 → Apr 2026), text as is. |
xLabel | string | — | The header of the categories in the data table (Month). |
y | string | ((datum: T, index: number) => number | null) | — | A single series: its field. Use series for several. |
yLabel | string | — | The name of the single y series (legend, tooltip, table). Default: the field's name. |
zero | boolean | — | Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero. |
Accessibilité
- The plot is a group named by the title and described by a summary written from the data (extremes, trend), read before anything else.
- The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
- Colour never carries a meaning alone: a legend from two series, direct labels, the table.
- The entrance plays once, when the chart comes on screen, and never under reduced motion.
- A 2 px gap separates the stacked segments, so neighbours stay apart without relying on their colours.
Clavier
| Touches | Action |
|---|---|
| Tab | Moves the focus to the plot (one tab stop), then to the data and export buttons. |
| Arrow keys | Walk the points one by one: each is announced and its tooltip shown. |
| Home / End | Jump to the first or the last point. |
| Esc | Hides the tooltip and clears the active point. |
| Enter | Selects the active bar (calls onSelect with its row). |
Bonnes pratiques
- Sort a ranking by value; keep time in its own order.
- Bars always start at zero: a bar's length is its value.
- Stack at most four parts; give each a word in the legend, never a colour alone.
- Use the status tones (
color: "danger") for statuses only, never for an ordinary series.
Composants liés
Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub