Lovelace: mini graph card

[fiftys]

what is your configuration for it now?
you can add as many as you need/want.

  state_map:
    - value: "100"
      label: hundred
    - value: "0"
      label: Zero
    - value: "-100"
      label: Minus Hundred.

This should work… add whatevre you need.

then for the color you just do

color_thresholds:
  - color: '#ff0000'
    value: 100
  - color: '#00ff00'
    value: 0
  - color: '#0000ff'
    value: -100

This is all untested, however im fairly sure it works… just use whatever values you have in the range you need.

Order does matter though

[Ildar_Gabdullin]

I am having a problem with mini-graph-card inside vertical-stack.

1. If a card contains only mini-graph-card then the graph is displayed.

2. If a card contains a vertical-stack with mini-graph-card then the graph SOMETIMES is NOT displayed.
   When I open a view containing the card, the graph is not displayed.
   When I refresh the browser’s page (F5) - the graph still is not displayed.

type: vertical-stack
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
        color: null
        show_points: true
        show_fill: false
        show_legend: false
        show_state: true
        show_indicator: false
        state_adaptive_color: false
    icon: ''
    name: 'CO2'
    unit: ''
    group: false
    hours_to_show: 1
    update_interval: 60
    points_per_hour: 60
    show:
      graph: line
      icon: true
      state: true
      labels: true
      points: true
      legend: false
      extrema: false
      name_adaptive_color: false
      icon_adaptive_color: false
      labels_secondary: false
    animate: false
    height: 100
    line_width: 2
    hour24: true
    smoothing: false

“Graph is not displayed” - means:

• current value is displayed,
• curve is NOT displayed.
  
  (the screenshot is for another sensor)

The graph is shown ONLY:

1. Sometimes after 1…5 minutes (by the way, the sensor is updated every 1 minute).
2. In “dashboard edit” mode - but sometimes in the “edit window” the graph again is NOT displayed.

Look, there is “update_interval: 60” in the card.
In case of “update_interval: 0” the graph is displayed.
I thought that “initially” (after F5 or opening the page) the graph does not have data since these data will be ready after 1 minute. But the graph DOES SHOW current value. And all problems take place only in vertical-stack.

[kalkih (Karl Kihlström)]

There’s an issue over on Github for this

Graphs not rendering when card is placed within vertical- or horizontal-stack cards.

Basically if you use the update_interval option inside a stack this will happen.

Should be fixed in the next mini-graph-card release

fix: Make sure that the graph is showed on initial load when 'update_interval' is configured

[Ildar_Gabdullin]

Oh, great, thank you very much for your job!

Initially I wanted to use update_interval = 0 - in this case the graph seems to be more “real-time”:

• the sensor is actually updating about every 30 sec (I think so, not sure);
• but I do not need to check the sensor so often - 1 minute is quite enough.
  That is why I decided to use update_interval = 60.
  OK, now I specify update_interval = 0 because of the vertical-stack issue.

There is one more issue in case of update_interval = 0.
Please compare two graphs.
All graphs are inside vertical-stack but I hope it does not matter.
The graphs on the left are with update_interval = 60, on the right - with update_interval = 0.
The graphs on the top are earlier, on the bottom - later.

Look, left graphs have same curve, right graphs are changing.

Update 25.03.23: since the actual update frequency of the sensor is 2 times bigger that the “points_per_hour” - then the curve is changing, and every 2nd time is “looks” like a real curve. To get precise data - always set “points_per_hour” at least equal (or even bigger) to the real update frequency.

[Ildar_Gabdullin]

There is one more issue about mini-graph-card.
I have a sensor with a value rounded to “no digits after decimal point”:

      # tVOC diff
      calc_tvoc_diff_cg1_cg2:
        friendly_name: 'calc: tVOC diff CG1-CG2'
        unit_of_measurement: 'ppb'
        icon_template: mdi:cloud-alert
        value_template: "{{ (states('sensor.cleargrass_1_tvoc')|float - states('sensor.cleargrass_2_tvoc')|float)|round(0) }}"

