Skip to main content
Basic Usage 
{% heatmap
    data="demo_daily_orders"
    x="date"
    x_date_grain="year"
    y="category"
    value="sum(total_sales)"
/%}

​
Examples

​
With Custom Colors

With Custom Colors 
{% heatmap
    data="demo_daily_orders"
    x="date"
    x_date_grain="year"
    y="category"
    value="sum(total_sales)"
    title="Sales Intensity by Year and Category"
    chart_options={
        color_palette = ["#f7fafc", "#e2e8f0", "#cbd5e0", "#a0aec0", "#718096", "#4a5568", "#2d3748"]
    }
/%}

​
Attributes

​
data
String
required
Name of the table to query
​
filters
Array
default:"[]"
Array of column names to use as filters
​
date_range
Use date_range to filter data for specific time periods. Accepts predefined ranges (e.g., “last 12 months”), dynamic ranges (e.g., “Last 90 days”), custom date ranges (e.g., “2020-01-01 to 2023-03-01”), or partial ranges (e.g., “from 2020-01-01”, “until 2023-03-01”)Example:
date_range={
  range = value
  date = "string"
}
Attributes:
  • range: enum
  • date: string
​
x_date_grain
Time grain for date truncation (default: day for date columns)Allowed values:
  • day
  • week
  • month
  • quarter
  • year
  • hour
  • day of week
  • day of month
  • day of year
  • week of year
  • month of year
  • quarter of year
​
y_date_grain
Time grain for date truncation (default: day for date columns)Allowed values:
  • day
  • week
  • month
  • quarter
  • year
  • hour
  • day of week
  • day of month
  • day of year
  • week of year
  • month of year
  • quarter of year
​
x
String
required
Column name for x-axis categories
​
y
String
required
Column name for y-axis categories
​
value
String
required
Column name for cell values
​
title
String
Title to display above the chart
​
subtitle
String
Subtitle to display below the title
​
info
String
Info text to display in a tooltip next to the title. Can only be used with the title prop.
​
info_link
String
URL to link the info text to (can only be used with info)
​
info_link_title
String
Create a custom link title for the info link, placed after the info text (can only be used with info_link)
​
value_fmt
String
default:"num"
Format for values
​
x_fmt
String
Format for x axis labels
​
y_fmt
String
Format for y axis labels
​
x_sort
String
Sort order for x axis categories (asc or desc)Allowed values:
  • asc
  • desc
​
y_sort
String
Sort order for y axis categories (asc or desc)Allowed values:
  • asc
  • desc
​
value_sort
String
Sort categories by total value (asc or desc). Applies to the first axis without explicit sort.Allowed values:
  • asc
  • desc
​
legend
Boolean
default:"true"
Show color scale legend
​
borders
Boolean
default:"true"
Show borders around heatmap cells
​
chart_options
default:"{}"
Chart configuration optionsExample:
chart_options={
  color_palette = []
}
Attributes:
  • color_palette: array
​
where
String
Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.
​
having
String
Custom SQL HAVING condition to apply to the query after GROUP BY
​
limit
Number
Maximum number of rows to return from the query
​
order
String
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
qualify
String
Custom SQL QUALIFY condition to filter windowed results
​
width
Number
Set the width of this component (in percent) relative to the page width