Skip to main content Link Menu Expand (external link) Document Search Copy Copied

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.

Playground