But I see some values with like “2 digits after decimal point”:

Here is a card for this graph:

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.calc_tvoc_diff_cg1_cg2
    name: Дельта tVOC (CG-1 - CG-2)
    color: null
    show_points: true
    show_fill: true
    show_legend: false
    show_state: true
    show_indicator: false
    state_adaptive_color: false
icon: ''
name: Дельта tVOC (CG-1 - CG-2) (1 мин)
unit: ''
group: false
hours_to_show: 1
update_interval: 0
points_per_hour: 60
show:
  graph: line
  icon: true
  state: true
  labels: true
  points: true
  legend: false
  extrema: true
  name_adaptive_color: false
  icon_adaptive_color: false
  labels_secondary: false
animate: false
height: 100
line_width: 2
hour24: true
smoothing: false

I wonder why I see not-rounded values in the graph.
Are these actual values in the selected points on the graph, or is it just an approximation?

Update 25.03.23: yes, these non-rounded values are shown due to approximation. Values displayed on the graph may NOT be actually read from a sensor - depends on how “points_per_hour” is set comparing to the “real update frequency” of this sensor.

[thisIO (Michael)]

@akifbayram

After looking at my other tabs, I realized the issue only appears when I use the ‘vertical-stack-in-card’. Here’s a screenshot showing no issues when separated normally.

Hello,

clould u post you yaml for these graph, espacially colors)
Thanks!

[QbaF]

Why I see this same graph completely differently (data) on three different devices.

PC/Tablet/Smartphone

[dmutpuu.l]

Hello, thank you for your job) I have a question: is it possible to show states from all graphs at some time point under the mouse cursor ? now it show only state of that graph where my cursor is located, but i have few graphs on one card and want to see all states at that moment or period…
And the same about current states, is it possible to show all current states?

[tom_l]

Probably not the answer you are looking for but Grafana can do that. Mind you it is not a ‘mini’ card.

[demetrius]

Is it possible to use a different color depending on the hours in the bar graph?
E.g. use blu for 00:00-08:00, red for 0.8-18:00, green for 18:00-00:00

[rosscullen]

Greetings all… learned so much from this thread… thanks to everyone’s contribution.

Quick question… does anyone know if it’s possible to have a separate set of “color_thresholds” for “secondary Y-axis”? I’m created a speedtest card and wanted seperate color_thresholds for “download speed”(100Mb/s) and “upload speed” (50Mb/s). Thanks

[Dueller (Jack Talisker)]

I’m experimenting a strange issue since the upgrade to Core 0.116.4 (from 0.115.x) and python 3.8.6.
If I start HA with my custom dashboard or I refresh it, two custom mini graph cards simply do not appear.
If I change view with anything else (e.g. settings or default auto dashboard) and then I return to my custom dashboard, the two cards appear regularly; then if I refresh the dasboard page the cards disappear again.
This behaviour occurs either in a PC with google chrome or with the android app.
HA 0.116.4 Core on a Raspbian Buster RPi 3/ Python 3.8.6.

The issue does not occur with two other custom mini graph cards stacked together horizontally (type: horizontal-stack).

[potat0]

Hi I’m trying to compact card to save space but after hours no success, two setting can lower 100 pixels for every graph with same data

this is photoshop of my goal:

Found css needs to modify:

style: |
  .states {
    color: red;
  }
  .header {
    color: cyan;
  }
  .info {
    color: lime;
  }

but every css setting tried in chrome inspect mode not working

Please help making any setting if it’s possible:

1. Title and state in same line
2. Mix/max state in one line

Thanks

[devastator]

I have a sensor that contains the value of my utility meter (I am not using the utility meter integration, it is a value from DSMR).

I can draw bar graphs per day perfectly, but it will display the current utility meter value. Is it possible to show the usage of today only ?

  - type: custom:mini-graph-card
    entities:
      - sensor.flukso_water_meterstand
    group_by: date
    hours_to_show: 168
    group_by: date
    aggregate_func: delta
    show:
      graph: bar
      state: false

