Credit usage

What is left of an allowance: the remaining amount in large, a meter that turns to warning then danger, the use per day and the day it runs out.

Web + MobileBetaCharts

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Orazaka's credits left and Orochia's allowance (PS-C ready-made charts).

When to use

Orazaka's billing: the credits left this month and when they run out at the current pace.
A storage plan (Orochia's console): gigabytes used of the plan, with a unit format.
Any quota that renews: API calls, minutes of video.

When not to use

Money raised towards a goal.Use instead: Goal progress
A value in a range with no notion of running out (a load, a score).Use instead: Gauge

Installation

Install

npm install @krizaka/charts

Import

import { CreditUsage } from "@krizaka/charts/credits";

Examples

Monthly credits

An Orazaka plan: credits left, the daily use, the run-out date.

Credits this month

Pro plan

1,880credits left of 5,000

3,120 used (62.4%)Renews on Nov 1, 2026

Use per day

Sparkline, 14 (1 – 14). Use per day: from 120 to 300, lowest 60 (7), highest 310 (10), up 150%.

Use per day — data
Category	Use per day
1	120
2	180
3	95
4	210
5	260
6	140
7	60
8	75
9	230
10	310
11	280
12	190
13	240
14	300

At this pace, runs out on Oct 19, 2026

Storage plan

Orochia's console: gigabytes of the plan, past the warning level.

Platform storage

Bunny Stream · Growth plan

258 GBfree of 2,000 GB

1,742 GB used (87.1%)

Props

What is left of an allowance: the remaining amount, a meter in tones, the use per day and the run-out date.

Prop	Type	Default	Description
`limit`required	`number`	—	The allowance.
`title`required	`string`	—	What the allowance is (“Credits this month”): the heading and the meter's name.
`used`required	`number`	—	How much is used.
`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).
`daily`	`readonly (number \| null)[]`	—	The use of each recent day, oldest first: the sparkline and the projection.
`days`	`readonly unknown[]`	—	The days of `daily` (ISO dates), for the sparkline's summary.
`description`	`ReactNode`	—	A line under the title: the plan, the period.
`format`	`ValueFormat`	`integer`	How the amounts are written. Default `"integer"`; a `{ style: "unit", unit: "gigabyte" }` for storage.
`hideTitle`	`boolean`	—	Visually hide the title (it stays the accessible name).
`labels`	`Partial<CreditLabels>`	—	The words, passed translated; English by default.
`levels`	`readonly [number, number]`	`[0.8, 0.95]`	The share where the meter turns to warning, then danger. Default `[0.8, 0.95]`.
`loading`	`boolean`	—	The data is on its way.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`now`	`Date`	—	Today, for the projection (pass it from the server to render the same date on both sides). Default: now.
`renewsAt`	`string \| Date`	—	When the allowance renews (an ISO date or a `Date`).
`style`	`CSSProperties`	—	Inline style on the figure (layout only).

Accessibility

The meter is a meter named by the title, its value said in words (“3,120 used (62 %)”).
The warning and danger tones come with words: the projection says when it runs out.

Best practices

Pass the use of the recent days: the projection and the sparkline need it.
Pass now from the server when the page is server-rendered: both sides write the same date.
Lead with what is left, not what is used: it is what people decide on.

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