Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
SwiftUI
Package maturity: stable · Implementation verification: Experimental
Jetpack Compose
Package maturity: stable · Implementation verification: Experimental
Flutter
Package maturity: stable · Implementation verification: Experimental
This platform’s whole catalogue is verified to React beta, SwiftUI experimental, Jetpack Compose experimental, Flutter experimental. The catalogue figure is the weakest component on that platform, not an average.
Charts built on Recharts, themed with --chart-1…5.
Reduced motion: off · your browser setting
npx @kinetixui/cli add chartimport { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@kinetixui/ui";Styled entirely from the KinetixUI token contract — bg-action,
text-muted-foreground, border-input, ring-ring. Works in light and dark
with no extra config. Keyboard and ARIA behaviour is inherited from Radix where the
component is built on a primitive; the hand-built widgets (DataGrid, TreeView,
ColorPicker, MultiSelect, Tour, KanbanBoard) have their own documented interaction
models — see Accessibility.
The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| label | stringText alternative for the chart (WCAG 1.1.1). A chart conveys its data by colour + position, which a screen reader can't relay — pass a one-line summary of what it shows and the trend. Falls back to "… | Text alternative for the chart (WCAG 1.1.1). A chart conveys its data by colour + position, which a screen reader can't relay — pass a one-line summary of what it shows and the trend. Falls back to "… |
| state | "loading" | "error" | "empty"Render a placeholder in place of the chart. `"loading"` shows a shimmer, `"empty"` / `"error"` show a message (override with `stateMessage`). | Render a placeholder in place of the chart. `"loading"` shows a shimmer, `"empty"` / `"error"` show a message (override with `stateMessage`). |
| configrequired | ChartConfig | |
| stateMessage | string | |
| srTable | { columns: React.ReactNode[]; rows: React.ReactNode[][]; }Visually-hidden `<table>` rendered after the chart so a screen reader can read the underlying numbers. Pair with a concise `label`. | Visually-hidden `<table>` rendered after the chart so a screen reader can read the underlying numbers. Pair with a concise `label`. |
| Prop | Type | Notes |
|---|---|---|
| hideLabel | boolean | |
| hideIndicator | boolean | |
| indicator | "line" | "dot" | "dashed" | |
| nameKey | string | |
| labelKey | string |
| Prop | Type | Notes |
|---|---|---|
| hideIcon | boolean | |
| payload | readonly RechartsPrimitive.LegendPayload[] | |
| nameKey | string | |
| verticalAlign | VerticalAlignmentType |
| Prop | Type | Notes |
|---|---|---|
| idrequired | string | |
| configrequired | ChartConfig |