The TimeRange chart is similar to the Calendar chart, but it allows you to specify dates less than a year.
Chart data.
start date
end date
Chart width.
Chart height.
Chart margin.
'horizontal'
defines calendar layout direction.
'center'
defines how calendar should be aligned inside chart container.
0
Minimum value.
'auto'
Maximum value.
Define style for common elements such as labels, axes…
'#61cdbb'
, '#97e3d5'
, '#e8c1a0'
, '#f47560'
]Cell colors.
'#fff'
#eeeeee
color to use to fill days without available value.
can be used to customize months label, returns abbreviated month name (english) by default. This can be used to use a different language
'before'
defines month legends position.
10
define offset from month edge to its label.
75
define offset from weekday edge to its label.
'Sunday'
, 'Monday'
, 'Tuesday'
, 'Wednesday'
, 'Thursday'
, 'Friday'
, 'Saturday'
]define labels for weekdays
1
, 3
, 5
]define weekday tickmarks to show
'sunday'
define the first weekday: 'sunday', 'monday', etc.
true
force day cell into square shape
0
define border radius of each day cell.
0
define spacing between each day cell.
1
width of days border.
'#fff'
#ffffff
color to use for days border.
true
Enable/disable interactivity.
onClick handler, it receives clicked day data and mouse event.
Custom tooltip component.
Showcase custom tooltip.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.