import { YAxis } from "nanoplot/YAxis"The YAxis component can render on the left/right side and with custom dataset support (multiple YAxis).
| Name | Description | Type | Required | Default |
ticks | Control for the ticks that run along the YAxis | export type FromToJumps = {
from?: From;
to?: To;
jumps?: Jumps;
};
export type MinMax = "min" | "max";
export type ISODuration = `P${string}`;
export type Expression =
| "auto"
| "min"
| "max"
| `${MinMax} - ${number}`
| `${MinMax} - ${number}%`
| `${MinMax} - ${ISODuration}`
| `${MinMax} + ${number}%`
| `${MinMax} + ${number}`
| `${MinMax} + ${ISODuration}`
| number;
type From = "auto" | Expression | number;
type To = "auto" | Expression | number;
type Jumps = "auto" | ISODuration | number; | No | {from: 'auto', to: 'auto', jumps: 'auto'} |
title | Sets the title of the YAxis | string | No | - |
display | Custom display function for the YAxis ticks | (tick) => ReactNode | No | - |
description | Sets the description of the YAxis | string | No | - |
position | Sets the position of the YAxis. Can be 'top', 'bottom', 'left', or 'right'. Default is 'left'. | 'left' | 'right' | No | 'left' |
dataset | Changes the dataset used to render the YAxis | string | No | - |
Note
When using temporal ticks, these definitions are relevant.
auto = The minimum or maximum date as defined by the dataset.
min = the minimum date as defined by jumps and your min value.
max = the maximum date as defined by jumps and your max value.
ISODuration = Wikipedia Link
| Snippet | Result |
ticks={{ from: 'auto - P1M', to: 'auto', jumps: 'P1M' }} | First date in dataset minus 1 month to last date defined by jumps that is above max. Jumping every 1 month. |
ticks={{ from: 'min - P1M', to: 'max + P1M', jumps: 'P1M' }} | Take min date generated by jumps, take away 1 month. Same for max. Jump every 1 months |
ticks={{ from: 'min - P1M15D', to: 'max + P1M15D', jumps: 'P1Y' }} | Take min date generated by jumps and take away 1 month 5 days. Same for max. Jump every 1 year |
ticks={{ from: -25, to: 100, jumps: 5 }} | From -25 to 100, in 5 jumps. (-25, 0, 25, 50, 75, 100) |
ticks={{ from: -25, to: 'auto', jumps: 'auto' }} | From -25 but the library will pick the most appropriate max value and number of jumps based on the dataset |
| Snippet | Result |
ticks={{ from: -25, to: 100, jumps: 5 }} | From -25 to 100, in 5 jumps. (-25, 0, 25, 50, 75, 100) |
ticks={{ from: -25 }} | From -25 but the library will pick the most appropriate max value and number of jumps based on the dataset |
ticks={{ to: 100 }} | The library will pick the most appropriate min value based on the dataset and the most aesthetic number of jumps to reach 100 |
ticks={{ jumps: 5 }} | Library will pick min and max values based on dataset. But will get from the min to max in 5 jumps. |
ticks={{ from: 'auto', to: 'auto', jumps: 'auto' }} | The default, library picks min, max and jumps based on dataset |
ticks={{ from: 'min - 10', to: 'max + 50' }} | From the minimum value in the dataset minus 10, to the maximum value in the dataset plus 50. The library will pick the most aesthetic number of jumps. |
ticks={{ from: 'min - 10%', to: 'max + 50%' }} | From the minimum value in the dataset minus 10% of the minimum value, to the maximum value in the dataset plus 50% of the maximum value. The library will pick the most aesthetic number of jumps. |