Line chart
Change over time: one line per series, the last value written at its end, thresholds, markers and a crosshair tooltip.
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
- A trend over time: a creator's earnings per month, credits used per day, latency per hour.
- Two or three series compared over the same period (this year and last, two plans).
- A goal or a limit to read against the trend: a payout threshold, an objective, with
thresholds.
Quand ne pas l’utiliser
- Amounts compared across categories that are not time.À la place : Bar chart
- A volume whose parts add up to a total over time.À la place : Area chart
- A trend in a sentence, a table cell or a stat tile.À la place : Sparkline
Installation
Installer
npm install @krizaka/chartsImporter
import { LineChart } from "@krizaka/charts/line";Exemples
Creator earnings
Six months of a creator's earnings and tips in euros, with the payout threshold.
Earnings, last 6 months
Video sales and tips, before fees
Line chart, 2 × 6 (Apr 2026 – Sep 2026). Video sales: from €1,820.00 to €3,420.00, lowest €1,640.00 (May 2026), highest €3,420.00 (Sep 2026), up 88%. Tips: from €210.00 to €410.00, lowest €185.00 (May 2026), highest €410.00 (Sep 2026), up 95%. Payout threshold at €2,500.00.
| Month | Video sales | Tips |
|---|---|---|
| Apr 2026 | €1,820.00 | €210.00 |
| May 2026 | €1,640.00 | €185.00 |
| Jun 2026 | €2,310.00 | €260.00 |
| Jul 2026 | €2,980.00 | €310.00 |
| Aug 2026 | €2,760.00 | €355.00 |
| Sep 2026 | €3,420.00 | €410.00 |
Forecast
The months to come dashed after the actual ones, a marker on a launch.
Inference requests per week
Actual, then forecast
Line chart, 2 × 7 (Jul 6 – Aug 17). Actual: from 41.2K to 52.8K, lowest 41.2K (Jul 6), highest 52.8K (Jul 27), up 28%. Forecast: from 52.8K to 66.3K, lowest 52.8K (Jul 27), highest 66.3K (Aug 17), up 26%.
| Category | Actual | Forecast |
|---|---|---|
| Jul 6 | 41.2K | — |
| Jul 13 | 43.9K | — |
| Jul 20 | 47.1K | — |
| Jul 27 | 52.8K | 52.8K |
| Aug 3 | — | 57.4K |
| Aug 10 | — | 61K |
| Aug 17 | — | 66.3K |
Live data
A sliding window of jobs per minute, appended as they arrive (useSlidingWindow, live).
Jobs completed per minute
Line chart, 10 (2:20 PM – 2:29 PM). Jobs: from 18 to 35, lowest 18 (2:20 PM), highest 37 (2:28 PM), up 94%.
| Category | Jobs |
|---|---|
| 2:20 PM | 18 |
| 2:21 PM | 22 |
| 2:22 PM | 19 |
| 2:23 PM | 25 |
| 2:24 PM | 31 |
| 2:25 PM | 28 |
| 2:26 PM | 26 |
| 2:27 PM | 33 |
| 2:28 PM | 37 |
| 2:29 PM | 35 |
Loading, empty, error
The three states at the chart's own height: no layout shift when the data arrives.
Views (loading)
No data for this period yet.
Views (no data yet)
No data for this period yet.
Views (failed)
No data for this period yet.
Props
Change over time: one line per series, the last value written at its end, a crosshair tooltip, the keyboard.
| 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). |
curve | Curve | — | The shape between points: monotone (default, never overshoots), linear, step (a value that holds). |
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. |
dots | boolean | — | A dot on every point (short series). Default false: the end of each line carries one. |
empty | ReactNode | — | What to show when there is nothing to draw (default: the empty label). An EmptyState of
@krizaka /ui fits. |
endLabels | boolean | true | Write the last value at the end of each line (up to three series). Default true. |
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. |
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. |
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. |
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.
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 point (calls onSelect with its row). |
Bonnes pratiques
- Give dates as ISO strings (
2026-04,2026-04-12): the axis writes them in the reader's locale, by their precision. - Store money as integer minor units and say so with
format={{ style: "money", currency }}: the axis goes compact, the tooltip exact. - Keep to three series or fewer; past that, split into small multiples or fold the rest into one series.
- Dash a forecast or a previous period (
dashed), never a different colour for the same measure. - Write the title as what the chart answers (“Earnings, last 6 months”): it is the accessible name.
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