Identity and layout examples
Compose category colors, compact matrices and activity rings.
Use category colors, compact Heatmap layout and ActivityRings through public exports. For complete examples and props, see Pie, Heatmap, Radial and Sankey.
Category colors
Use a stable row ID to resolve Pie/Donut colors from config. The same config supplies legend metadata. Values still control slice geometry; reordering rows does not reassign colors.
"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";
const data = [{ id: "search", value: 35 }, { id: "social", value: 65 }];
const config = {
search: { label: "Search", color: "#733bff" },
social: { label: "Social", color: "#327448" },
};
export function CategoryDonut() {
return <Chart.Root config={config}>
<Chart.PieChart width={320} height={240} aria-label="Acquisition channels">
<Chart.PieSeries data={data} dataKey="value" categoryKey="id" innerRadius={45} />
<Chart.Tooltip itemKey={(item) => item.payload.id} />
</Chart.PieChart>
<Chart.Legend />
</Chart.Root>;
}itemKey aligns tooltip metadata with row identity. For composed Radial categories, categoryKey belongs on RadialBarChart, whose rows feed the series. Explicit series/datum/Cell paint and custom renderers keep control. See identity and colors for precedence and Sankey's distinct node metadata map.
Compact activity grid
HeatmapGrid.layout supplies square cell dimensions, spacing and visual header controls. Hidden headers keep programmatic associations. A width-constrained host retains horizontal scrolling and keyboard access.
"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";
const rows = ["Mon", "Tue"];
const columns = ["Week 1", "Week 2"];
const data = rows.flatMap((row, r) => columns.map((column, c) =>
({ row, column, value: r + c })));
const scale = Chart.createHeatmapScale({ domain: [0, 2], colors: ["#eef4eb", "#327448"] });
export function CompactActivity() {
return <Chart.HeatmapChart rows={rows} columns={columns} data={data} scale={scale}>
<Chart.HeatmapGrid caption="Weekly activity"
layout={{ cellSize: 12, gap: 3, rowLabels: "hidden", columnLabels: "hidden" }}
Cell={() => <span aria-hidden="true" />} />
<Chart.HeatmapTooltip />
</Chart.HeatmapChart>;
}Numbers use pixels; valid CSS lengths are also supported. Cell size must be positive and gap nonnegative. Omitted layout retains fluid cells, 3px spacing and visible labels. Custom cell content/styles can enlarge cells; native table composition remains available. The packed feature checks cover keyboard, narrow-width scrolling and programmatic accessibility; manual screen-reader listening remains untested.
Activity rings
ActivityRings supplies context, axes, tracks, tooltip and static legend. Ring keys identify config; domains normalize geometry while the default tooltip retains original values. Do not wrap it in another Root.
"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";
const config = {
move: { label: "Move", color: "#e12465" },
exercise: { label: "Exercise", color: "#327448" },
stand: { label: "Stand", color: "#733bff" },
};
const rings = [
{ key: "move", value: 350, domain: [0, 500] as const },
{ key: "exercise", value: 30, domain: [0, 60] as const },
{ key: "stand", value: 9, domain: [0, 12] as const },
];
export function DailyActivity() {
return <Chart.ActivityRings config={config} rings={rings} aria-label="Daily activity" />;
}Defaults are a responsive 300px chart, clockwise full sweep, tracks, rounded ends, static legend and motion off. Array order runs from inner to outer. Native geometry, series paint/shape, labels and per-ring Cell props remain overridable. Custom tooltip payload value is normalized progress; rawValue is the original value. Use explicit Radial composition for full axes, data and child control. Inter-chart choreography stays application-owned.