# Chart types (/docs/chart/types) Every example below is still [`Chart`](/docs/chart) — TanStack's real grammar, plus the kit's theming. Grouped by what the data needs to say, not by how simple the code is: pick the section that matches your data's job, then adapt the mark. All of it wires TanStack's own [tooltip extension](https://tanstack.com/charts) (`@tanstack/charts/tooltip`). ## Magnitude by category [#magnitude-by-category] `barY` compares categories vertically; `barX` swaps the axes for a ranking with labels too long to fit under vertical bars. ## Change over time [#change-over-time] `lineY` for a trend, `areaY` when the magnitude *building up* matters, and `areaY`'s `y1`/`y2` (instead of `y`) for an interval band — with a second mark composed on top, since a chart is just marks layered in one `defineChart`. ## Relationship [#relationship] `dot` plots raw x/y pairs — a scatter for two quantitative variables, or a bubble once a third joins as a `r` (radius) channel. ## Distribution [#distribution] `binX` groups raw observations into bins (`thresholds` picks roughly how many) for `rect` to draw as a histogram — no dedicated histogram mark, a transform plus a mark. `boxY` takes raw per-observation rows directly and summarizes each category into a Tukey box (quartiles, whiskers, outliers) itself, no pre-aggregation. ## Composition [#composition] Multiple series first, then stacked, then stacked *and* normalized. A `color` channel on a mark gets TanStack's own implicit categorical scale — [`Chart`'s `colors` prop](/docs/chart#series-color) themes that via `--ts-chart-N`, with zero change to how the chart itself is built. For a specific series order or a legend, build the color scale explicitly instead: `chartColors()` resolves the kit's palette to literal values for `color.range`, paired with `colorLegend()` (TanStack's own). ## Comparison across groups [#comparison-across-groups] TanStack has its own `facet` mark for small multiples; the simpler, always-safe option is just rendering N ordinary `Chart`s side by side — no new API to learn, and each panel is an ordinary chart you could style or interact with independently. ## Putting it together [#putting-it-together] A single chart rarely stays inside one "job" — a real dashboard layers several. This one composes four banded `areaY` regions (an expected-pace corridor), a `lineY` split into a solid historical segment and a dashed projected one, `dot` for per-point pacing color, and `ruleX`/`text` for milestone and "now" annotations — eleven ordinary marks in one `defineChart`, nothing dashboard-specific about any of them.