Lovelace: mini graph card

[teeodor (Matteo)]

sensor:
  - platform: history_stats
    name: Contaore Caldaia
    entity_id: switch.shelly1_e09xxxx
    state: "on"
    type: time
    start: "{{ now().replace(hour=0, minute=0, second=0, microsecond=0) }}"
    end: "{{ now() }}"

    - type: custom:mini-graph-card
      entities:
        - entity: sensor.contaore_caldaia
          color: red
      name: Tempo accensione Caldaia
      hours_to_show: 168
      aggregate_func: max
      group_by: date
      font_size_header: 14
      animate: true
      show:
        graph: bar
        icon: false

[Mariusthvdb (Marius)]

not sure my setup above works as expected…

after hovering a bit, the graphs seem to change and all show the same graph…

reloading the view brings back the correct graphs:

seems we have another cluttering anomaly?

[Dozent]

Tell me how to disable all these marks, as it is done in the standard functionality

[Mariusthvdb (Marius)]

what am I overlooking here… trying to approach the bar-card graph in this screenshot (above) with the maintained mini-graph-card (below), I cant seem to find the correct syntax for coloring the bars:

  - type: custom:mini-graph-card
    name: Kans op zon
    show:
      graph: bar
    hours_to_show: 1
    color_thresholds:
      - color: '#808080' #grey
        value: 25
      - color: '#87ceeb' #skyblue
        value: 50
      - color: '#ffd700' #gold
        value: 100
    entities:
      - sensor.buienradar_sunchance_1d
      - sensor.buienradar_sunchance_2d
      - sensor.buienradar_sunchance_3d
      - sensor.buienradar_sunchance_4d
      - sensor.buienradar_sunchance_5d

as can be seen, the graphs value seems to be ok, and hovering those bars indeed show the correct % of chance.
the colors wont be picked though.

any sharp eyes spotting my error please?

_update-

found it… I was using the number as per limit, while it is the lower limit.:

    color_thresholds:
      - value: 0
        color: grey
      - value: 26
        color: skyblue
      - value: 51
        color: gold

makes it happen. never mind me…

would be nice of we somehow can use the name inside the bar. and make the graphs just that bit more illustrative of their meaning.

first though trying t figure out why this config is terribly slow in rendering.(when used on a view with another mini-graph-card and an apexcharts card…commenting those out makes the world of difference)

[schiben (Ben)]

I’m using the mini graph card with my Nest thermostats and I love the way it looks. I was previously using the standard graph card. The only thing I want to try and add to the mini graph is the state (heating/cooling) on the same timeline similar to what the standard graph does.
Something like this

[schiben (Ben)]

Something similar to how this example looks. Hopefully be able to tint the shaded area with either red or blue for heating or cooling.

[Mariusthvdb (Marius)]

anyone understands why I see black line and legends?

type: entities
title: Uv index
card_mod:
  class: class-header-margin
entities:
  - type: custom:mini-graph-card
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: -8px -16px 0px -16px;
        }
    entities:
      - entity: sensor.openweathermap_uv_index
        state_adaptive_color: true
      - entity: sensor.current_uv_index
        state_adaptive_color: true
    height: 100
    line_width: 3
    font_size: 75
    show:
      fill: fade
      extrema: true
      icon: false
      name: false
#       name_adaptive_color: true
    color_thresholds:
      - value: 0
        color: palegreen
      - value: 1
        color: lightgreen
      - value: 2
        color: green
      - value: 3
        color: gold
      - value: 4
        color: orange
      - value: 5
        color: darkorange
      - value: 6
        color: orangered
      - value: 7
        color: red
      - value: 8
        color: crimson
      - value: 9
        color: firebrick
      - value: 10
        color: darkred
      - value: 11
        color: maroon

if I hover the graph the colors are reflected in the points:

[homebrew (john)]

I was about to post about the same issue. I have color thresholds set, yet the line shows solid color, but when I hover, the points show appropriate color thresholds.

[Hell255]

Same problem here, couldn’t find a way.

[MrGPS (Stefan)]

Hi,
i am using the following config:

type: custom:mini-graph-card
entities:
  - entity: sensor.ep500p_dc_input_power
name: PV Power
hours_to_show: 168
points_per_hour: 60
show:
  graph: bar
  extrema: true

