Entities-with-graphs card?

Configuration Frontend
1

I want something which is basically the built-in “Entities” card, but with the value history in the background, so that I can get a sense of the history without it taking up a huge amount of space. All I can find is the built-in entities card (which doesn’t do graphs) and a ton of amazingly fancy third-party graph cards (which are all huge… I want each entity’s history to take up the same space as a single line of text).

Surely this must exist already, but my searches with google and HACS aren’t finding anything :frowning:

Any suggestions?

Quick mock-up to hopefully demonstrate what I’m imagining:

Screenshot 2023-09-08 at 21.24.42
Screenshot 2023-09-08 at 21.24.421006×652 28.6 KB

1 Like
2

It is possible to overlap two things:
— entity row;
— a simple and fast graph card like “sensor”,
by card-mod, but it needs css skills.

3

I was searching for the same feature and couldn’t find anything that matched exactly what I wanted. So, I decided to combine the default entities card with the power of the mini-graph-card.

By integrating these two, you can achieve a compact view where each entity’s history is displayed in the background, taking up minimal space—just like a single line of text.

Here’s a visual example of what the final card looks like:
image

Here’s a quick guide on how to set it up:

  1. Make sure that the mini-graph-card is installed. (Because we build on top of that component)

  2. Add the repository to HACS:

  • Go to HACS.
  • Click on “Frontend” and then the three dots menu in the top right corner.
  • Select “Custom repositories” and add the following URL: https://github.com/timmaurice/background-graph-entities.
  • Choose the plugins category and add the repository.
    It should look like that afterwards:
    image
  1. Use the custom card in your dashboard:
  • Add the card to your Lovelace UI with a configuration like this:
type: custom:background-graph-entities
entities:
  - entity: sensor.temperature
  - entity: sensor.humidity
hours_to_show: 24
  • Adjust the entities and other parameters to match your preferences.

Feel free to reach out if you have any questions or need further assistance!

Link to the repository:

3 Likes
4

this is fantatstic so thanks for pointing it out…not wanting to be being greedy, but is there anyway to combine this with the multiple entity row

I have this

entity: sensor.udmsepoeenergy
type: custom:multiple-entity-row
name: UDM SE POE
format: precision1
entities:

  • entity: sensor.udmsepoetodayenergy
    name: false
    format: precision2

which displays this

image

and to have the line in the background would be the icing on the cake for me (to have far right number graphed, this is live W being used)

5

:rotating_light: Component Update

Hi everyone! I’ve updated the component and moved it closer to the HACS standard.

:repeat: Repository URL Changed

Please update the repository link to continue receiving updates:

Repository: https://github.com/timmaurice/lovelace-background-graph-entities
Type: Dashboard

:link: GitHub: timmaurice/lovelace-background-graph-entities

:sparkles: New Features

Entity Icon Support

The card now defaults to the entity’s native icon if no icon is specified.

You can still override it manually using the icon property.

Configurable Graph Line Length

New config option:

line_length: short | long

This defines how far the mini-graph line extends within each row.

Use short for better text clarity.

Example:

type: custom:background-graph-entities
line_length: short
entities:
  - entity: sensor.temperature_outside

@jouster – your GitHub issue has been resolved :white_check_mark:
Thank you for creating that issue.

:new: Features from v0.0.6

  • line_opacity (optional): Controls the opacity of the graph line. Default is 1.
  • color_thresholds (optional): Enables gradient coloring based on value thresholds.

Example:

image

type: custom:background-graph-entities
entities:
  - entity: sensor.travel_time_to_nyc
    name: New York City
    line_opacity: 0.3
    color_thresholds:
      - value: 15
        color: "#00ff00"
      - value: 18
        color: "#ffff00"
      - value: 20
        color: "#ff0000"
      - value: 25
        color: "#640b0b"

:lady_beetle: Bug Fixes

  • Fixed alignment: entity names and values are now consistently rendered above the background line.

Feel free to test and give feedback – I’m happy to improve it further! :blush:

6

Hey @jouster — glad you’re enjoying it! :tada:

Unfortunately, it’s not compatible with multiple-entity-row, and I’m not planning to add support for it. That component is another custom card, and I want to avoid introducing additional dependencies on other custom components.

The current background graph functionality is made possible through a shortcut: it reuses logic from mini-graph-card, which is already quite established and widely used. Ideally, that’s the only dependency this card will rely on going forward.

So for now, the best option is to use background-graph-entities as a standalone card rather than combining it with multiple-entity-row.

Still, I totally get the use case — showing live W usage with a background graph would look awesome. I’ll keep your suggestion in mind, but I’d prefer to keep the component lightweight and self-contained for now.

Thanks again for the feedback!