The locale, the brand palette and the words of every chart below it, set once; plus the sliding window for live data.

Web + MobileBetaCharts

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

When to use

Once near the root of an app: its locale (fr-FR), its brand (orazaka), its translated words.
An app that loads a brand stylesheet on :root rather than a .brand-<id> class: set brand here.

When not to use

To change one chart only: every chart takes locale, brand and labels itself.Use instead: Line chart

Install

npm install @krizaka/charts

Import

import { ChartsProvider, useSlidingWindow } from "@krizaka/charts/provider";

Figures and dates in French, the Orazaka palette, the words translated.

Crédits consommés par mois

Histogramme, 4 (juin 2026 – sept. 2026). Crédits: from 412 k to 523,9 k, lowest 391,2 k (août 2026), highest 523,9 k (sept. 2026), up 27 %.

Sets the locale, the brand and the words of every chart below it.

Prop	Type	Default	Description
`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`).
`labels`	`ChartLabelsInput`	—	The words, translated: the buttons, the states, the written summary.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.

The words it sets are what screen readers hear: the summary, the role description, the keyboard hint.

Translate labels from the app's catalogue; the summary templates take {placeholders}.
In React Native, pass scheme and theme from @krizaka/ui/native's useTheme() so the charts follow the app's theme and brand.

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