TimeRange

@nivo/calendar
svg

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

roll the dice
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 for non-responsive component.

numberoptional

Chart default width for responsive component.

numberrequired

Chart height for non-responsive component.

numberoptional

Chart default height for responsive component.

number (ms)optional

Debounce width/height updates for responsive component.

(dimensions: { width: number; height: number }) => voidoptional

A callback for when responsive component is resized.

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.

Ref<SVGSVGElement>optional

Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.

Style
Months
Weekday
Days
Interactivity
Legends