Lovelace: mini graph card

As I said many people for last 2 weeks reported flatlines on Github. Probably some their cases were related to wrong using, cannot say for sure since just a few of them provided requested info, others ignored it and became ignored themselves))

1 Like

Hi,
I have an issue with Mini graph card that looks like the flat line error, but may be unrelated.

When I load any pages with a graph from mini graph card, the graph is completely empty, nothing appears.
At the same time, an error is raised,

WARNING (MainThread) [homeassistant.components.http.ban] Login attempt or request with invalid authentication from 192.168.1.48 (192.168.1.48). Requested URL: '/api/history/period/2023-03-22T13:13:12.526Z?filter_entity_id=sensor.global_temperature&end_time=2023-03-22T13:57:57.220Z&skip_initial_state&minimal_response'. (Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0)

Iā€™ve quickly noticed the error because fail2ban is banning my IP rather quickly because of itā€¦

I thought I solved the issue by cleaning up the entire Local Storage of my browser.
But I soon as I restart HA, the error come back.

I have the error since Iā€™ve upgraded from 2023.2.3 to 2023.3.4. When going back to 2023.2.3, the error disappears.

I can set up any graph that may help to investigate if needed.

EDIT: Damn the error is more serious than it appears at first !
I canā€™t edit any automation either because of a similar error !

WARNING (MainThread) [homeassistant.components.http.ban] Login attempt or request with invalid authentication from 192.168.1.48 (192.168.1.48). Requested URL: '/api/config/automation/config/1679494064809'. (Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0)

If you see a similar issue with other cards & features - then probably this is not related to mini-graph-card.

now I am stumpedā€¦ In all of my mini-graph-card configs with color-thresholds, I use html color names without issue.
example:

footer:

  type: custom:mini-graph-card
  icon: mdi:speedometer
  entities:
    - entity: sensor.speedtest_download
      name: Download
#       color: green
    - entity: sensor.speedtest_upload
      name: Upload
      color: skyblue # set fixed color, overriding the color thresholds
#          - entity: sensor.speedtest_ping
#            name: Ping
#            color: yellow
  color_thresholds:
    - value: 1000
      color: lightgreen
    - value: 800
      color: green
    - value: 700
      color: gold
    - value: 600
      color: orange
    - value: 500
      color: orangered
    - value: 400
      color: firebrick
    - value: 300
      color: purple
    - value: 200
      color: black

Except this one:

footer:

  type: custom:mini-graph-card
  entities:
    - entity: sensor.processor_use
      state_adaptive_color: true
  height: 100
  line_width: 4
  hours_to_show: 72
  show:
    average: true
    extrema: true
    icon: false
    labels: true
    name: false
  color_thresholds:
    - value: 5
      color: '#008000' #green
    - value: 15
      color: '#ffd700' #gold
    - value: 20
      color: '#ffa500' #orange
    - value: 40
      color: '#f00000' #red

if I replace the hex numbers with the color names, a completely black graph is displayed (note the state_adaptve_color is correct),

while with the hex numbers the graph looks likes this:

what possibly could be the issue here?

update

seems to be a lot of issues with those color_thresholds, checking the repo once more: this one is particularly connected bug(color_thresholds): defaults to black instead of closest out-of-bounds color Ā· Issue #764 Ā· kalkih/mini-graph-card Ā· GitHub

Ive now set a full range of possible values in the thresholds:

  color_thresholds:
    - value: 0
      color: green
    - value: 15
      color: gold
    - value: 20
      color: orange
    - value: 40
      color: red
    - value: 60
      color: purple
    - value: 100
      color: black

and that results in

still not as it should, but at least we have colorsā€¦
and I also noticed the GitHub - kalkih/mini-graph-card: Minimalistic graph card for Home Assistant Lovelace UI mentions colors have to be in hex formatā€¦ even though that is not true, or at least most configs just work fine with color names. as they should ofc.

moving the back to hex:

  color_thresholds:
    - value: 100
      color: '#000000' #black
    - value: 60
      color: '#800080' #purple
    - value: 40
      color: '#f00000' #red
    - value: 20
      color: '#ffa500' #orange
    - value: 15
      color: '#ffd700' #gold
    - value: 0
      color: '#008000' #green

is perfect:

guess we do have to use those ugly and human unfriendly hex colors after allā€¦ hope this would be fixable in a PR, with the new team of maintainers.

This is not so simpleā€¦
There are some issues with color_thresholds.

1 Like

Iā€™ve came to same conclusion, it seems to be more of an issue between the API and Firefox, and Iā€™ve opened an issue about it, as it seems Iā€™m not the only one concerned by that error.

