Skip to content

docs: add JSDoc to axis, grid, and tick mark components #362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gka merged 1 commit into from
Feb 14, 2026
Merged

docs: add JSDoc to axis, grid, and tick mark components #362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/lib/marks/AxisX.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,35 @@
BaseMarkProps<Datum>,
'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
> {
/** custom tick values to display on the axis */
data?: Datum[];
/** whether this axis was automatically added by the Plot component */
automatic?: boolean;
/** the axis title label; set to false or null to hide */
title?: string | false | null;
/** which edge of the plot the axis appears on */
anchor?: 'top' | 'bottom';
/** the interval between ticks, e.g. "day", "month", or a number */
interval?: string | number;
/** controls which facet edge displays this axis */
facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
/** horizontal alignment of the axis title */
labelAnchor?: 'auto' | 'left' | 'center' | 'right';
/** the length of tick marks in pixels */
tickSize?: number;
/** font size for tick labels */
tickFontSize?: ConstantAccessor<number, Datum>;
/** font size for the axis title */
titleFontSize?: number;
/** spacing between tick marks and tick labels in pixels */
tickPadding?: number;
/** formatter for tick labels; can be "auto", an Intl format options object, or a custom function */
tickFormat?:
| 'auto'
| Intl.DateTimeFormatOptions
| Intl.NumberFormatOptions
| ((d: RawValue, i: number) => string);
/** CSS class applied to each tick label */
tickClass?: ConstantAccessor<string, Datum>;
/** ticks is a shorthand for defining data, tickCount or interval */
ticks?: number | string | Datum[];
Expand Down
15 changes: 15 additions & 0 deletions src/lib/marks/AxisY.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,39 @@
BaseMarkProps<Datum>,
'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
> {
/** custom tick values to display on the axis */
data?: Datum[];
/** whether this axis was automatically added by the Plot component */
automatic?: boolean;
/** the axis title label; set to false or null to hide */
title?: string | false | null;
/** which edge of the plot the axis appears on */
anchor?: 'left' | 'right';
/** controls which facet edge displays this axis */
facetAnchor?: 'auto' | 'left' | 'right' | 'left-empty' | 'right-empty';
/** vertical alignment of tick labels relative to the tick position */
lineAnchor?: 'top' | 'center' | 'bottom';
/** the interval between ticks, e.g. "day", "month", or a number */
interval?: string | number;
/** horizontal alignment of the axis title */
labelAnchor?: 'auto' | 'left' | 'center' | 'right';
/** text anchor for tick labels */
textAnchor?: 'auto' | 'start' | 'middle' | 'end';
/** the length of tick marks in pixels */
tickSize?: number;
/** font size for tick labels */
tickFontSize?: ConstantAccessor<number, Datum>;
/** font size for the axis title */
titleFontSize?: number;
/** spacing between tick marks and tick labels in pixels */
tickPadding?: number;
/** formatter for tick labels; can be "auto", an Intl format options object, or a custom function */
tickFormat?:
| 'auto'
| Intl.DateTimeFormatOptions
| Intl.NumberFormatOptions
| ((d: RawValue) => string);
/** CSS class applied to each tick label */
tickClass?: ConstantAccessor<string, Datum>;
/** ticks is a shorthand for defining data, tickCount or interval */
ticks?: number | string | Datum[];
Expand Down
4 changes: 4 additions & 0 deletions src/lib/marks/GridX.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@
-->
<script lang="ts" generics="Datum = RawValue">
interface GridXMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
/** custom values at which to draw vertical gridlines */
data?: Datum[];
/** whether these gridlines were automatically added by the Plot component */
automatic?: boolean;
/** the starting vertical position of the gridline */
y1?: ChannelAccessor<Datum>;
/** the ending vertical position of the gridline */
y2?: ChannelAccessor<Datum>;
}
import Mark from '../Mark.svelte';
Expand Down
4 changes: 4 additions & 0 deletions src/lib/marks/GridY.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@
-->
<script lang="ts" generics="Datum = RawValue">
interface GridYMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
/** custom values at which to draw horizontal gridlines */
data?: Datum[];
/** whether these gridlines were automatically added by the Plot component */
automatic?: boolean;
/** the starting horizontal position of the gridline */
x1?: ChannelAccessor<Datum>;
/** the ending horizontal position of the gridline */
x2?: ChannelAccessor<Datum>;
}
import Mark from '../Mark.svelte';
Expand Down
2 changes: 2 additions & 0 deletions src/lib/marks/TickX.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

<script lang="ts" generics="Datum extends DataRow">
interface TickXMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
/** the input data array; each element becomes one vertical tick */
data: Datum[];
/**
* the horizontal position; bound to the x scale
Expand All @@ -20,6 +21,7 @@
* length of the tick. Defaults to 10 pixel
*/
tickLength?: ConstantAccessor<number, Datum>;
/** if true, renders using Canvas instead of SVG */
canvas?: boolean;
}
import Mark from '../Mark.svelte';
Expand Down
8 changes: 5 additions & 3 deletions src/lib/marks/TickY.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,23 @@
-->
<script lang="ts" generics="Datum extends DataRow">
interface TickYMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
/** the input data array; each element becomes one horizontal tick */
data: Datum[];
/**
* the vertical position; bound to the x scale
* the vertical position; bound to the y scale
*/
y?: ChannelAccessor<Datum>;
/**
* the horizontal position; bound to the y scale, which must be band. If the y channel
* is not specified, the tick will span the full vertical extent of the frame.
* the horizontal position; bound to the x scale, which must be band. If the x channel
* is not specified, the tick will span the full horizontal extent of the frame.
*/
x?: ChannelAccessor<Datum>;
/**
* if ticks are used on a non-bandwidth scale, this will determine the
* length of the tick. Defaults to 10 pixel
*/
tickLength?: ConstantAccessor<number, Datum>;
/** if true, renders using Canvas instead of SVG */
canvas?: boolean;
}
import Mark from '../Mark.svelte';
Expand Down