Home Components Calendar Heatmap

Calendar Heatmap

Loading... 
<CalendarHeatmap 
    data={orders_by_day_2021}
    date=day
    value=sales
    title="Calendar Heatmap"
    subtitle="Daily Sales"
/>

Examples

Multi-Year

Loading... 
<CalendarHeatmap 
    data={orders_by_day}
    date=day
    value=sales
/>

Custom Color Palette

Loading... 
<CalendarHeatmap
    data={orders_by_day_2021}
    date=day
    value=sales
    colorPalette={['navy', 'lightyellow', 'purple']}
/>

Without Year Label

Loading... 
<CalendarHeatmap 
    data={orders_by_day_2021}
    date=day
    value=sales
    yearLabel=false
/>

Options

Data

data
Required
Query name, wrapped in curly braces
Options:
query name
date
Required
Date column to use for the calendar
Options:
column name
value
Required
Numeric column to use for the y-axis
Options:
column name
min
Minimum number for the calendar heatmap's color scale
Options:
number
Default:
min of value column
max
Maximum number for the calendar heatmap's color scale
Options:
number
Default:
max of value column
emptySet
Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed.
Options:
Default:
error
emptyMessage
Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.).
Options:
string
Default:
No records

Formatting & Styling

colorPalette
Array of colors to form the gradient for the heatmap. Remember to wrap your array in curly braces.
Options:
array of color codes - e.g., colorPalette={['navy', 'white', '#c9c9c9']}
valueFmt
Format to use for value column (<a class=markdown href='/core-concepts/formatting'>see available formats<a/>)
Options:
Excel-style format | built-in format name | custom format name
yearLabel
Turn on or off year label on left of chart
Options:
Default:
true
monthLabel
Turn on or off month label on top of chart
Options:
Default:
true
dayLabel
Turn on or off day label on left of chart
Options:
Default:
true

Chart

title
Chart title. Appears at top left of chart.
Options:
string
subtitle
Chart subtitle. Appears just under title.
Options:
string
chartAreaHeight
Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX.
Options:
number
Default:
auto set based on y-axis values
legend
Turn on or off the legend
Options:
Default:
true
filter
Allow draggable filtering on the legend. Must be used with `legend=true`
Options:
Default:
false
renderer
Which chart renderer type (canvas or SVG) to use. See ECharts' <a href='https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/' class=markdown>documentation on renderers</a>.
Options:
Default:
canvas

Custom Echarts Options

echartsOptions
Custom Echarts options to override the default options. See <a href='/components/echarts-options/' class=markdown>reference page</a> for available options.
Options:
{{exampleOption:'exampleValue'}}
seriesOptions
Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See <a href='/components/echarts-options/' class=markdown>reference page</a> for available options.
Options:
{{exampleSeriesOption:'exampleValue'}}
printEchartsConfig
Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options
Options:
Default:
false

Interactivity

connectGroup
Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected