Identity and colors

SeriesCopy Anchor Link

A string series dataKey normally identifies its config entry. Function and numeric keys need seriesKey for controlled visibility. Configured Line's series entries always supply unique keys in config. An accessor can change how a value is read without changing its identity:

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [{ month: "Jan", count: 42 }, { month: "Feb", count: 58 }];
const config = { visitors: { label: "Visitors", color: "#733bff" } };

export function AccessorChart() {
  return <Chart.LineChart data={data} config={config} xDataKey="month"
    series={[{ dataKey: (row) => row.count, seriesKey: "visitors" }]}
    animate={false} aria-label="Monthly visitors" />;
}

Series metadata supplies default paint; explicit native paint and custom renderers retain control. Configured Line toggles series automatically. defaultVisibleSeries sets the initial list; controlled visibility needs visibleSeries and onVisibleSeriesChange. Without the callback, the list is read-only. Keep the visibility mode stable or remount to change it.

Category and node colorsCopy Anchor Link

Try the short identity and layout recipes or the complete Components examples.

• Pie/Donut and Radial category defaults: PieSeries.categoryKey reads explicit series rows; RadialBarChart.categoryKey reads chart rows. A row such as { id: "search", value: 35 } uses dataKey="value" for geometry and categoryKey="id" for config color. IDs must resolve to string keys in Root.config; use an accessor for nested fields. Reorder/filter keeps color tied to identity. Legend order follows config order; category filtering stays application-owned.
• Sankey metadata: SankeyChart.nodeConfig maps node IDs to labels/colors. Default nodes use their own color; solid links use the source color. Composed gradient links resolve both endpoints. SankeyLegend receives the same config explicitly and remains a static list.
• ActivityRings: ring key identifies config; value and optional domain determine progress. The helper supplies radial composition and preserves original values for its default tooltip. Explicit Radial composition remains available.

Category defaults fill missing native paint. Explicit series fill disables them; datum/Cell fill takes precedence. Existing Cell props/handlers and custom shapes remain authoritative. Overrides can intentionally differ from legend metadata; update config too when the legend should match. No positional palette or universal identity schema is implied.

Heatmap uses row/column identity and a quantitative scale, rather than series colors. Its compact layout adds HeatmapGrid.layout for cell size, gap and visual headers; accessible headers and keyboard navigation remain present.

Inspection and emphasisCopy Anchor Link

Tooltip inspection and paint emphasis are separate contracts. Hiding series does not rewrite the dataset. Automatic emphasis is family-specific; custom renderers keep their own behavior. See the relevant Components page for supported inspection, legend and emphasis options.