subLabel

Specify all options related to the domain’s subLabel configuration

type SubLabelOptions = {
  text: () => string[],
  radius?: number,
  width?: number,
  height?: number,
  gutter?: number,
  textAlign?: 'start' | 'middle' | 'end',
};

SubLabel is still a work in progress, and API may changes in the future. It its current form, this option is only used to show weekdays label when the subDomain is set to day. Future updates will allow more customization, and broaden the scope of application.

text

A function which return an array of labels.

text: () => string[],

The number of returned result is up to you, and generally depends on the subDomain’s type.

Example

const cal = new CalHeatmap();
cal.paint({
  range: 1,
  domain: {
    type: 'year',
    subLabel: {
      // Following function returns a list of locale aware weekdays
      text: () => dayjs.weekdays().map((d) => d[0].toUpperCase()),
    }
  },
  subDomain: { type: 'day' },
})

Example

Reproducing the day labels from github contribution heatmap

const cal = new CalHeatmap();
cal.paint({
  range: 1,
  domain: {
    type: 'year',
    subLabel: {
      width: 30,
      textAlign: 'start',
      text: () => dayjs.weekdaysShort().map((d, i) => i % 2 == 0 ? '' : d),
    }
  },
  subDomain: { type: 'day' },
})

radius

Border radius of the subLabel’s background, in pixel

radius?: number,

Default: 0

Playground

By default, the background is transparent. Use the CSS class .sublabel-rect to style it.

width

Width of the subLabel, in pixel

width?: number,

Default: subDomain’s width

Playground

height

Height of the subLabel, in pixel

height?: number,

Default: subDomains’ height

Playground

Total height can no be greater that the domain height

gutter

Space between each subLabel, on pixel

gutter?: number,

Default: subDomains’ gutter

Playground

textAlign

Horizontal alignment of the subLabel

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

Default: middle

Playground