Earnings chart
Earnings per period in money: the bars of the net amount, the total and the last period's change written above, the payout threshold as a line.
Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. A creator's earnings per period in Orochia's studio (PS-C).
Quand l’utiliser
- A creator's earnings page: net earnings per month, with the minimum to withdraw (Orochia /earnings).
- A treasury view: gross and net per month side by side (Orochia's console).
- The earnings card of the mobile app: the total in large, the bars under it.
Quand ne pas l’utiliser
- A count that is not money (jobs, views).À la place : Job throughput
- A trend over many points (a year of days).À la place : Line chart
- One figure against a goal.À la place : Goal progress
Installation
Installer
npm install @krizaka/chartsImporter
import { EarningsChart } from "@krizaka/charts/earnings";Exemples
A creator's months
Six months of net earnings, the payout threshold, the change of the last month.
Your earnings
$1,990.40earned over 6 months+16% vs September
Bar chart, 6 (May 2026 – Oct 2026). Net: from $182.40 to $512.90, lowest $182.40 (May 2026), highest $512.90 (Oct 2026), up 181%. Payout threshold at $50.00.
| Category | Net |
|---|---|
| May 2026 | $182.40 |
| Jun 2026 | $245.10 |
| Jul 2026 | $210.75 |
| Aug 2026 | $398.20 |
| Sep 2026 | $441.05 |
| Oct 2026 | $512.90 |
Gross and net
The treasury: gross and net per month side by side.
Creator earnings
Gross volume and what creators keep after fees
$57,506.75paid to creators over 4 months+16% vs last month
Bar chart, 2 × 4 (Jul 2026 – Oct 2026). Gross volume: from $12,480.00 to $21,045.00, lowest $12,480.00 (Jul 2026), highest $21,045.00 (Oct 2026), up 69%. Creators' net: from $10,608.00 to $17,888.25, lowest $10,608.00 (Jul 2026), highest $17,888.25 (Oct 2026), up 69%.
| Category | Gross volume | Creators' net |
|---|---|---|
| Jul 2026 | $12,480.00 | $10,608.00 |
| Aug 2026 | $15,920.00 | $13,532.00 |
| Sep 2026 | $18,210.00 | $15,478.50 |
| Oct 2026 | $21,045.00 | $17,888.25 |
Props
Earnings per period in money — the total, the change of the last period, the payout threshold.
| Prop | Type | Défaut | Description |
|---|---|---|---|
currencyrequis | string | — | The ISO 4217 currency ("USD", "EUR"). |
datarequis | readonly T[] | — | The rows, in the order of the x axis. |
netrequis | string | ((datum: T, index: number) => number | null | undefined) | — | The net amount of each period, in **minor units** (cents), as the ledger stores it. |
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. |
gross | string | ((datum: T, index: number) => number | null) | — | The gross amount (before fees), drawn beside the net when given. |
height | number | — | The height of the plot in pixels. Default 280 (a sparkline: 32). |
hideSummary | boolean | — | Hide the total and the change above the bars. |
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 | Partial<EarningsLabels> | — | The words, passed translated; English by default. |
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). |
payoutThreshold | Threshold | — | The minimum to withdraw, drawn as a line: { value: 5000, label: "Payout threshold" }. |
period | CategoryFormat | month | How the periods are written. Default "month" (Apr 2026). |
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). |
x | string | ((datum: T, index: number) => unknown) | "month" as Accessor<T, unknown> | The field (or function) of the period: an ISO month ("2026-04"), a day. Default "month". |
xLabel | string | — | The header of the categories in the data table (Month). |
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 total and the change are written in words under the title; the arrow beside the change is decorative.
- The plot is described by a summary written from the data and backed by a data table, as every chart of the package.
Clavier
| Touches | Action |
|---|---|
| Tab | Moves the focus to the plot, then to the data and export buttons. |
| Arrow keys | Walk the periods one by one: each amount is announced. |
Bonnes pratiques
- Pass the amounts in minor units (cents) as the ledger stores them, and the currency: the chart writes them.
- Keep the periods in time order; the change compares the last two periods.
- Say what the threshold means in its label (“Payout threshold”), never only its amount.
Composants liés
Générée depuis le code de @krizaka/ui 3.6.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub