Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
2728

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:
389731411-85f8957c-41fd-4d1a-abed-41aa0a93dfec

hovered:
389731478-4c77806a-31d9-4da9-89f0-5dcf69522161

point is selected:
389731539-f6e051f9-c463-4036-af33-21165be77e19

Ever wanted to see weekends’ data highlighted?
image

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, …

4 Likes
2729

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.

2730

Try purging a browser’s cache.

2731

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

Thanks

2732

image
image1580×712 61.6 KB

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
2733

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

2734

@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;
  }
1 Like
2735

Can you fade a bar graph?

2736

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.