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.