This shows the following chart.
The MAX: tells me that the max was at Sun 26 with 2397 W.
Sun 26 is the second hill in the chart and if I hover the mouse over it I get 1472,8W. (see Screenshot)
But according to the bars the highest bar is the forth hill which is the 28th.
If I put the mouse over the highest bar (the 28th) it shows me a value of 1944,67W.

I increased the “points_per_hour” to 60 to have a better resolution, but the result is still the same.

Any idea what could be wrong ???

[Ildar_Gabdullin]

@MrGPS

Any idea what could be wrong ???

Probably choosing a bar graph.
Replace “bar” with “line” - if you see a significant difference then this means that my assumption was correct.

[MrGPS (Stefan)]

Thanks for the Tip,
yes with line it seems to work properly, it just doesn’t look that nice anymore. I guess I have to play with line thickness/number of points.

[rr19-hub]

does anyone know if it is possible to display the graphs differently for several entities? I would like to configure one with fill: fade and one with fill: false. But if I set the ‘show’ block individually under entity: ..., the settings are ignored. Presumably the graphs can only be configured together, right?

  - type: custom:mini-graph-card
    entities:
      - entity: sensor.klimasensor_1_temperature
        name: Temperatur
        color: var(--green-color)
      - entity: sensor.klimasensor_1_humidity
        name: Luftfeuchtigkeit
        color: var(--blue-color)
        y_axis: secondary
        show: # block is ignored!
          fill: false 
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show: # only this block is adopted for both entities
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

[Ildar_Gabdullin]

You may only do things described in docs.
The “show” option is GLOBAL.
The “show_fill” option is per-entity.

[rr19-hub]

Thanks for the tip! I had not distinguished between show (global) and show_fill

[Ildar_Gabdullin]

Styling labels’ background:
(answering this issue)

type: custom:mini-graph-card
entities:
  - sensor.xiaomi_cg_1_temperature
show:
  labels: true
card_mod:
  style: |
    ha-card .graph .graph__container .graph__labels span {
      background-color: green;
    }

---

Set a color to transparent to make a background less visible:

type: custom:mini-graph-card
entities:
  - sensor.xiaomi_cg_1_temperature
show:
  labels: true
card_mod:
  style: |
    ha-card .graph .graph__container .graph__labels span {
      background-color: transparent;
    }

or even hide it totally:

type: custom:mini-graph-card
entities:
  - sensor.xiaomi_cg_1_temperature
show:
  labels: true
card_mod:
  style: |
    ha-card .graph .graph__container .graph__labels span {
      background-color: transparent;
      box-shadow: none;
    }

[hkapanen (Harri Kapanen)]

Hey,
Here is some code I use to visualise my EV charger usage.

                  - type: custom:mini-graph-card
                    name: Charging power
                    entities:
                      - entity: sensor.go_echarger_202512_nrg_12
                        show_legend: false
                      - entity: binary_sensor.go_echarger_202512_car
                        name: Status
                        color: gray
                        show_line: false
                        show_points: false
                        show_legend: false
                        y_axis: secondary
                    show:
                      labels: true
                      labels_secondary: false
                    state_map:
                      - value: "off"
                        label: Disconnected
                      - value: "on"
                        label: Connected
                    height: 180
                    line_width: 2
                    font_size_header: 20
                    hour24: true
                    hours_to_show: 36
                    points_per_hour: 12

It generates the following image, where the yellow line is charging power over time and the gray background depicts whether a car was connected to it or not.

However, that “Disconnected” label is not supposed to be there, nor at the left side as it belongs to the car dis/connected data that’s defined for the (hidden) secondary axis on the right. Also the data does not look right, and when inspected with the system history graph, the following is show:

So what’s going on in here? Essentially all the data from (at least) 00:00 March 6 is zero. All the x-axis (time) are the same. A bug or some kind of misuse?

[hkapanen (Harri Kapanen)]

Update: fixed by restarting the server, except that label. Strange.

[Er1c]

Hi folks,
any way to stretch the graph? I’d like to have it filling the hole card. Or at least two thrid.
Its just a binary sensor for the windows.
I want to keep the card itself at a fixed height of 100. Just a bigger graph

type: custom:mini-graph-card
entities:
  - binary_sensor.raum_wohnzimmer
name: ""
height: 100
font_size: 60
hours_to_show: 12
points_per_hour: 30
line_color: grey

show:
  labels: false
  state: false
  points: false
  name: false
  icon: false
line_width: 8
hour24: true
state_map:
  - value: 'off'
    label: zu
  - value: 'on'
    label: offen

[customstudioyandexru]

Please tell me how to hide the names?