CalendarPlot

live example

Explore the API in the live example.

api reference

CalendarPlot(name[, parent])

The calendar plot widget. As a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

ElementTooltip The tooltip displays the date of the tile and its value. The title is the date in ISO 8601 format.
Highlight As each month block represents a plot group, they can be highlighted by passing month- to the highlight method, where is the 0-indexed month.
Label Labels are shown inside the tiles. If the font size is too large, the labels are resized to fit in the tiles.

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

CalendarPlot.blockAlign([align])

Sets the label alignment for the month blocks.

Parameters

Name	Type	Description
align	string	optionalAlignment value to set. Supported values: start, middle. Default value is `start`.

Returns

CalendarPlot

Reference to the CalendarPlot API.

Examples

// Set label alignment to center.
const calendar = dalian.CalendarPlot('my-chart')
  .blockAlign('middle')
  .render()

// Reset alignment to default.
calendar.blockAlign()
  .render()

CalendarPlot.blockMargin([margin])

Sets the margin between the month blocks.

Parameters

Name	Type	Description
margin	number	optionalSize of the margin between month blocks relative to the tile size. Default value is `0`.

Returns

CalendarPlot

Reference to the CalendarPlot API.

Examples

// Set block separation to twice the tile size.
const calendar = dalian.CalendarPlot('my-calendar')
  .blockMargin(2)
  .render()

// Reset block separation to default.
calendar.blockMargin()
  .render()

CalendarPlot.data(plots)

Set/updates the data that is shown in the calendar plot. In the bar chart, months are the plot groups, therefore so methods that operate on plot groups are applied on the month blocks.

Parameters

Name	Type	Description
plots	Object[]	Array of objects representing the date values. Each data point has two properties: date `string` Date of the data point in ISO 8601 YYYY-MM-DD date format. value `number` Value of the data point. The data does not have to include all dates within the period of interest: missing dates will be represented by data points with `value = null`.

Returns

CalendarPlot

Reference to the CalendarPlot API.

Examples

const calendar = dalian.CalendarPlot('my-chart')
  .data([
    {date: '2020-01-03', value: 32},
    {name: '2020-01-04', value: 12},
    {name: '2020-01-16', value: 10},
    ...
  ])
  .render()

CalendarPlot.days(names)

Sets the names of the days.

Parameters

Name	Type	Description
names	string[]	Array representing the names of the days, starting with Sunday. Default values are the short names in English.

Returns

CalendarPlot

Reference to the CalendarPlot API.

Examples

// Set day names to Spanish short names.
const calendar = dalian.CalendarPlot('my-chart')
  .days(['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sa'])
  .render()

// Reset day names to default.
calendar.days()
  .render()

CalendarPlot.months(names)

Sets the names of the months.

Parameters

Name	Type	Description
names	string[]	Array of strings representing the month names. Default values are the month names in English.

Returns

CalendarPlot

Reference to the CalendarPlot API.

Examples

// Set months to Spanish month names.
const calendar = dalian.CalendarPlot('my-chart')
  .months(['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
  'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'])
  .render()

// Reset month names to default.
calendar.months()
  .render()

CalendarPlot.weekStart(day)

Sets the start of the week (topmost weekday).

Parameters

Name	Type	Description
day	number	Week start as an index. Supported values go from 0 (Sunday) to 6 (Saturday).

Returns

CalendarPlot

Reference to the CalendarPlot API.

Examples

// Set start of the week to Monday.
const calendar = dalian.CalendarPlot('my-chart')
  .weekStart(1)
  .render()

// Reset week start to default.
calendar.weekStart()
  .render()