Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
914

Thanks.
I tried the following in an entity card

- type: custom:mini-graph-card
  entities:
    - sensor.living_room_temp
  name: LIVING ROOM
  hours_to_show: 168
  points_per_hour: 0.25

However I get the same error… Should I do something with the following code also?

  - url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
    type: module
915

Hey!

  - url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
    type: module

This should go into the raw config editor, at the very top under resources.
See this guide for a good gif of that step. Save and exit the raw config editor.

Then add another card through the edit UI like you normally would but select empty card or whatever it’s called (should be at the very bottom).

Paste the following code, remember to not put a dash (-) before the type in the bottom config as this is automatically added by the editor.

type: custom:mini-graph-card
entities:
  - sensor.living_room_temp
name: LIVING ROOM
hours_to_show: 168
points_per_hour: 0.25
916

Thanks for the help.
I did place the code in raw editor.
Now although everything is installed ok (i hope) again when I go to the entity card i get the following.
In the fronded the are no errors but the card is empty

Picture2
Picture21538×555 24.8 KB

917

As I am looking to the gif at the end of .js has a version number
is it optional? mine has nothing

resources:
  - url: /local/mini-graph-card-bundle.js?v=0.8.2
    type: module

- url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
    type: module
918

This is good, means that the custom component is at least found, make sure the entity id is correct
Here’s an example of how it could look:

43
431010×836 1.62 MB

Not needed when using HACS, it’s normally useful to make sure the cache is cleared when updating to a new version of the card manually but HACS handles the caching for you.

919

you are right. it was the sensor entity. I kept the example…
Thanks!

920

My apologies if I am repeating something already within the previous 906 posts… (I did have a quick scan through)

I am trying to set this up over the top of a picture-elements card. It works, but I would like to change the mini-graph-card’s background transparency so that I basically just have the graph line over the underlying picture. Can that be done?

image
image448×654 95.5 KB

Also, is there a way to make it so the graph will show the value at any point along the graph line when hovering the mouse? (like how the core history graph does)
image

921

The graph uses the card background set in your theme. If you don’t want to make all your cards transparent you can make individual cards transparent with card-mod by applying this style:

    style: |
      ha-card {
        --ha-card-background: 'rgba(0, 0, 0, 0)';
      }

Or without the box shadow as well:

    style: |
      ha-card {
        box-shadow: none;
        --ha-card-background: 'rgba(0, 0, 0, 0)';
      }

There is also a group: option for the card but it messes with the padding of the title if set to true.

For the second issue you need to increase the number of point per hour.

922

Is it possible to replace the icon with state value instead? I would like to make it a little bit slimmer and have “name” and “state” on the same row if possible?

923

Currently only possible to get the icon and state on the same line, but maybe in the future.

...
align_icon: state
show:
  name: false

hyperion_8123_lovelace_example

1 Like
924

Can´t change the hours to show and points per hour. Added the two lines already in different areas of this code and nothing changes it actually. The temp values are correct, nighttime I saw you github link.

image
image978×509 37.2 KB

925

It might not always update in the live preview but if you actually save the card the graph will render with the defined config.

926

Not changing after saving, clearing cache or restarting :frowning:

927

Make sure your input_number.nighttime entity work correctly.

928

I copied your Node-Red code and get following issue. What code needs to go into data? :slight_smile:

image
image1330×588 40 KB

929

Sorry that’s not my code, that’s a fellow contributors code, I personally don’t use node-red.
Check this thread, maybe it can be of help:

I would have done it this way:

2 Likes
930

Any ideas on how to make a template for the color_thresholds?
So that e.g. all temperatures are shown using the same threshold colors?

I was testing with a separate. yaml file, containing the color values, but I could not get it to work.

931

Search for “YAML anchors”. Or there is this: Lovelace: Decluttering Card

932

I still think there is something odd with the state_map in my opinion.

I have now been using the input_number and it is working fine, but I also left the binary sensor there to check it and start to use it when the time was right… and now that binary sensor it’s apparently working fine, but when I add it to the graph to replace the input_number, it does not appear, feels like the on/off is not transalated to 1/0

933

I see the same issue here. My config:

aggregate_func: max
entities:
  - entity: sensor.hourly_gas
hour24: true
group_by: hour
hours_to_show: 24
line_width: 2
name: Gas consumption
points_per_hour: 60
show:
  graph: bar
  labels: true
type: 'custom:mini-graph-card'

When I compare to the normal history graph, I could see abnormalities, so I opened the same graph in a new private tab in FF, then I get a correct graph. Here an example:
Original graph:
(PNG%20Image%2C%20411%C2%A0%C3%97%C2%A0143%20pixels)

Wrong graph:
image

Correct graph:
image

1 Like