Lovelace: mini graph card

[Ildar_Gabdullin]

Some more useful/useless card-mod styles

type: custom:mini-graph-card
entities:
  - entity: sensor.xiaomi_cg_1_co2
hours_to_show: 1
points_per_hour: 10
line_color: cyan
line_width: 10
card_mod:
  style: |
    .line--point {
      fill: red !important;
    }
    ha-card {
      --mcg-hover: orange;
    }
    .line--point:hover {
      r: 20 !important;
      stroke: green;
    }

inactive:

hovered:

point is selected:

---

Ever wanted to see weekends’ data highlighted?

code

type: custom:mini-graph-card
entities:
  - entity: sensor.xiaomi_cg_1_co2
hours_to_show: 120
points_per_hour: 60
line_color: cyan
line_width: 3
show:
  points: true
card_mod:
  style: |
    {% set points_per_hour = config.points_per_hour | float(default=0.5) -%}
    {%- set hours_to_show = config.hours_to_show | float(default=24) -%}
    {%- set TOTAL_POINTS = (points_per_hour * hours_to_show) | int -%}
    {%- set START_TIME_OFFSET = now().today().weekday() * 24 + now().hour + now().minute/60  + 48 -%}
    {%- set START = TOTAL_POINTS - (points_per_hour * START_TIME_OFFSET) | int +
    1 -%}
    {%- set END = START + (points_per_hour * 48) | int -%}
    .line--point {
      r: {{config.line_width | float(default=1) / 2}} !important;
      stroke-width: 0 !important;
      fill: inherit !important;
    }
    .line--point:hover {
      stroke: green;
      stroke-width: inherit !important;
    }
    .line--point:nth-child(n+{{START}}):nth-child(-n+{{END}}) {
      fill: red !important;
    }
    .line--point:hover {
      r: {{config.line_width}} !important;
      stroke: green;
      stroke-width: inherit !important;
    }

Ofc it is up to YOU which periods to highlight - weekends, from 12:00 to 16:00, …

[SteffenDE (Steffen)]

Hi,

how can the cache be deleted or rebuilt if the option cache is true for the mini-graph-card?

Some graphs show values are deleted on database for some days but if switch from cache false to true the graph showing the old values.

[Ildar_Gabdullin]

Try purging a browser’s cache.

[SteffenDE (Steffen)]

I tryed CTRL + SHIFT + R without sucess but now I delete chrome browser cache for the domain and it works.

Thanks

[Kugelblitz]

Hey Guys, love the mini graph card!
I am trying to get it right.

I got two Cards, one for the Temperature (-10 to +40°C ) and one for the Humidity (0% to 100%) to display the in and outdoor values and also the Heating pattern - yellow line.
That works fine.

I have some trouble adding some binary sensors and getting them into scale

I like to add

• the open Window times (white fill) on the y-axis from 0 (open) to 1 (closed)
• the Day and Night times (cyan fill) on the y-axis from 0 (Day) to 1 (Night)
• the Sun elevation (yellow fill) on the y-axis from -10° to 60° (so you get an idea of the sunshine)

Could you tell me how I can get a different entities adjusts in y scale ?

Temperature Card

type: custom:mini-graph-card
name: Temperatur
hours_to_show: 24
points_per_hour: 4
update_interval: 15
line_width: 4
align_state: center
icon: mdi:water
decimals: 0
upper_bound: 40
lower_bound: -10
upper_bound_secondary: 1
lower_bound_secondary: 0
height: 300
font_size: 100
aspect_ratio: 1/1
show:
  name: true
  icon: true
  state: true
  graph: true
  legend: true
  average: false
  extrema: false
  labels: true
  labels_secondary: false
  name_adaptive_color: true
  icon_adaptive_color: true
color_thresholds:
  - value: 0
    color: "#99CCFF"
  - value: 10
    color: "#5CADFF"
  - value: 15
    color: "#1F8FFF"
  - value: 20
    color: "#f39c12"
  - value: 21
    color: "#d35400"
  - value: 22
    color: "#c0392b"
  - value: 25
    color: "#F55A5A"
entities:
  - entity: sensor.aktuelle_temperatur_arbeitszimmer_mittelwert
    name: innen
    state_adaptive_color: true
    show_state: true
    align_state: left
    show_fill: false
  - entity: sensor.hk_arbeitszimmer_nachste_geplante_temperatur
    name: Heizung
    line_width: 1
    show_line: true
    show_points: true
    show_legend: false
    show_fill: false
    color: yellow
  - entity: sensor.aussentemperatur_mittlerer_wert
    name: außen
    state_adaptive_color: true
    show_state: true
    align_state: right
    show_fill: false
  - entity: sensor.sun_solar_elevation
    name: Sonnenstand
    show_fill: true
    show_line: false
    color: orange
    show_legend: false
    show_points: false
    upper_bound: 60
    lower_bound: -10
  - entity: sensor.day_night
    name: Tag/Nacht
    color: rgba(0,255,255,0.85)
    show_fill: true
    show_line: false
    show_points: false
    show_legend: false
    y_axis: secondary
  - entity: binary_sensor.fenster_arbeitszimmer_offnung
    name: Fenster
    color: rgba(255,255,255,0.85)
    show_legend: false
    show_fill: true
    show_line: false
    show_points: false
    aggregate_func: max
    y_axis: secondary
state_map:
  - value: "off"
    label: geschlossen
  - value: "on"
    label: offen
tap_action:
  action: more-info
  entity: climate.hk_arbeitszimmer
