Heatmap

Loading...
<Heatmap 
    data={orders} 
    x=day 
    y=category 
    value=order_count 
    valueFmt=usd 
/>

Data Structure

Heatmap requires your data to contain 2 categorical columns (1 for the x-axis and 1 for the y-axis) and 1 numeric column.

Example

No Results

Unpivoting your Data

If you have data spread across columns, you can use the UNPIVOT feature in your SQL query to prepare the data for the heatmap.

Example

If you have a query result called region_sales:

No Results

You can use UNPIVOT like so:

UNPIVOT ${region_sales}
on COLUMNS(* EXCLUDE(region))
INTO
    NAME product
    VALUE sales

Which will return this table, which can be passed into the Heatmap:

No Results

Examples

Basic Heatmap

Loading...
<Heatmap 
    data={orders} 
    x=day 
    y=category 
    value=order_count 
    valueFmt=usd 
/>

Custom Color Palette

Loading...
<Heatmap 
    data={orders} 
    x=day 
    y=category 
    value=order_count 
    valueFmt=usd 
    colorPalette={['white', 'green']}
/>

Rotated Labels

Loading...
<Heatmap 
    data={item_state} 
    x=item 
    y=state 
    value=orders 
    xLabelRotation=-45
    colorPalette={['white', 'maroon']} 
    title="Item Sales"
    subtitle="By State"
    rightPadding=40
    cellHeight=25
    nullsZero=false
/>

Options

Data

Required
Query name, wrapped in curly braces
Options:
query name
Required
Categorical column to use for the x-axis. If you want to use dates, cast them to strings in your query first
Options:
column name
Required
Categorical column to use for the y-axis. If you want to use dates, cast them to strings in your query first
Options:
column name
Required
Numeric column to use for the y-axis
Options:
column name
Minimum number for the heatmap's color scale
Options:
number
Default:
min of value column
Maximum number for the heatmap's color scale
Options:
number
Default:
max of value column
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.
Default:
error
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

Whether to treats nulls or missing values as zero
Options:
Default:
true
String to display in place of zeros
Options:
string
Array of colors to form the gradient for the heatmap.
Options:
array of color codes - e.g., {['navy', 'white', '#c9c9c9']}
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
Number representing the height of cells in the heatmap
Options:
number
Default:
30
Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off
Options:
number
Default:
0
Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off
Options:
number
Default:
2
Turn on or off value labels in the heatmap cells
Options:
Default:
true
Turn on or off value labels in the heatmap cells when app is viewed on a mobile device screen size
Options:
Default:
false
Turn on or off borders around cells. Default is to show light grey border around each cell. To customize border appearance, use `echartsOptions`
Options:
Default:
true

Axes

Turns on/off tick marks for the x-axis labels
Options:
Default:
false
Turns on/off tick marks for the y-axis labels
Options:
Default:
false
Degrees to rotate the labels on the x-axis. Can be negative number to reverse direction. `45` and `-45` are common options
Options:
number
Default:
0
Position of x-axis and labels. Can be top or bottom. top recommended for longer charts
Options:
Default:
top
Column to sort x values by
Options:
column name
Sets direction of sort
Options:
Default:
asc
Column to sort y values by
Options:
column name
Sets direction of sort
Options:
Default:
asc

Chart

Chart title. Appears at top left of chart.
Options:
string
Chart subtitle. Appears just under title.
Options:
string
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
Turn on or off the legend
Options:
Default:
true
Allow draggable filtering on the legend. Must be used with `legend=true`
Options:
Default:
false
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
Whether to show the download button to allow users to download the data
Options:
Default:
true
Whether to show the button to allow users to save the chart as an image
Options:
Default:
true

Custom Echarts Options

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'}}
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'}}
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

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