[Deadpool]

I’m experiencing the same thing. First time when I open the page, it doesn’t show the mini graph cards. When I do a reload, it does show the mini graph cards.

[QSKONE]

Hello , Can you help me? My default view missing after page refresh.

cards:
  - decimals: 1
    entities:
      - entity: sensor.livingroom_temp_temperature
        index: 0
    hour24: true
    hours_to_show: 24
    line_color: red
    points_per_hour: true
    type: 'custom:mini-graph-card'
  - decimals: 1
    entities:
      - entity: sensor.bedroom_temp_temperature
        index: 0
    hour24: true
    hours_to_show: 24
    line_color: green
    points_per_hour: true
    type: 'custom:mini-graph-card'
  - decimals: 1
    entities:
      - entity: sensor.bme280_temperature
        index: 0
    hour24: true
    hours_to_show: 24
    line_color: blue
    name: Outside Temp
    points_per_hour: true
    type: 'custom:mini-graph-card'
  - entities:
      - entity: sensor.processor_use
      - entity: sensor.memory_use_percent
      - entity: sensor.disk_use_percent_home
    type: entities
  - entities:
      - entity: person.qsk
      - entity: binary_sensor.door_sensor_contact
      - entity: binary_sensor.water_leak_water_leak
      - entity: binary_sensor.motion_sensor_occupancy
      - entity: binary_sensor.camera_motion
    show_header_toggle: false
    type: entities
  - entities:
      - entity: sensor.miflora_soil_conductivity
      - entity: sensor.miflora_illuminance
      - entity: sensor.miflora_moisture
      - entity: sensor.miflora_temperature
    show_header_toggle: false
    title: Tomato
    type: entities
layout: horizontal
max_columns: 3
type: 'custom:layout-card'

[Memphisdj]

This is caused by the layout card. There is an issue on GitHub abou it. If you make the view, not the default one, it will work like a charm. I do believe this will be fixed in the next version of HA.

[devastator]

Hi,

using the (bar) graph to display the water usage of the last 3 days. Is there a possibility to put the value above each of the bars, so without the need to touch/hover them ?

[Ildar_Gabdullin]

Wrong icon displayed in case of “state_map” use.
There is a binary sensor of “connectivity” device_class.
I am using a “state_map” to display a graph for this sensor.

A wrong icon (for temperature) is displayed for the sensor:

In other cards (as well as in “Configuration” -> “Entities”) the icon is displayed properly:

Card’s definition:

type: 'custom:mini-graph-card'
entities:
  - entity: binary_sensor.net_is_available_internet
    show_points: false
    show_state: true
hours_to_show: 4
update_interval: 0
points_per_hour: 60
show:
  graph: line
  icon: true
  state: true
  labels: true
  points: false
line_width: 2
state_map:
  - value: 'off'
    label: Disconnected
  - value: 'on'
    label: Connected

Sensors’ declaration in configuration.yaml is provided below.
The sensor is “Connected” if there is a ping either to “google.com” or “ya.ru”.

binary_sensor:
  # Internet availability
  - platform: ping
    host: google.com
    count: 2
    scan_interval: 60
    name: net_is_available_google
  - platform: ping
    host: ya.ru
    count: 2
    scan_interval: 60
    name: net_is_available_yandex
  - platform: template
    sensors:
      net_is_available_internet:
        value_template: "{{ states('binary_sensor.net_is_available_google') == 'on' or states ('binary_sensor.net_is_available_yandex') == 'on' }}"
        device_class: connectivity

These actions did not help:

• restarting the browser (Firefox);
• clearing the browser’s cache;
• restarting HA.

Registered an issue:

Wrong icon displayed in case of "state_map" use

[sd_dracula]

Hi guys, I have combined the humidity with temp on a graph but the lines are quite flat even though the values are fluctuating quite a bit.

See the other graph beside it, I want the one with the humidity and temp to display the lines like that.

Any limits, values I can set for that?