Skip to main content

Calendar Heatmap

<CalendarHeatmap
data={oneyear}
date=date
value=orders
title="Calendar Heatmap"
subtitle="Daily Orders"
yearLabel=false
/>

Examples

Multi-year Calendar Heatmap

<CalendarHeatmap 
data={orders_by_day}
date=date
value=orders
title="Calendar Heatmap"
subtitle="Daily Sales"
/>

Custom Color Palette

<CalendarHeatmap
data={oneyear}
date=date
value=orders
title="Calendar Heatmap"
subtitle="Daily Orders"
colorPalette={['navy', 'lightyellow', 'purple']}
/>

Without Year Label

<CalendarHeatmap
data={oneyear}
date=date
value=orders
title="Calendar Heatmap"
subtitle="Daily Orders"
yearLabel=false
/>

Options

Data

Name Description Required? Options Default
data Query name, wrapped in curly braces Yes query name -
date Date column to use for the calendar Yes column name -
value Numeric column to use for the y-axis Yes column name -
min Minimum number for the calendar heatmap's color scale - number min of value column
max Maximum number for the calendar heatmap's color scale - number 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. - error | warn | pass 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.). - string No records

Formatting & Styling

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

Chart

Name Description Required? Options Default
title Chart title. Appears at top left of chart. - string -
subtitle Chart subtitle. Appears just under title. - 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. - number auto set based on y-axis values
legend Turn on or off the legend - true | false true
filter Allow draggable filtering on the legend. Must be used with legend=true - true | false false
renderer Which chart renderer type (canvas or SVG) to use. See ECharts' documentation on renderers: https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/ - canvas | svg canvas

Custom Echarts Options

Name Description Required? Options Default
echartsOptions Custom Echarts options to override the default options. See reference page for available 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 reference page for available 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 - true | false false