Lovelace: mini graph card

Hi there, I have something I don’t fully understand.

I have build the following card, but I just don’t get why the Graph has that greenish blueish color.
The Dots though are correctly colored Orange.

I would be thankful for any Tipps on how I could fix that, I tried for way to long now.
Thanks in advance!

Suggest you to check with a stock history-graph card first since “32767” value is rather familiar to me.
Also, define lower_bound for mini-graph-card.
Also, “value” is a “start” value, not a “stop” value.
Also, suggest for testing to use SIMPLE and CLEAR colors like “red”, “green” instead of these hex colors to avoid confusing about “greenish blueish”.

Because the energy dashboard uses energy sensors, not power sensors. Post a screenshot of your energy dashboard’s config here.

Well, I found the Problem, 32767 is the max possible value for an sensor in HA. It seems it only takes int16. So The Problem lies with the integration delivering a Value bigger than that I guess.

I recommend using the great MeasureIt integration from @danieldotnl:

It creates sensors to count, to measure duration, …
A duration is measured in seconds.
use such a sensor as input for your mini-graph-card

Is it possible to manualy define the Y Axis range ?

This is my swiming pool temparature with day / night.
I would like to normalize Y axis always displaying a range of 20° - 35° C

image

As always - check docs.
Particularly “bound” options.

Sun Elevation
my goal is to show the power delivery of my solar panels depending on the sun elevation.

as a start I wanted to show the sun elevation in the mini graph card. It didn’t work, unfortunately, hence I stripped down the code as below:

type: custom:mini-graph-card
entities:
  - entity: sun.sun
    attribute: elevation
    show_graph: true
show:
  graph: line

image

But the result is still not showing the line graph for the elevation, but it shows the value at the top, which indicates the entity sun.sun and its attribute elevation are available.
looking at the labels - both (max and min) are 0 (zero) - makes me thinking that there is something to be done.

I am grateful for any hint to get it working.

Your config looks fine. Try clearing your browser cache and use your browser’s dev tools to check the JS console for errors.

thank you @parautenbach

I’ve used several browsers on my PC, even in privacy mode; I cleared the cache more than once.
and I used the companion app on Android.

The situation remains the same, no line for sun elevation.

I checked the developer tools as well, but I am not too familiar with them. In the console I didn’t notice anything related to the mini-graph card. There were some messages about bubble-card and the decluttering card though

When you view the history for the sun sensor, does it plot the main state? In other words, have you perhaps excluded the sun sensor from your recorder?

Do you have another sensor with a numeric attribute you can plot?

If it’s pretty clean like this (i.e. no errors), then things are probably loading fine.

@parautenbach Excellent hint about the recorder! :pray:
I excluded sensor.sun* from being recorded. (side remark: I didn’t exclude sun.sun…)

After enabling recording of sun.sensor* the situation got better and out of curiosity I added the elevation twice to the graph card

  • as an attribute of sun
  • as an entity: sensor.sun_solar_elevation
type: custom:mini-graph-card
lower_bound: 0
upper_bound: 90
hours_to_show: 2
aggregate_func: max
height: 350
points_per_hour: 60
line_width: 2
entities:
  - entity: sun.sun
    name: attr elevation
    attribute: elevation
    show_graph: true
  - entity: sensor.sun_solar_elevation
    name: sensor elevation
    show_graph: true
show:
  graph: line
  labels: true

image

for the entity sensor.sun_solar_elevation the line is drawn, but not for the attribute.

I double checked in my recorder.yaml, there is not occurance of *sun* anymore. And yes, I restarted homeassistant :wink:

For my usecase it doesn’t matter whether I use the attribute or the entity. I now go for the entity. But overall I am still curious :wink:

And yes, there is history data for sun

Great!

Yes, I forgot that it’s all separate sensors now as part of the move away from attributes clogging up the state engine and DB.

1 Like

Hi,

I have HVAC thermostat a and entities is climate.termostat_dilna.

How can I use mini graph card to get “local_temperature” of climate.xxxx?

Do not have any “climate” entities in my setup.
Is that “local_temperature” an attribute inside a “climate” entity?
If yes - use an “attribute” option, it is described in Docs for mini-graph-card.

Could someone help me with this layout issue? I’ve nested the graph inside the entities card so I can match the title text to my theme - only issue is the extra padding which I can’t seem to remove:

image

If I uncheck this padding it looks good:
image

image

Result:

image

I tried to use card_mod but it’s not having an effect:

  card_mod:
    style:
      .card-mod:
        $: |
          :host ::slotted(.card-content) {
            padding: 0 !important;
          }

Thank you, It works.

type: custom:mini-graph-card
name: Dílna
hours_to_show: 168
points_per_hours: 0.1
entities:
  - entity: climate.termostat_dilna
    attribute: current_temperature
font_size: 55

Hi guys,
I have this card and I would like to make some changes, I would like to change the highlighted information to temperature instead of humidity, however, to do this I have to change the order of the graphics, but if I do that, the color codes do not work, I would also like to remove data at the edges of lines when selected

type: custom:vertical-stack-in-card
cards:
  - square: false
    type: grid
    columns: 3
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.wen_shi_du_chuan_gan_qi_wifi_temperatura
        primary_info: state
        secondary_info: name
        name: Temp
        icon_color: red
        fill_container: false
      - type: custom:mushroom-entity-card
        entity: sensor.wen_shi_du_chuan_gan_qi_wifi_umidade
        primary_info: state
        secondary_info: name
        name: Humidity
        icon_color: blue
      - type: custom:mushroom-entity-card
        entity: sensor.wen_shi_du_chuan_gan_qi_wifi_bateria
        primary_info: state
        secondary_info: name
        name: Bat
        icon_color: yellow
        fill_container: false
    title: Sacada
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.wen_shi_du_chuan_gan_qi_wifi_umidade
        name: Humidity
        color: var(--blue-color)
        y_axis: secondary
        show_line: false
        show_State: true
      - entity: sensor.wen_shi_du_chuan_gan_qi_wifi_temperatura
        name: Temperature
        show_State: true
    color_thresholds:
      - value: 20
        color: '#33FFF6'
      - value: 25
        color: '#FFC733'
      - value: 30
        color: '#FF0000'
    hours_to_show: 24
    points_per_hour: 1
    line_width: 3
    font_size: 40
    smoothing: true
    show:
      name: false
      icon: false
      state: true
      legend: false
      fill: fade
3 Likes

labels: false
labels_secondary: false

Hello,
Is it possible to draw some cumulative bar charts like the picture bellow ? Or cumulative areas ?
I would like to display on the same graph:

  • irrigation water
  • water from rainfall

If not any suggestion will be welcome Thanks :slight_smile: