Plugins 〉Hourly heatmap

Marcus Olsson

Sign up to receive occasional product news and updates:


Hourly heatmap

  • Overview
  • Installation
  • Change log
  • Related content

Hourly Heatmap for Grafana

Build Release Marketplace Downloads License Twitter Maintenance

Important: As of July 2022, I'm no longer actively maintaining this plugin. At the time of writing, I'm not aware of any replacement panel.

A panel plugin for Grafana to visualize hourly heatmaps.

An hourly heatmap aggregates data into buckets by day and hour to analyze activity or traffic during the day.



The carpet-plot panel plugin is one of the most used plugins for Grafana. Unfortunately, it's no longer being actively maintained.

Grafana 7.0 introduced a new plugin architecture based on React. Instead of migrating the original plugin from Angular, this is completely rewritten from scratch, using inspiration from the original plugin.


This section lists the available configuration options for the JSON API data source.

Panel options


TimeName of the field to use for time. Defaults to the first time field.
ValueName of the field to use for value. Defaults to the first number field.


Show cell borderToggles a cell border to make it easier to distinguish cells with similar values
Show tooltipToggles the tooltip. Due to the current tooltip implementation, this severely impacts performance and I recommend that you disable this for large time intervals. For more information, refer to #12.
From and ToLets you choose the hours to display. This can be used to set working hours, or to filter parts of the day with low traffic


Show legendToggles the color spectrum
Show value indicatorToggles an indicator that shows the current value in the legend
Gradient qualityDetermines the quality of the color spectrum. Higher quality means more SVG elements being drawn. Reduce the quality if you experience degraded performance.

Field options

Group bySize of each bucket
CalculationCalculation to use for reducing data within a bucket
Color paletteColors to use for the heatmap. Select from any of the predefined color palettes, or select Custom to create your own. Select Field options to use the colors from the built-in Color scheme field option
Invert color paletteInverts the currently selected color palette
Null value colorColor to display when a bucket contains no data as opposed to a data value of 0.


Missing data

By default, data sources limits the number of data points to the width of the panel in pixels. If you're visualizing data over a long time, then you may need to adjust the Max data points under Query options in the query editor.

Missing data

Installing Hourly heatmap on Grafana Cloud:

For more information, visit the docs on plugin installation.


2.0.1 (2022-08-28)

Full changelog

Update to Grafana 9.

2.0.0 (2021-11-19)

Full changelog


  • Add option for 120 minute intervals (#40) (thanks @ChrizZz90!)
  • BREAKING CHANGE: Update to Grafana 8 theme API

1.0.0 (2021-06-15)

Full changelog


  • Set color for null values (#24) (thanks @KatrinaTurner!)
  • Fix dates in changelog (#26) (thanks @dnrce!)
  • Fix display processor bug in Grafana 8

0.10.0 (2021-02-16)

Full changelog


  • Make dimensions clearable
  • Add fallback panel for unsupported Grafana versions
  • Add wizard for configuring the query

0.9.1 (2021-01-13)

Full changelog

Bug fixes

  • Min and max were incorrectly calculated for aggregations (#16)

0.9.0 (2020-12-07)

Full changelog


  • Highlight the legend section for the selected hour (#15)
  • Select the fields to use for time and value
  • Add option to configure legend quality
  • Add option to use the new color scheme field option in Grafana 7.3+
  • Add option to show a cell border (#17)
  • Add option to disable tooltips

0.8.1 (2020-11-27)

Full changelog


  • Updated @grafana dependencies from ^7.0.0 to ^7.3.0
  • Improved release process using the new GitHub workflows for Grafana plugins