Calendar

@nivo/calendar

This component is heavily inspired by this demo.

The responsive alternative of this component is ResponsiveCalendar, it also offers a canvas implementations, see CalendarCanvas.

See the dedicated guide on how to setup legends for this component.

Actions Logs
Start interacting with the chart to log actions
Base
object[]required

Chart data.

string | Daterequired

start date

string | Daterequired

end date

numberrequired

Chart width.

numberrequired

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi
objectoptional
px
px
px
px

Chart margin.

stringoptionaldefault:'horizontal'

defines calendar layout direction.

stringoptionaldefault:'center'
center

defines how calendar should be aligned inside chart container.

number | 'auto'optionaldefault:0
auto

Minimum value.

number | 'auto'optionaldefault:'auto'
auto

Maximum value.

Style
Years
Months
Days
Interactivity