TimeRange

@nivo/calendar

The TimeRange chart is similar to the Calendar chart, but it allows you to specify dates less than a year.

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

Chart data.

string | Dateoptional

start date

string | Dateoptional

end date

numberrequired

Chart width.

numberrequired

Chart height.

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
Themeoptional

Define style for common elements such as labels, axes…

string[]optionaldefault:['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']

Cell colors.

stringoptionaldefault:'#fff'
   #eeeeee

color to use to fill days without available value.

Months
(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.

Weekday
numberoptionaldefault:75
px

define offset from weekday edge to its label.

(0 | 1 | 2 | 3 | 4 | 5 | 6)[]optionaldefault:[1, 3, 5]

define weekday tickmarks to show

Weekdayoptionaldefault:'sunday'

define the first weekday: 'sunday', 'monday', etc.

Days
booleanoptionaldefault:true
   

force day cell into square shape

numberoptionaldefault:0
px

define border radius of each day cell.

numberoptionaldefault:0
px

define spacing between each day cell.

numberoptionaldefault:1
px

width of days border.

stringoptionaldefault:'#fff'
   #ffffff

color to use for days border.

booleanoptionaldefault:false
   

enable/disable label on day cells.

string | Functionoptionaldefault:'#000000'
   #000000
string | Functionoptional
open editor

Optional formatter for values.

React.CSSPropertiesoptional

Pass inline styles directly to the label.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

(day, event) => voidoptional

onClick handler, it receives clicked day data and mouse event.

Functionoptional

Custom tooltip component.

booleanoptional
   

Showcase custom tooltip.

Legends
LegendProps[]optional

Optional chart's legends.

add legend
legend[0]: bottom-right, rowremove
stringoptional
bottom-right

Defines legend anchor relative to chart's viewport.

'column' | 'row'optional

Legend direction, must be one of 'column', 'row'.

booleanoptional
   

Justify symbol and label.

numberoptional
px

Legend block x translation.

numberoptional
px

Legend block y translation.

numberrequired
px

Legend item width.

numberrequired
px

Legend item height.

numberoptional
px

Spacing between each item.

numberoptional
px

Item symbol size.

stringoptional
right-to-left

Item layout direction.