Treemap Card - Visualize many entities as a heatmap

Share your Projects! Dashboards & Frontend
1

Hey everyone!

I was looking for a solution to have a heatmap card for my investments as well as visually show anomalies across many entities (humidity, servers resources, etc.) and ended up building my own card. Thought I’d share it with others who might find it useful.

screenshot.png2082×1688 368 KB

It’s a treemap - bigger rectangles = higher values, colors show the range. Similar to those stock heatmaps if you’ve seen those.

GitHub: GitHub - omachala/ha-treemap-card: Treemap card for Home Assistant - visualize sensor data as interactive heatmaps. Rectangle size and color show relative values at a glance.

What I use it for:

  • Stock portfolio with daily % changes
  • All humidity sensors on one card
  • Room temperatures (size inverted so cold rooms stand out)
  • Lights overview - it picks up actual light colors which is pretty neat

Quick example:

  type: custom:treemap-card
  title: Humidity
  entities:
    - sensor.*_humidity
  color:
    low: '#f0b913'
    high: '#1157f0'

Supports wildcards so you don’t have to list every entity manually.

Available in HACS - search for “Treemap Card”.

Coming soon:

  • More entity types (climate)
  • Custom tap actions

Let me know what you think!

7 Likes
2

Nice card! Using it in a few places such as a view that tracks sensors with low battery. I find it a better visual than just a list.

3

Very nice @omachala
I was searching for a treemap solution and this looks very nice.

Have you thought about implementing a solution for individual scales for different entities? Cases for me would be when temperatures, where I want to check that everything is good with a glimpse, but the ranges are quite different for my workshop and my livingroom.

Another case is energy consumption - I would like to immediately see what is out of the ordinary that is also completely different scales for different meters.

4

Hi, first of all: Amazing work, I was looking for something like this for quite a while.

I have a little suggestion, but I dont know how much work that would be to implement.

I have a usecase that could benefit from a fixed order of values. So that I can set wich entity is the first one (top left) and the second one, and so on.
On the bottom left Image it looks like you have something similar working, at least the the percentages are not strictly decreasing. Is there a trick to that? I could not get it to work.