Hey! Is there any way to create ā€˜dynamicā€™ threshold values? Iā€™d like to create a dynamic coloring for room temperature based on the last 7 days avg temperature.
Example how I tried without success:
color_thresholds:

  • color: ā€˜#0033da9ā€™
    value: {{ is_state(ā€œsensor.avg_temperatureā€ }}-1
  • color: ā€˜#00c0e3ā€™
    value: {{ is_state("sensor.avg_temperature }}
  • color: ā€˜#009865ā€™
    value: {{ is_state("sensor.avg_temperature }}+1

Everything which is not described in docs - is not supposed to work.

Hello! Iā€™m having trouble with the mini-graph card not displaying full data from a longer period. Specifically, I want to display data from the last 30 days and the graph shows the same value for half of that period. Even though HA official history graph does show correct data.

Hereā€™s a screenshot showing both graphs:

Am I doing something wrong or is it a bug?

My config of the mini-graph card:

type: custom:mini-graph-card
name: Powietrze 30 dni
entities:
  - entity: sensor.home_pm2_5
    name: PM2.5 na zewnątrz
  - entity: sensor.mi_air_purifier_3_3h_pm2_5
    name: PM2.5 w domu
points_per_hour: 0.1
aggregate_func: max
hour24: true
hours_to_show: 720
line_width: 3

1 Like

Try clearing a browserā€™s cache.
Also, check in another browser.

I tried, itā€™s not cache.

1 Like

Is there a way, to show at min and max field the full date (like 01.01.2023, 12:00) not only the day, date and time (like So.5., 12:00).

Moved duplicate of [Mini-graph-card throwing errors on new value - #3 by VolkerRacho]


I have a pretty neat mini-graph-card setup,
but it creates errors in the browser log on every value update:

Fehler beim Verarbeiten des Wertes fĆ¼r ā€˜maskā€™. Deklaration ignoriert.
Fehler beim Verarbeiten des Wertes fĆ¼r ā€˜stroke-dashoffsetā€™. Deklaration ignoriert.

graph.yaml:

type: custom:mini-graph-card
hours_to_show: 48
points_per_hour: 2
decimals: 0
hour24: true
unit: Watt
animate: false
line_width: 1
smoothing: on
# align_state: right
show:
  icon: false
  name: false
  state: true
  graph: line
  fill: fade
  points: hover
  legend: true
  average: true
  extrema: true
  labels: true
  labels_secondary: true
  name_adaptive_color: true
  icon_adaptive_color: true

entities:
  - entity: sensor.house_power
    name: Gesamt
    show_graph: false
    color: orange
  # - entity: sensor.energy_all_plug_devices_power
  #   name: Gesamt
  #   show_graph: false
  #   color: orange

  - entity: sensor.gpc_power
    name: GPC
    # show_state: true
    # show_indicator: true
    color: red

  - entity: sensor.server_power
    name: Server
    # show_state: true
    # show_indicator: true
    color: blue

  - entity: sensor.salon_power
    name: Salon
    # show_state: true
    # show_indicator: true
    color: pink

  - entity: sensor.waschmaschine_power
    name: Waschmaschine
    # show_state: true
    # show_indicator: true
    color: cyan

  - entity: sensor.trockner_power
    name: Trockner
    # show_state: true
    # show_indicator: true
    color: orange

  - entity: sensor.tv_sz_power
    name: Tv SZ
    # show_state: true
    # show_indicator: true
    color: yellow

  - entity: sensor.energy_belkin_conversion_3dprinters
    name: 3D Printers
    # show_state: true
    # show_indicator: true
    color: purple

  # - color: yellow
  #   entity: input_boolean.sleeptime
  #   name: Sleeptime
  #   show_line: false
  #   show_points: false
  #   show_legend: false
  #   y_axis: secondary

  - color: gray
    entity: sensor.sun_elevation
    name: Sun
    show_line: false
    show_points: false
    show_legend: false
    y_axis: secondary
# state_map:
#   - value: "on"
#     label: Sleeptime on
#   - value: "off"
#     label: Sleeptime on

Also after a while the frontend becomes unresponsive, that is the reason I checked on this.

I tried removing all of the options:

type: custom:mini-graph-card

entities:
  - entity: sensor.gpc_power
    name: GPC
    # show_state: true
    # show_indicator: true
    color: red

But also with this bare minimum I get these errors.
Does anyone have an idea?

What HA version do you use?
Have you tried to reinstall mini-graph-card?
How did you install it?
What browser do you use? Looks like these css properties are not supported by the browser - but these properties are supported by many of them.

How do I disable the default tap action of mini-graph-card and use my own tap action?

Hereā€™s the code

    - type: custom:mini-graph-card
      name: Thermostat
      entities:
        - entity: sensor.thermostat_temperature
      show: 
        graph: false
        line: false
        points: false
        legends: false
        indicator: false
        icon: false
        name: false
        fill: false
      align_state: center
      tap_action:
        action: more-info
        entity: climate.thermostat

When I tap the graph, specifically the temperature, it shows this as default:

But I donā€™t want to see that graph info at all regardless of where I tap in the card and want to see this (this is also what it shows me when I tap the outer part of the card):

Hereā€™s a GIF for better understanding
ezgif.com-video-to-gif

Is there a way to hide the state unless hovered over a graph point?

No. It may be only achieved by adding a corr. functionality in to the card.

How to change graphā€™s color dynamically:

There is a method to colorize a graph dependingly on a value using ā€œcolor_thresholdsā€ value.
But if someone needs a way to color the WHOLE graph dynamically - here is a brute-force method:

code
type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.processor_use
    show:
      points: true
    card_mod:
      style: |
        .line--rect,
        .fill--rect,
        .line--points {
          {% if is_state('input_boolean.test_boolean','on') %}
            {% set COLOR = 'cyan' %}
          {% else %}
            {% set COLOR = 'green' %}
          {% endif %}
          fill: {{COLOR}};
          stroke: {{COLOR}};
        }

This is an answer to this FR.

1 Like

Could you please elaborate?

Means - the functionality you asked is missing in the current implementation of the card.