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

Web + MobileBêtaGraphiques

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

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.

Quand ne pas l’utiliser

To change one chart only: every chart takes locale, brand and labels itself.À la place : Line chart

Installer

npm install @krizaka/charts

Importer

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	Défaut	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.

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