Lovelace: mini graph card

Oh, I see what you mean now, yeah that’s true, in fact all entity options that are show_* works that way, you can’t enable them if they are disabled in the base, you can only do the other way around, disable them if they are enabled in the base. That’s probably also why the option descriptions are Set to false to hide the *.

(With enabled/disabled I refer to true/false)

Would require some work to change this, not sure if it will happen, you can kinda achieve the wanted style in other ways (card-mod).

So I should put fill true on “show” and in each entity put show_fill to false except the night_time one?

That would be the way to go yes, and if you want the other effect of fill: false (the padding) add it with card-mod.

Hi Kalkih,

Is there any way to see the time and temperature scale as in History Graph Card?
If not, there is the possibility to implement that?


thanks in advance…

No, that’s not possible right now.
Yes, It could be implemented, there’s an open feature request for it on github #21.

1 Like

Not sure what is going on here:

aggregate_func: max
color_thresholds:
  - color: '#039BE5'
    value: 0
  - color: '#0da035'
    value: 5
  - color: '#e0b400'
    value: 7.5
  - color: '#e45e65'
    value: 10
entities:
  - entity: sensor.total_cost_today
group_by: date
hours_to_show: 168
name: Energy Cost Per Day
show:
  graph: bar
  labels: true
style: |
  ha-card {
    border: solid 2px var(--primary-color);
  }
type: 'custom:mini-graph-card'

The last two days are incorrect. For example yesterday is showning $3.79 when it was actually $5.64

Untitled0

Untitled

Hi,

I have two graphs in my diagram and I would like to have different line_width for each of them.
Is this possible?

When I’m trying the line_width option it applies to both the lines…

Make sure you got the latest version (0.8.2), fixed some issues related to group by date when missing data etc.

Otherwise, possibly related to #193

Hey,
No that’s not possible, as you noticed, it applies to all entities and I don’t think this will change, line_width is used in various places for the rendering and computation of the graph, to determine margins/padding etc.

Make sure you got the latest version (0.8.2), fixed some issues related to group by date when missing data etc.

Otherwise, possibly related to #193

Yep I’m up to date. It’s happening when not hovering too.

It’s strange, this morning when I checked the values were correct. Now they are not correct again.

EDIT: it seems to be some sort of caching problem. Forced cache refresh (Ctrl+Shift+R or Ctrl+F5) does not help but opening a private browsing window does show the graph correctly. Also the iOS app (beta 2.0) always shows the correct graph.

I understand that this lovelace works with sensor entities. Is it possible to work with climate entities? I have Air Conditioning Units that have temperature sensors and I would like to use this graphs to show history of current temperatures.

Yes, create a template sensor for each attribute you want to graph.

Soon HACS will be able to tell you if you don’t have a installed plugin added your Lovelace configuration.

The reason for that change was that I figured it was not fear to the developer to rewrite the name of the plugin…

1 Like

Thank you so much. It’s working perfectly. New to HA, did not know about template sensors.

1 Like

Any ideas to why I don’t see anything else then a line?

My top card:

cards: null
color_thresholds:
  - color: '#87ceeb'
    value: 18
  - color: '#eaeb87'
    value: 19
  - color: '#eb8787'
    value: 21
entities:
  - sensor.sovrummet_sensor_temperature
group_by: date
hour24: true
hours_to_show: 24
name: "\U0001F6CC Sovrummet"
points_per_hour: 1
show:
  icon: false
  labels: true
style: |
  ha-card{
    background: rgba(0,0,0,0.4) !important
  }
  ha-card{
    color: #ccc !important
  }
  ha-card{
  --iron-icon-fill-color: rgb(135,206,235);
  color: #009999
  }
  span.ellipsis{
  font-size:24px !important;
  }
  div.name, span.ellipsis{
  opacity:1 !important;
  }
type: 'custom:mini-graph-card'

My bottom card:

cards: null
color_thresholds:
  - color: '#fdff62'
    value: -1
  - color: '#40a0e0'
    value: 0.5
  - color: '#82ebe0'
    value: 0
decimals: 0
entities:
  - entity: sensor.kattlada
group_by: date
hour24: true
hours_to_show: 24
name: "\U0001F431 Kattlådan"
points_per_hour: 1
show:
  graph: bar
  icon: false
  labels: false
  state: false
style: |
  ha-card{
    background: rgba(0,0,0,0.4) !important;
    padding: 20px;
    padding-bottom: 2px;
  }
  ha-card{
    color: #ccc !important
  }
  ha-card{
  --iron-icon-fill-color: rgba(255,255,255,0.85);
  color: #009999
  }
  span.ellipsis{
  font-size:24px !important;
  }
  div.name, span.ellipsis{
  opacity:1 !important;
  }
title: "\U0001F431"
type: 'custom:mini-graph-card'

I solved it by removing "group_by: date", I do have another question…
When hovering over the regular graph I see what hour each point represent. How do I enable this for my bar-graphs?

Hovering over bars should do the same thing:

Hi Karl,

I was wondering yesterday, when in group by date, wouldn’t be possible (if not even better) to have the date (format to be configurable like DD/MM/YYYY) instead of the 00:00 - 23:59 format for the “past days”?

Thanks

Was actually working on this just the other day, will hide the timestamp in the future when grouped by date.
Thanks!

1 Like

Hi
I am still new to HA and now I am trying to make the interface more interesting so this the first thing I would like to add.
I installed it with HACS but now I am confused where shall I place the following code

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

I can not find the lovelace.yaml. I tried to place in the row editor but again (although I manage to save it) I can not figure out how to continue…
For example where do I place the following?

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

Can someone help a little please?

edit: I placed the above code at the raw editor
and I am getting this

Custom element doesn't exist: mini-graph-card.
{
  "type": "custom:mini-graph-card",
  "entities": [
    "sensor.living_room_temp"
  ],
  "name": "LIVING ROOM",
  "hours_to_show": 168,
  "points_per_hour": 0.25
}

Put the above code in a entity card.