# Chart > The `Chart` namespace's compound parts, covering Cartesian series (Chart, Chart.Line, Chart.Area, Chart.Bar) and the independent Chart.Pie root, each pairing with Chart.Legend for a script-free series switcher and Chart.Tooltip for a richer hover surface. ```ts import { Chart } from "@sdxc/ui"; ``` Renders a chart's coordinate space: a responsive `` whose `viewBox` comes from `width`/`height`, shared via context so nested series share one scale. A paired Chart.Legend must render as this root's later sibling. ## Examples ```tsx ({ x: month.index, y: month.revenue, label: t("chart.revenue.point", { month: month.name, amount: month.revenue }), }))} /> {t("chart.series.revenue")} ``` ## Props | Prop | Type | Description | | --- | --- | --- | | `width` | `number` | Pixel width of the chart's internal coordinate space — the value every nested series' `x` positions are mapped onto. The `` renders at its container's full size, scaling this space while preserving aspect ratio. | | `height` | `number` | Pixel height of the chart's internal coordinate space — the value every nested series' `y` positions are mapped onto. | | `xDomain` | `readonly [number, number]` | `[start, end]` bounds of every nested series' horizontal data values, mapped across `width` and shared through context so every series lines up on the same horizontal scale. | | `yDomain` | `readonly [number, number]` | `[start, end]` bounds of every nested series' vertical data values, mapped across `height`. `start` maps to the coordinate space's bottom edge and `end` to its top, matching a value axis growing upward against SVG's `y`. | Also accepts everything in `Omit, "viewBox" | "width" | "height">`. ### Chart.Line Renders a line series: a stroked, `aria-hidden` `` connecting `points` via linearScale and linePath, plus a focusable marker with a ``, sampled via ticks for manageable density. | Prop | Type | Description | | --- | --- | --- | | `points` | `readonly LinePoint[]` | The series' data points, in draw order along `x`. The plotted path connects every point given here; the accessible markers render on only a representative spread of them, chosen through `markerCount`. | | `color?` | `Color` | Categorical color. Defaults to DEFAULT_LINE_COLOR. | | `markerCount?` | `number` | Approximate number of accessible, hoverable markers placed along `points`. Each marker snaps to the point closest to one of this many evenly spread "nice" values across the ancestor Chart's `xDomain`. | | `parts?` | ``{ /** Additional mixin(s) applied to the stroked ``. */ path?: TagProps<"path">["mix"]; /** Additional mixin(s) applied to each point's `` marker. */ marker?: TagProps<"circle">["mix"]; }`` | Per-part styling for the plotted `path` and each point `marker`, layered after each part's own built-in styling. Use the `mix` prop instead to style the series' outer host. | Also accepts everything in `Omit, "children" | "points">`. ### Chart.Area Renders an area series: a filled, `aria-hidden` `` tracing `points` and closing down to `baseline`, mapped through linearScale and areaPath, plus a focusable marker sampled via ticks. | Prop | Type | Description | | --- | --- | --- | | `points` | `readonly AreaPoint[]` | The series' data points, in draw order along `x`. The filled region traces every point given here before closing down to `baseline`; markers render on a representative spread of them, chosen through `markerCount`. | | `color?` | `Color` | Categorical color. Defaults to DEFAULT_AREA_COLOR. | | `baseline?` | `number` | The `yDomain` value the filled region closes down (or up) to — typically the value axis' zero line. Defaults to DEFAULT_AREA_BASELINE. | | `markerCount?` | `number` | Approximate number of accessible, hoverable markers placed along `points`. Each marker snaps to the point closest to one of this many evenly spread "nice" values across the ancestor Chart's `xDomain`. | | `parts?` | ``{ /** Additional mixin(s) applied to the filled ``. */ path?: TagProps<"path">["mix"]; /** Additional mixin(s) applied to each point's `` marker. */ marker?: TagProps<"circle">["mix"]; }`` | Per-part styling for the filled `path` and each point `marker`, layered after each part's own built-in styling. Use the `mix` prop instead to style the series' outer host. | Also accepts everything in `Omit, "children" | "points">`. ### Chart.Pie Renders a pie or donut chart: an independent `` root, since a circular layout shares no domain with a Cartesian Chart. | Prop | Type | Description | | --- | --- | --- | | `data` | `readonly PieDatum[]` | The wedges to draw, in draw order. Each entry's position in this list picks its default color when its own `color` is omitted. | | `width` | `number` | Pixel width of the chart's internal coordinate space that `viewBox` maps onto. The rendered `` fills `100%` of the host's own inline size, scaled to fit while preserving this aspect ratio against `height`. | | `height` | `number` | Pixel height of the chart's internal coordinate space, on the same terms as `width`. | | `innerRadius?` | `number` | Pixel distance from center to every wedge's inner edge, in the same coordinate space as `width`/`height`. A positive value smaller than the chart's outer radius produces a donut with a hole that size. | | `parts?` | ``{ /** Additional mixin(s) applied to every wedge's ``. */ segment?: TagProps<"path">["mix"]; }`` | Per-part styling for every wedge `segment`, layered after its own built-in styling. Use the `mix` prop instead to style the chart's outer host. | Also accepts everything in `PieAngles.Options`. Also accepts everything in `Omit, "children" | "viewBox" | "width" | "height">`. ### Chart.Bar Renders a categorical bar chart: an independent `` root, since a band axis shares no continuous domain with a Cartesian Chart. | Prop | Type | Description | | --- | --- | --- | | `data` | `readonly BarRow[]` | Rows to plot, one band per row along the category axis, in draw order. | | `series` | `readonly string[]` | Ordered series keys plotted within every row's band. A key's position in this list is both the stable index stamped onto `data-series-index` and its slot in the `--ui-chart-1`–`--ui-chart-8` palette, wrapping past it. | | `width` | `number` | Pixel width of the chart's internal coordinate space that `viewBox` maps onto. The rendered `` fills `100%` of the host's own inline size, scaled to fit while preserving this aspect ratio against `height`. | | `height` | `number` | Pixel height of the chart's internal coordinate space, on the same terms as `width`. | | `domain` | `readonly [number, number]` | `[start, end]` bounds of every bar's value, mapped across `height`. `start` maps to the bottom edge and `end` to the top, matching the same upward-value convention Chart.Props.yDomain uses against SVG's `y`. | | `tickCount?` | `number` | Approximate number of horizontal gridlines spanning `domain`. Defaults to DEFAULT_BAR_TICK_COUNT. | | `categoryGap?` | `number` | Fraction of each category band reserved as a gap from its neighbors. Defaults to DEFAULT_CATEGORY_GAP. | | `seriesGap?` | `number` | Fraction of each category's own band reserved as a gap between its series' bars — most bar charts plot a single series per category, with no neighboring bar to gap against. | | `parts?` | `{ /** Additional mixin(s) applied to each horizontal gridline. */ gridline?: TagProps<"line">["mix"]; /** Additional mixin(s) applied to each plotted bar. */ bar?: TagProps<"rect">["mix"]; }` | Per-part styling for the gridlines and bars, layered after each part's own built-in styling. Use the `mix` prop instead to style the chart's outer host. | Also accepts everything in `Omit< TagProps<"svg">, "children" | "viewBox" | "width" | "height" >`.