Lovelace: mini graph card

Not yet, but I’ll see what I can do about it :wink:

Thanks! Yes, It’s all about getting inspired and you managed to get me just that :laughing:

I have a lot more for you when you get done with these additions lol :wink:

I have ideas around threshold graphs and “green zones” for the plant sensors I will pm you a screen of what I have.


Including a redesign, support for multiple entities, optional animations & much more.

A few breaking changes had to me made (see changelog) in order to make some of the new features possible, checkout the updated README for up to date instructions and examples.

Big thanks to @jimpower for inspiration & brainstorming, and thanks to @iantrich for adding the group option.

@Mariusthvdb Multi-colored graph lines based on state did not make it into this release, unfortunately.

EDIT: Forgot to say it but if you’re not a fan of the new design, you can still have the old look by setting some options, see this example for some pointers.


  • UI redesign

  • Added: support for multiple entities (BETA) #28

  • Added: support for multiple line_color entries

  • Added: graph data points with information on hover, see points option under the show option

  • Added: animate option to have the graph animated on initial load

  • Added: points_per_hour option to specify amount of data points that should be rendered for each hour (basically the graph detail/accuracy).

  • Added: support for multiple color thresholds with new line_color_above & line_color_below options

  • Added: allocated space for the graph -> less jerky movements when loading in

  • Added: graph legend, visible if multiple entities is present

  • Added: align_header, align_icon & align_state options #27

  • Added: show option, to manage visible/hidden UI elements

  • Added: entities option

  • Added: group option to remove paddings/box-shadow #26 (@iantrich)

  • Fixed: bug were history data would be fetched when graph was hidden

  • Fixed: decimals option not being applied to labels #19

  • Fixed: Y-scale based on absolute extrema causing inconsistent results, now based on moving average same as the rest of the graph.

  • Deprecated: entity option, use new entities, accepts string or list (deprecated)

  • Removed: detail option, use new points_per_hour option (Breaking change)

  • Removed: hide options, use new show option (Breaking change)

  • Removed: labels option, use labels in new show option (Breaking change)

  • Removed: line_value_above, line_color_above, line_value_below & line_color_below options (Breaking change)




This is awesome!!! Love it!!!

I’ve combined my Speedtest graphs into one, like I use to have with the boring block history-graph card. This is so much better.

One thing I’d like to see is to be able to add a second sensor state to the card. There is one on the left, and a heap of wasted space on the right. In my case with my Speedtest graph, it shows the first sensor which is download, I’d like to show the upload as well. Would also be handy when show temp and humidity on the same card.

Not sure if this is possible, but would be great if it is.

Thanks for your hard work with this.

Oh, another thing I just noticed. I can’t bring up the popup info card for the other sensors. Clicking anywhere and on anything only brings up the popup info for the first sensor? Is this a bug?


Yes legend thanks now to see if I can adapt into my project and finish before the next podcast

1 Like

Definitely something I want to add as an option in the next release, maybe something like a show_state option for entity entries, similar to how there’s the name option right now.

# Example of future option
- type: custom:mini-graph-card
    - entity: sensor.example
      show_state: true
    - entity: sensor.example2
      show_state: true
    - entity: sensor.example2
      show_state: false

Not a bug, I just haven’t added support for that yet when it comes to multiple entities.
So, what do you think about this:

  • Pressing/clicking the entity name in the legend will bring up the popup for that entity.
  • Pressing/clicking the state (when I’ve added support to display multiple states) will bring up the popup for that entity.
    If you have any suggestions or preferences on how this should work, please let me know.

Edit: how does the default history-graph card solve this btw?

Thanks for the feedback!

Looking forward to see the results :smiley:

Good to know. Thought that may have been the case. I think something like that option will work, but need to think of people that have many sensors, and a default state. Guess maybe a max. amount of sensors and then a new line starts? Just an idea otherwise having 4 or 5 states will start to get squishy and messy. I think having it start a second line would be the best approach as ugly as it may be but it will still be neat, then people can set a sensor to false for the ones they don’t want.

Yep, that works well for me. It’s pretty much what I expected to happen. Also, remove the click event from clicking on the graph, or have it open the correct info card. The native history graph doesn’t have a click event on the graph itself. Actually, there is no popup info cards at all. Just clicking on the legend will hide that sensor from the graph.

1 Like

I think default will be to only show the state of the first entry.
Yes moving to the next line when no more horizontal space is available will probably end up being the behaviour, it might look ugly, but at least the option will be there.

Good catch, right now it’s actually not possible to press the graph points on a touch device to see history information, works on desktop because you just hover over them with the mouse.

Sounds good!!

@kalkih I’m getting errors with new card


I’m clearly selecting from the sensor domain

That’s the old version still loading
Bump the version number at the end of the resource reference, or clear cache.

@jimpower A bit off-topic, but how did you make the temperature and humidity card with the min and max values? Is that a specific card or are you using picture elements?
I have checked your Github but couldn’t find this card there.

@gerard33 this is a little project I’m working on all shall be revealed in due time just trying to make some things user friendly more details to come in upcoming HA podcast. I actually need to do some more collaboration with @kalkih see if he can help me with the custom component side.

Send me a pm if you would like code in its current format it will most likely become redundant once @kalkih adds these options to this awesome card. Speaking of which is the min/max available in this latest update?

** Nevermind found out the answer is yes :wink: **

The min-max is indeed available in the latest update of the graph card. But it’s still great to have this in a card like yours, as min-max values are not shown when you set graph: false in the mini graph card.
But maybe this can be added in the mini graph card as an option.


Thanks for the info, will fix this in the next version :+1:

1 Like

@kalkih when I set

location_icon: left
location_state: center

It makes no change to card state and icon still remain in original card position


I see I forgot to change the example yaml, they were renamed to align_icon & align_state prior to release.

1 Like

works a treat once again love your work



@kalkih when you select the “more_info” for second selected entity it selects the info for first entity