Appearance
Axis
The Axis component can draw tick marks, tick labels, the axis iteself, and grid lines on the left, bottom, right, or top of the chart.
Prop ControlsSHOW
Props
| name | type | default | required | description |
|---|---|---|---|---|
| domain | Domain | N/A | 🗹 | The min and max numbers in data-space representing the min and max of the axis |
| scaler | LinearScaler | N/A | 🗹 | A scaler function that maps a data value to its screen value |
| axisTickFormatter | (value: Value, tickIndex?: number | undefined): string | getDefaultTickFormatter() | ☐ |
| drawGridLines | boolean | false | ☐ | when true draws axis lines in the plot area for each tick mark |
| isRight | boolean | false | ☐ | Whether to draw on the left or the right of center when vertical only used when isVertical is true |
| isVertical | boolean | false | ☐ | Axis components default to drawing horizontally (for an x-axis), set this to make it draw vertically (a y-axis) |
| label | string | null | ☐ | If present, draw a label for this axis (uses more screenspace) |
| labelMarginPx | number | 12 | ☐ | length in pixels from axis label to ticks |
| plotMarginPx | number | 0 | ☐ | length in pixels from the axis to the plot (or whatever is next to it), use negative values to reverse padding direction) |
| subTicks | number | 0 | ☐ | How many unlabelled ticks to put between each labelled pair of ticks |
| tickFrequency | string | "0" | ☐ | Sets density of ticks using 1-tick per distance where this prop controls the distance. |
NOTE: you can set any valid css length here as a string such as 10px, 0.5em, or 30vh.| |tickLengthPx|number|8|☐|length in pixels of each tick mark on the axis, use negative values to reverse tick direction| |x|number|0|☐|| |y|number|0|☐||
|
Slots
None