TimeRange

@nivo/calendarsvgisomorphic

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.
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.
Style
optional
Define style for common elements such as labels, axes…
string[]optionaldefault:['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']
Cell colors.
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.
Array<0 | 1 | 2 | 3 | 4 | 5 | 6>optionaldefault:[1, 3, 5]
define weekday tickmarks to show
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.
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.