Cartesian Marks
Cartesian Marks: anatomy, keyboard behavior, state, and theming in Askr.
Example
const Plot = createPlot<ProjectRow>();
<Plot.Root data={rows} rowKey={(row) => row.id} label="Revenue by day">
<Plot.Axis axis="x" />
<Plot.Axis axis="y" />
<Plot.Line x="createdAt" y="revenue" />
<Plot.Point x="createdAt" y="revenue" />
</Plot.Root>Lines and areas
`Line` takes `x` and numeric `y`, with `curve` (`linear`, `step`, `monotone`), `strokeWidth`, and a `defined` accessor that returns `false` to open a real gap in the path — that's distinct from a missing channel value, and both are treated as breaks. `Area` shares the same shape but adds `y2` for filled ranges, `baseline`, and the same `stack`/`normalize` options as `Bar` for building stacked or proportional area charts.
Bars and points
`Bar` pairs a binned or categorical `x` with an aggregated numeric `y`, and supports `orientation` (`vertical`/`horizontal`), `stack` (a categorical field, accessor, or boolean), `normalize` for percent stacks, plus `radius`, `inset`, `min`, and `max` for corner rounding, spacing, and bounded progress bars. `Point` plots `x`/`y` pairs with variable `r` (a fixed number or per-row channel) and a `shape` of `circle`, `square`, or `diamond` — useful for scatter plots or marking discrete values along a line.
Axes
Cartesian marks get default axes and tooltip behavior automatically; add explicit `Axis` children only when you need something different. `AxisProps` lets you pick which named `scale` to draw from, the `orient` (`top`, `right`, `bottom`, `left`), `tickCount`, a `tickFormat` function, and whether to draw the accompanying `grid` lines.
Mixed charts
Because marks are composed as ordinary children of one `Root`, combining a `Bar` histogram with a `Line` moving-average or a `Point` overlay is just adding more elements — no separate "combo chart" type exists. Give each family its own named `xScale`/`yScale` pair when the units differ, as in a requests-count bar series plotted against a latency line on a second y-axis.