Lovelace: mini graph card


You may need to create the www folder. Mine for example is here:



Is there a way to use this card (or another card) to show just the static value (no history, just what it is right now) of a percentage sensor in a bar chart? I’m trying to do this for my disk usage sensor, but it seems to show at minimum two bars.

  - type: custom:mini-graph-card
    name: Disk usage
    hours_to_show: 1
    points_per_hour: 1
    upper_bound: 100
    lower_bound: 0
      - sensor.disk_use_percent
      graph: bar

Even though I’m specifying to show 1 hour and 1 point per hour, it still shows 2 bars.


Yes, there’s a bug in the latest release where the bar chart will show an additional bar.
The fix will be in the next release, and you should only see one bar with your config.

The bar will not represent the current state exactly though, unless the sensor only updates once an hour, it will show an average of all history entries from the past hour.


Cool. Showing an average is fine, as long as there’s just one value.



I gave it some more thought, and I think the graph algorithm should be robust enough now to possibly let users specify floating values for hours_to_show.
Then you would be able to set something like hours_to_show: 0.00001 and get the desired result.

I’ll see if it can be made possible.


Just tried that. Anything less than 1, and it shows the default number of bars.


That’s what I mean, it’s restricted to integers in the current implementation, but could change in the future.


And what folder did you put here:


Nice work, thanks for wonderfull cards.


That is very nice!

I’ve got a question, how do you calculate the € consume based on kWh?



Hallo, from efergy dashboard and then i took api from there.


I see, I tought you had a way to calculate it inside HA rom WATT setting a price-per-watt/hour :slight_smile:


You could do it quite easily with a value_template and the cost/unit and units… Would be doable even if the cost/unit was a variable (probably)


@kalkih How do we dictate the graph fill colour?


Hi Jim,
The fill color it depends on the single-entity color or the graph color, or the threashold color (which for now it still not per-entity as far as I know)

So you can either

                  - red
                  - orange

This will give the first entity the red color and the second the orange color.
Or you can:

                  - entity: sensor.dark_sky_temperature
                    name: Outside Temperature
                    color: red
                  - entity: sensor.dark_sky_apparent_temperature
                    name: Apparent Temperature
                    color: orange

Hope it helps :slight_smile:


Thanks David :slight_smile:
I tought there was already some component in within HA that I wasn’t aware of :slight_smile:


Thats how I did it in my instance.

I love the utility meter and I use that to calculate costs. I’ve got Daily and Monthly costs in HA


Is there a way to have the legends above the lines without using fill? I think I’ve read the entire thread without finding an answer.

And would it be possible to have the state and legend name the same color as the line itself?


Hi have an issue that is caused by my dark theme:
On dark theme:
On default theme:

Despite the option of manualy changing the theme, it would be great if we could define the colors of the multiline graph (like we do in the single line). It would solve this issue, and allow to control the colors we want on each line.
I’ve tried to manualy select the color of each sensor, but it doesn’t work on the multiline.
Is this someting you could allow on the card?

great work by the way :wink:


No, that’s not possible

Maybe in the future, there’s a feature request for this in the GitHub repo already #67

This is already supported, if you are using the line_color option you have to specify one entry for each entity, the colors are applied to the entities in the order they are specified in entities object.

... # rest of config
  - red # first entity
  - green # second entity
  - "#333333" # third entity

Alternatively, you can set the entity color directly in the entity object (simpler imo).

... # rest of config
  - entity: sensor.first
    color: red
  - entity: sensor.second
    color: green
  - entity: sensor.third
    color: "#333333"