Lovelace: mini graph card

Thanks, to be honest the labels look like **** :wink: even without border radius right now.
Please, if you have time, open an issue in the GitHub repo, that way I won’t forget the request.

Okay, yes I’ve been utilizing the shouldUpdate function in LitElement since the initial release of this card, meaning the card is only updated when changes are detected to entities used in the card.

Performance issues could still occur however, especially if you are using several heavily configured cards in the same view.
This particular card can be quite demanding because it has to compute history data, some sensors updates very regularly and could contain 10s/100s of history entries per hour of history. All this history data then has to be computed in order to render the graph. This becomes especially demanding when the card is configured with many entities or with a high hours_to_show.
Think of a card, containing five sensors with each sensor being updated say 60 times an hour, with hours_to_show set to 168 (one week), that would result in 30240 history entries. Now, think if you have five similar cards in the same view…you get the point :wink:

The problem is most likely caused by a delay when fetching the history from the backend, I’ve experienced that it sometimes can take a while or even timeout completely when fetching the history, especially when being on a bad connection and/or when having a lot of cards all fetching history.

1 Like

You can edit the mini-graph-card-bundle.js file, and modify the div inside function _templateObject17()

I modified it from:

<div class='graph__labels flex'>


<div class='graph__labels flex' style='padding-left:10px'>

Then you have to save, increase the js version in ui-lovelace and thats it.

You probably have to put maybe 20px instead of 10, try it out.

Here is mine (i have also removed the decimals from the labels cause i’m not interested in them)


@kalkih - Man, great work, these cards look awesome.
I have one question tho, does the live color line works ? (the option with line_color_above and below)
Cause i tried to set one, and the only color displayed is yellow:

      - type: custom:mini-graph-card
        name: Outside temperature history
        icon: mdi:temperature-centigrade
        animate: true
          labels: true
        decimals: 1      
        entities: sensor.outside_temp
          - value: 0
            color: '#c9ffff'
          - value: 10
            color: '#ede071'
          - value: 20
            color: '#ff8c42'
          - value: 30
            color: '#ff3c38'          
          - value: -1
            color: '#66b3ba'
          - value: -30
            color: "#2f6690"

And this is how it is displayed:

I’d like to be able to use this to show the current and target temperature from a climate entity. I could pull out the values into a template sensor, but could you consider support for doing that direct from the component? i.e. list the climate entity attributes as an alternative to a sensor entity?

Right now that feature changes the color of the whole line based on the current state, this is a limitation by how the graph is rendered right now. We’ve discussed this earlier and it’s possible that in the future the line could be rendered in smaller section making it possible to change color of each section individually.

I don’t think so, sorry.
A template sensor is quite easy to setup and should do the job just fine as you said.

thanks for the explanation. anyway, it looks awesome just as it is, that would be just super sick if it will be possible.
keep up the good work :slight_smile:

1 Like

Excuse my ignorance but when I tried to edit this in Visual Studio Code I get this. this also happens with the media-player-bundle.js too but not the ‘normal’, non bundle .js files

The bundle is minified, best way to edit the card would be to modify the source and then build a new bundle, you can find the development instructions here.

i didn t build it, probably i did it in the wrong way, but i just beautified it ( i did it using an online tool).

This makes me think @kalkih might be thinking about a permanent solution…
Maybe I’ll wait and see :wink:

Yes, will be in the next release, see:

1 Like

That looks really nice. Thanks!

1 Like

Simply put, this card is amazing, thank you for all your hard work on making this great!

I have a couple of minor suggestions which I’m happy to put in GitHub if you prefer (I’m using v0.2.1).

  1. The legend text is slightly misaligned with the square boxes:

  2. When hovering over a line with multiple entities, would it be possible to reveal the entity name in place of the card title (e.g. it would show ‘Loft’ instead of ‘Indoor Temperatures 24hr’) in the same way the entity state changes to match which line the mouse hovers over please? This would be useful if I decide to not show a legend to help with the minimalist look.

  3. I noticed that when enabling fill, it blends the line shading as each line is drawn (easily seen with animate enabled). Is it possible to keep line colours the same between it’s own line and the line below. e.g. in the screenshot below, only orange appears below Loft, purple between Loft and Study lines, and red between Kitchen and Study lines? I realise this may be technically impossible so no problems at all if so.


well, they do, and, tbh, make the card unusable in my setup unfortunately. Im not doing anything special, just try to show 3 sensors on the card…

it grinds my system, and immediately has all my Hue lights go unavailable, which is an indicator of resource issues in the system. resulting in a spontaneous restart…

i will test it on a dedicated view, with only this card:

title: Test
icon: mdi:test-tube
path: test
#  - !include /config/lovelace/tiles/tiles_new_switches.yaml
#  - !include /config/lovelace/tiles/tiles_switches.yaml
#  - !include /config/lovelace/includes/dark_sky_custom_card.yaml

  - type: 'custom:mini-graph-card'
    name: 'Energie: verbruik - levering'
      - entity: sensor.netto_verbruik
        name: Netto verbruik
      - entity: sensor.calculated_bruto_verbruik
        name: Bruto verbruik
      - entity: sensor.zp_actuele_opbrengst
        name: Solar production
    hours_to_show: 48
    height: 100
    line_width: 4
    font_size: 75
      labels: true
      extrema: true
      fill: true
      points: true
      state: true

and see what happens.

__ update__

no difference. the only card on this view simply never loads (waited 2 minutes) and halts the system. tested it 2. first attempt had to restart through terminal ssh (HA interface wasn’t effective any more) second try restarted spontaneously.
I am forced to disable this beautiful card…

Thank you very much, appreciate the kind words!

Fix is in the dev branch and will be available in the next release

Fantastic idea! Please open an issue on github and I’ll get to it asap.

This should theoretically be possible with the help of masks and clip-paths (I think?), but might require a lot of work, open an issue for this as well, I’ll see if it’s possible to implement.

Thanks for the suggestions!

If the graph doesn’t even show up at all and your whole HA starts acting weird, it’s most definitely an issue in the backend.
Could be an issue with your database, you could try purging older history if you haven’t done so already and maybe consider switching form SQLite to something faster.

Here’s one of my views, loads without any issues.

Here’s the API call used by this card btw:

Hi @Mariusthvdb, just to back up @kalkih I’ve not seen any performance issues with using 6 instances of this custom card, two of which have 5 sensors each.

Do you see the same issues if you try using the history-graph card?

Thanks, I’ll do that now!

No problems, only worth it if a lot of other people ask the same too.

1 Like

What i am missing ?


did this steps:

  1. Download and copy mini-graph-card-bundle.js from the latest release into your config/www directory.
  2. Add a reference to mini-graph-card-bundle.js inside your ui-lovelace.yaml .

If you’ve done those two steps it should work.
Are you using lovelace in yaml mode?
Please post your resource reference yaml.