card_mod:
  class: middle-left

Humidity Card

type: custom:mini-graph-card
name: Luftfeuchtigkeit
hours_to_show: 24
points_per_hour: 4
update_interval: 15
line_width: 4
align_state: center
icon: mdi:water
decimals: 0
upper_bound: 100
lower_bound: 0
upper_bound_secondary: 1
lower_bound_secondary: 0
height: 300
font_size: 100
aspect_ratio: 1/1
show:
  name: true
  icon: true
  state: true
  graph: true
  legend: true
  average: false
  extrema: false
  labels: true
  labels_secondary: false
  name_adaptive_color: true
  icon_adaptive_color: true
color_thresholds:
  - value: 0
    color: "#98C3E3"
  - value: 60
    color: "#4A72CA"
  - value: 75
    color: "#FE0002"
  - value: 100
    color: "#660001"
entities:
  - entity: sensor.aktuelle_luftfeuchtigkeit_arbeitszimmer_mittelwert
    name: innen
    state_adaptive_color: true
    show_state: true
    align_state: left
    show_fill: false
  - entity: sensor.aktuelle_luftfeuchtigkeit_aussen_mittelwert
    name: außen
    state_adaptive_color: true
    show_state: true
    align_state: right
    show_fill: false
  - entity: sensor.luftfeuchtigkeit_arbeitszimmer_delta_aussen
    name: Δ g/m³
    state_adaptive_color: true
    show_state: false
    align_state: right
    show_fill: false
  - entity: sensor.sun_solar_elevation
    name: Sonnenstand
    show_fill: true
    show_line: false
    color: orange
    show_legend: false
    show_points: false
    upper_bound: 60
    lower_bound: -10
  - entity: sensor.day_night
    name: Tag/Nacht
    color: rgba(0,255,255,0.85)
    show_fill: true
    show_line: false
    show_points: false
    show_legend: false
    y_axis: secondary
  - entity: binary_sensor.fenster_arbeitszimmer_offnung
    name: Balkontüre
    color: rgba(255,255,255,0.85)
    show_legend: false
    show_fill: true
    show_line: false
    show_points: false
    aggregate_func: max
    y_axis: secondary
card_mod:
  class: middle-right

[Ildar_Gabdullin]

Suggest you to not use binary sensors & state_map.
Use 0-1 sensors on a secondary y-axis with different colors.

[khvej8]

@kajarit

Found a quite old post, with your code for a compact graph. I can not getting it to work, even if I copy all your code and only change the entiry. The “state” will not show on the -50 position, it will stay below the card. It do show on the right side. It is you post 2381 in this thread.

Something might have changed, or is your graph still working?

style: |
  ha-card .header.flex .name.flex {
    width: 200px;
  }
  ha-card .states.flex {
    margin-top: -50px;
  }
  ha-card .states.flex .state .state__value.ellipsis {
    font-size: 150%;
    align-self: center;
  }

[Kelvin (kelv)]

Can you fade a bar graph?

[parautenbach (Pieter Rautenbach)]

@Kugelblitz

• the open Window times (white fill) on the y-axis from 0 (open) to 1 (closed)
• the Day and Night times (cyan fill) on the y-axis from 0 (Day) to 1 (Night)
• the Sun elevation (yellow fill) on the y-axis from -10° to 60° (so you get an idea of the sunshine)

Using the same y-axis, you need to scale one of them to have the same range as the other. In other words, you need to make template sensors of your binary sensors with -10 for off and 60 for on. There are similar posts about this on this topic.

[tco95ttocs (Mario)]

hi guys,
i try to use this card and have a question. is it possible to show the value of the points when doing the mouse over like in the original graph card?

[Ildar_Gabdullin]

@tco95ttocs

is it possible to show the value of the points when doing the mouse over like in the original graph card?

It is a default behaviour.

[tco95ttocs (Mario)]

mmmhh…but not at the position of the mouse!!
it only shows the values where the “state” is placed right and i have to activate the points?!

[Ildar_Gabdullin]

@tco95ttocs

where the “state” is placed right?!

Where a POINT with a state is placed, of course. It will not show you a state where there are no points.

[tco95ttocs (Mario)]

so is there a way to make the points transparent?

[Ildar_Gabdullin]

@tco95ttocs

make the points transparent?

Suggest you to use a simple picture to make your post clear

[tco95ttocs (Mario)]

the upper picture shows the graphs in the normal way. I activated for the orange one the points so that i can see the state. But if i move the mouse into the whole graph the points are “activated” (middle picture). If i move the mouse directly on the orange line, the points where “disabled” and i got the state values as it should (lower picture).
So is there a way to make the points invisible in the middle picture?
Hope that helps

[Ildar_Gabdullin]

@tco95ttocs

points invisible in the middle picture?

Could be possible by card-mod (ask in the main card-mod thread) - where you can use some examples as starting points - but for further improvements/hacks/etc you are on your own.
But hiding points on hover has no sense: you will not see them → you will not be able to select any of them easily.

[tco95ttocs (Mario)]

thx for the hint with card-mod!
i try to use more points for a more detailed line, so i think it doesn’t matter if the points are invisible

[Ildar_Gabdullin]

Ok, then go to the main card-mod thread → 1st post → link at the bottom titled “fantastic” → mini-graph-card → styling points

[johnnyc (John)]

Here’s a strange one. I have several HAs with the mini graph card. The card is working fine on some of them, but not on one HA. On one system, the graphs are not displayed. It has, however, worked in the past. Both sensors have historical data stored… Any ideas?