label
Specify all options related to the domain’s label configuration
type LabelOptions: {
text?: string | null | ((timestamp: number, element: SVGElement) => string);
position: 'top' | 'right' | 'bottom' | 'left',
textAlign: 'start' | 'middle' | 'end',
offset: {
x: number,
y: number,
},
rotate: null | 'left' | 'right',
width: number,
height: number,
}
text
Specify the label’s content
label?: string | null | ((timestamp: number, element: SVGElement) => string);
Default: undefined
This option accepts different value’s type, see table below for usage.
| Value type | Description | Example Value | Example output |
|---|---|---|---|
undefined | Let the calendar decides, based on the chosen type | March | |
string | Pass the string to dayjs format(), and display its result | MMMM | March |
null | Do not show any label | null | |
function | Display the function’s return value. The function takes the domain’s timestamp and the label’s SVG Element as argument | function (timestamp) { return new Date(date).toISOString(); } | 2022-12-06T20:01:51.290Z |
dayjs format() is locale and timezone aware.
position
Position of the label, relative to its domain
position: 'top' | 'right' | 'bottom' | 'left',
Default: bottom
Example with each possible values
textAlign
Horizontal alignment of the label
textAlign: 'start' | 'middle' | 'end',
Default: middle
Example with each possible values
offset
Further customize the label placement along its x and y axis
offset: {
x: number, // in pixels
y: number, // in pixels
},
rotate
Rotate to obtain a vertical label
rotate: null | 'left' | 'right',
Default: null
Example with left and right
width
Width of the label, in pixel
width: number,
Default: 100
Ignored when position is set to top or bottom. In these cases, the width is capped to the domain width.
Playground
height
Height of the label, in pixel
height: number,
Default: 25
Ignored when position is set to left or right. In these cases, the height is capped to the domain height.