elements
Manual UI Templates Chart

Chart

elements man ui/templates/chart

What every chart shares: the config and its colors, the tooltip, the legend, the palette and the data table.

Example
import type { ChartConfig } from "@elements/ui/chart";
import { BarChart } from "@elements/ui/chart-bar";

const config: ChartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)", icon: "monitor" },
  mobile: { label: "Mobile", theme: { light: "var(--chart-2)", dark: "var(--chart-5)" } },
};

<BarChart data={rows} {config} x="month"
          tooltip={{ indicator: "line", labelFormatter: (label) => label.slice(0, 3) }}
          legend={{ position: "top", toggle: true }} />

Parts

Part What it is
ChartFrame The chart container: declares --color-<key> from the config, holds the legend, the focusable plot, the tooltip and the data table, and starts the controller.
ChartTooltipContent The tooltip: heading, one row per item (swatch or icon, name, value, unit), optional footer.
ChartLegend The legend row: swatch or icon and name per series; toggle buttons with legend toggle.
ChartTable The chart's data as a table, visually hidden unless shown.
ChartCartesian, ChartPoints SVG parts the cartesian charts share: grid and axes; lines, areas, dots, cursor and hit strips.
.chart-tooltip data-state open or closed; positioned beside the pointer inside the chart.
.chart-legend-item A legend entry; a button with aria-pressed when toggling.

Attributes

Attribute Type Default Description
config ChartConfig (required) { [key]: { label?: string; color?: string; theme?: { light: string; dark: string }; icon?: IconName; legendType?: LegendIcon; tooltipType?: "none" } }. legendType sets that series' legend icon and none leaves it out of the legend; tooltipType none leaves it out of the tooltip. Each key becomes --color-<key> on the chart; an entry with no color takes the next --chart-N.
tooltip boolean | { indicator?: "dot" | "line" | "dashed"; hideLabel?: boolean; hideIndicator?: boolean; color?: string; labelKey?: string; nameKey?: string; labelFormatter?: (label, row) => string; formatter?: (value, key, row) => string; footer?: (row) => string; footerLabel?: string; unit?: string; defaultIndex?: number; cursor?: boolean; filterNull?: boolean; trigger?: "hover" | "click"; active?: boolean; position?: { x?, y? }; reverseDirection?: { x?, y? }; itemSorter?: "name" | "value" | "key" | (item) => number | string; includeHidden?: boolean; animationDuration?: number; animationEasing?: string | (t) => number; isAnimationActive?: boolean } true Every chart's tooltip. unit adds a muted suffix to each value, footer a last line, defaultIndex shows it from the start, cursor false hides the hover band or line.
legend boolean | { position?: "top" | "bottom" | "left" | "right" | "center" | "insideTop" | "insideBottom" | "insideLeft" | "insideRight" | "insideTopLeft" | "insideTopRight" | "insideBottomLeft" | "insideBottomRight" | { x, y }; offset?: number; iconSize?: number; verticalAlign?: "top" | "middle" | "bottom"; align?: "left" | "center" | "right"; layout?: "horizontal" | "vertical"; iconType?: "square" | "rect" | "circle" | "line" | "plainline" | "diamond" | "triangle" | "cross" | "star" | "wye" | "none"; formatter?: (name, key) => string; itemSorter?: "name" | "key" | (item) => number | string; hideIcon?: boolean; nameKey?: string; toggle?: boolean } false Every chart's legend.
active number (two-way) -1 The active item, on every chart.
hidden string[] (two-way) [] Hidden series or slices, on every chart.
label string per chart The plot's accessible name and the table's caption.
showTable boolean false Show the data table under the plot.
animate boolean true Entry and data motion; off under reduced motion.

Keyboard

Keys Action
Tab Focuses the chart (one tab stop) and shows the tooltip for the item the keys last reached, else the active item, else the first.
ArrowRight / ArrowDown Next item. The same under dir=rtl: the plot is not mirrored, so keys follow the screen.
ArrowLeft / ArrowUp Previous item.
Home / End First and last item.
Escape Hides the tooltip. In a dialog, the dialog stays open until the next Escape.

Data attributes

Attribute Values On
data-chart "bar" | "line" | "area" | "pie" | "radar" | "radial" figure
data-state "open" | "closed" .chart-tooltip
data-index the item index .chart-hit and pie, radial marks
data-series the series key marks
data-resizing present while the chart redraws for a new size figure
data-entered present once the entry motion is over figure
aria-pressed true | false .chart-legend-item (toggle)

Accessibility

  • The plot is one tab stop: role=group, aria-roledescription=chart, named by label, described by the data table.
  • The SVG is aria-hidden; a screen reader gets the data from the table, which every chart renders.
  • Arrow keys move through the items and each move is announced in a polite live region, for example "February: Desktop 305, Mobile 200".
  • Identity is never color alone: a legend for two or more series and labels on the tooltip rows.
  • Legend toggles are buttons with aria-pressed.

See also