Calendar Heatmap

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

Examples

Multi-Year

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

Custom Color Scale

<CalendarHeatmap
    data={orders_by_day_2021}
    date=day
    value=sales
    colorScale={[
        ['rgb(254,234,159)', 'rgb(254,234,159)'],
        ['rgb(218,66,41)', 'rgb(218,66,41)']
    ]}
/>

Without Year Label

<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

colorScale

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., colorScale={['navy', 'white', '#c9c9c9']}

valueFmt

Format to use for value column (see available formats )

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' documentation on renderers.

Options:

Default:: canvas

downloadableData

Whether to show the download button to allow users to download the data

Options:

Default:: true

downloadableImage

Whether to show the button to allow users to save the chart as an image

Options:

Default:: true

Custom Echarts Options

echartsOptions

Custom Echarts options to override the default options. See reference page 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 reference page 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