Charts
ChartAxes
The grid rules behind a cartesian plot, drawn from tick positions a chart has already computed. Paired with `ChartLabels`, which draws the text for the same ticks.
<UiChartAxes :plot="..." />Needs the charts module
This component ships in @jgastager/bundy-ui/charts, a separate module so projects that never draw a chart don't carry the paint classes these need. Nothing extra to install — just add the module entry. See Charts.
Plot
requiredplot is the rectangle the rules are drawn inside — the same one the frame hands your slot. This component draws grid rules only: no domain lines, no tick marks, no text. It takes ticks a chart has *already placed*, because positioning them needs the scale and only the chart has that; placeTicks(values, scale) turns a list of values into the { value, offset } pairs this expects. Render it before your marks so the rules sit behind them.
Draws grid rules only — no domain lines, no ticks marks, no text. Axis text is ChartLabels, and the two are separate because a chart often wants the rules behind its marks and the labels in front of them.
It takes ticks already placed against a plot, rather than computing them. Positioning ticks needs the scale, which only the chart has; placeTicks(values, scale) turns a list of values into the { value, offset } pairs this expects.
Horizontal rules are on by default and vertical ones (x-grid) are not. A value grid helps read magnitude off the y axis; a rule per category mostly adds ink. Rules are elevated/50, a surface tone rather than a faded text one, so they read as structure behind the marks instead of as very quiet writing.
X ticks
xTicks are drawn only when xGrid is on. Passing them on their own with xGrid gives vertical rules and nothing else — the shape a horizontal bar chart wants, where the value axis runs left to right and the categories need no rules of their own.
Y ticks
yTicks is the horizontal rules, and the usual reason to reach for this component at all. Omit them and the plot is left bare — the marks still read as a shape, but no longer against a scale.
X grid
xGrid turns on the vertical rules; the horizontal ones are on by default and these are not. A value grid helps read magnitude off the y axis, while a rule per category mostly adds ink — so turn this on when *both* axes are numeric and a point has to be read back as a pair of coordinates, which is why ScatterChart sets it and BarChart doesn't.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Types
interface ChartTick {
value: string | number;
offset: number;
label: string;
}interface ChartPlot {
x: number;
y: number;
width: number;
height: number;
/** Right edge, since marks need it more often than the width. */
right: number;
/** Bottom edge, which is also the x axis' baseline. */
bottom: number;
}