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

tip

dayjs format() is locale and timezone aware.

position

Position of the label, relative to its domain

position: 'top' | 'right' | 'bottom' | 'left',

Default: bottom

http://localhost:3000

Live Editor

const cal = new CalHeatmap(); // Change the position value to see result cal.paint({ itemSelector: '#ex-position', domain: { label: { position: 'top' } }, }); render(<div id="ex-position"></div>);

const cal = new CalHeatmap();
// Change the position value to see result
cal.paint({
  itemSelector: '#ex-position',
  domain: { label: { position: 'top' } },
});

render(<div id="ex-position"></div>);

Result

Loading...

textAlign

Horizontal alignment of the label

textAlign: 'start' | 'middle' | 'end',

Default: middle

http://localhost:3000

Live Editor

const cal = new CalHeatmap(); // Change the textAlign value to see result cal.paint({ itemSelector: '#ex-textalign', domain: { label: { textAlign: 'left' } }, }); render(<div id="ex-textalign"></div>);

const cal = new CalHeatmap();
// Change the textAlign value to see result
cal.paint({
  itemSelector: '#ex-textalign',
  domain: { label: { textAlign: 'left' } },
});

render(<div id="ex-textalign"></div>);

Result

Loading...

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

http://localhost:3000

Live Editor

const cal = new CalHeatmap(); // Change the textAlign value to see result cal.paint({ itemSelector: '#ex-rotate', domain: { label: { rotate: 'left' } }, }); render(<div id="ex-rotate"></div>);

const cal = new CalHeatmap();
// Change the textAlign value to see result
cal.paint({
  itemSelector: '#ex-rotate',
  domain: { label: { rotate: 'left' } },
});

render(<div id="ex-rotate"></div>);

Result

Loading...

width

Width of the label, in pixel

width: number,

Default: 100

note

Ignored when position is set to top or bottom. In these cases, the width is capped to the domain width.

height

Height of the label, in pixel

height: number,

Default: 25

note

Ignored when position is set to left or right. In these cases, the height is capped to the domain height.

http://localhost:3000

Live Editor

const cal = new CalHeatmap(); // Change the height value to see result cal.paint({ itemSelector: '#ex-height', domain: { label: { height: 50 } }, }); render(<div id="ex-height"></div>);

const cal = new CalHeatmap();
// Change the height value to see result
cal.paint({
  itemSelector: '#ex-height',
  domain: { label: { height: 50 } },
});

render(<div id="ex-height"></div>);

Result

Loading...