CalendarCanvas

@nivo/calendarcanvas

A variation around the Calendar component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic rendering ability.

The responsive alternative of this component is ResponsiveCalendarCanvas.

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.
stringoptionaldefault:'horizontal'
defines calendar layout direction.
objectoptional
px
px
px
px
Chart margin.
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.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvgcanvasapi
Style
optional
Define style for common elements such as labels, axes…
string[]optionaldefault:['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']
Cell colors.
stringoptionaldefault:'#fff'
   #aa7942
color to use to fill days without available value.
Years
numberoptionaldefault:30
px
define spacing between each year row/column depending on the direction.
(year: number) => string | numberoptional
can be used to customize years label, returns 'YYYY' by default.
'before' | 'after'optionaldefault:'before'
defines year legends position.
numberoptionaldefault:10
px
define offset from year edge to its label.
Months
numberoptionaldefault:0
px
define spacing between each month row/column depending on the direction.
numberoptionaldefault:2
width of month borders.
supportsvgcanvasapi
stringoptionaldefault:'#000'
color to use for months border.
supportsvgcanvasapi
(year: number, month: number, date: Date) => string | numberoptional
can be used to customize months label, returns abbreviated month name (english) by default. This can be used to use a different language
'before' | 'after'optionaldefault:'before'
defines month legends position.
numberoptionaldefault:10
px
define offset from month edge to its label.
Days
numberoptionaldefault:0
px
define spacing between each day cell.
numberoptionaldefault:1
px
width of days border.
stringoptionaldefault:'#000'
   #ffffff
color to use for days border.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
supportsvgcanvasapi
(day, event) => voidoptional
onClick handler, it receives clicked day data and mouse event.
supportsvgcanvasapi
Functionoptional
Custom tooltip component.
supportsvgcanvasapi
booleanoptional
   Showcase custom tooltip.
supportsvgcanvasapi