Lovelace: mini graph card

Is this what you want?

aggregate_func: delta
entities:
  - entity: sensor.zb_keuken_boiler_energy
    name: Energie verbruik Keukenboiler
group_by: date
hour24: true
hours_to_show: 168
icon: mdi:counter
line_width: 0
lower_bound: 0
name: Energieverbruik Keukenboiler maand
show:
  graph: bar
  labels: true
type: custom:mini-graph-card

thnx voor de help @archi071 , but thats just the same. only you use DELTA and I used DIFF
afbeelding

I want the value of the last bar in the top . so I know that I used 0.93kWh today.

I’m also trying a other approach by making a template sensor with lambda for it, but that’s also not easy for me :face_with_raised_eyebrow:

1 Like

Hi,

I have found the properties for the entities
show-graph and show-line ,
but not sure how they can work:

For my understading the entity wz_h should not be shown?
(but how then get the last value?)

That’s why an other question - could it be possible to show a second value permanent at the right side? Then we could display as sample temperature / humidity values and show one or both graphs below
image

Last question - the time format - could it be taken from HA config? Or can I modify it?
(I’m not using AM/PM but the 24hour format …)

THANKS!

part1 and part2 solved - typo in properties ("-" instead of “_” …) and “show_state” will show the second state on right side…

solution for AM/PM : hour24: true

Hello! I recently purchased an airthings air quality monitor and have started working on adding it to my dashboard. I’ve got it more or less arranged the way I’d like using a grid card, but would love to tighten up the size and spacing of the card. On the left is how it looks now in my dashboard. On the right is what I would like to get it to look like. I suspect this is something that can be done with card_mod css, but I haven’t found an example for adjusting size and spacing like this. Any pointers would be much appreciated!

minigraphcardcss01

square: false
columns: 2
type: grid
title: Basement Air Quality
cards:
  - type: custom:mini-graph-card
    animate: true
    smoothing: true
    hours_to_show: 168
    points_per_hour: 0.25
    line_width: 3
    align_state: center
    show:
      labels: false
      icon_adaptive_color: true
      fill: false
    color_thresholds:
      - value: 0
        color: '#6DD559'
      - value: 800
        color: '#F5B444'
      - value: 1000
        color: '#FF5B32'
    entities:
      - entity: sensor.basement_co2
        name: CO2
        show_state: true
    style: |
      ha-card .header.flex .name.flex {
        font-size: 16px;
      }
      ha-card .states.flex .state .state__value.ellipsis {
        font-size: 20px;
        align-self: center;
      }
      ha-card .states.flex .state .state__uom.ellipsis {
        font-size: 15px;
        align-self: center;
      }
  - type: custom:mini-graph-card
    animate: true
    smoothing: true
    hours_to_show: 168
    points_per_hour: 0.25
    line_width: 3
    align_state: center
    align_header: null
    font_size_header: null
    show:
      labels: false
      name: true
      icon: true
      fill: false
      icon_adaptive_color: true
    color_thresholds:
      - value: 0
        color: '#6DD559'
      - value: 250
        color: '#F5B444'
      - value: 2000
        color: '#FF5B32'
    entities:
      - entity: sensor.basement_voc
        name: VOC
        show_state: true
    style: |
      ha-card .header.flex .name.flex {
        font-size: 16px;
      }
      ha-card .states.flex .state .state__value.ellipsis {
        font-size: 20px;
        align-self: center;
      }
      ha-card .states.flex .state .state__uom.ellipsis {
        font-size: 15px;
        align-self: center;
      }
  - type: custom:mini-graph-card
    animate: true
    smoothing: true
    hours_to_show: 168
    points_per_hour: 0.25
    line_width: 3
    align_state: center
    align_header: null
    font_size_header: null
    show:
      labels: false
      name: true
      icon: true
      icon_adaptive_color: true
      fill: false
    color_thresholds:
      - value: 0
        color: '#6DD559'
      - value: 2.7
        color: '#F5B444'
      - value: 4
        color: '#FF5B32'
    entities:
      - entity: sensor.basement_radon_pcil
        name: Radon
        show_state: true
    style: |
      ha-card .header.flex .name.flex {
        font-size: 16px;
      }
      ha-card .states.flex .state .state__value.ellipsis {
        font-size: 20px;
        align-self: center;
      }
      ha-card .states.flex .state .state__uom.ellipsis {
        font-size: 15px;
        align-self: center;
      }
  - type: custom:mini-graph-card
    animate: true
    smoothing: true
    hours_to_show: 168
    points_per_hour: 0.25
    line_width: 3
    align_state: center
    align_header: null
    font_size_header: null
    show:
      labels: false
      name: true
      icon: true
      fill: false
      icon_adaptive_color: true
    color_thresholds:
      - value: 0
        color: '#FF5B32'
      - value: 25
        color: '#F5B444'
      - value: 30
        color: '#6DD559'
      - value: 60
        color: '#F5B444'
      - value: 70
        color: '#FF5B32'
    entities:
      - entity: sensor.basement_humidity
        name: Humidity
        show_state: true
    style: |
      ha-card .header.flex .name.flex {
        font-size: 16px;
      }
      ha-card .states.flex .state .state__value.ellipsis {
        font-size: 20px;
        align-self: center;
      }
      ha-card .states.flex .state .state__uom.ellipsis {
        font-size: 15px;
        align-self: center;
      }

so this will sound rather noobish, but please help me out…

trying to create something like:

in which the gold is solar, light blue is grid and dark blue is actual usage in Watts.

using a stock history-graph card

  - type: history-graph
    title: Gebruik actueel
    hours_to_show: 24
    refresh_interval: 30
    entities:
      - entity: sensor.zp_actuele_opbrengst
      - entity: sensor.calculated_bruto_verbruik
      - entity: sensor.netto_verbruik

Gives me the correct graph, albeit very ugly:

so, hoping to make that more beautiful, I made this basic config:

  - type: custom:mini-graph-card
    name: Gebruik actueel per uur
    hours_to_show: 1
    update_interval: 30
    smoothing: true
    show:
      labels: true
    entities:
      - entity: sensor.zp_actuele_opbrengst
        color: gold
      - entity: sensor.calculated_bruto_verbruik
        color: darkblue
        show_fill: false
      - entity: sensor.netto_verbruik
        color: lightblue

how do I show the Y axis…show: labels: true doesnt help

also, the fills should be relative to the X axis, not the bottom of the graph card…

could anyone more advanced here throw me some pointers how to do that please? thanks

They do have the same Y axis, you’re smoothing the data, so it’s the average value across a number of values.

As an aside, you won’t be able to get tick marks and a graph like your first picture. You should try the apex card instead to give you more control over the Y axis and the axis tickers.

yes, I just edited the post, as I realized the Y axis is correct (if not showing).
Main point for now remains the fill, which Id like to have from the x-axis (y=0) to the sensor value. Like in the top image.

I did create an apex card:

  - type: custom:apexcharts-card
    header:
      title: Gebruik actueel per uur
    update_interval: 30sec
    all_series_config:
      stroke_width: 1
      curve: smooth
    graph_span: 12h
    series:
      - entity: sensor.zp_actuele_opbrengst
        color: gold
      - entity: sensor.calculated_bruto_verbruik
        color: darkblue
      - entity: sensor.netto_verbruik
        color: lightblue

but it kills the Ha instance. Somehow its not playing nicely on my Safari (and to a lesser extent Chrome) browser)

I don’t believe you can set that.

Guess Ill have to look friendly to Kalkih and file a FR :wink:
thx for taking the time

@Marius try using this + add 3rd graph

hey Ildar, thanks!

After some study, I confess I dont know what to do…
I dont have a secondary Y-axis as all 3 entities use the same.

The thing that needs adjusting is the solar entity which shouldn’t fill below 0 (I almost feel it’s a bug it currently does) . And the light blue (Netto verbruik) which should fill from 0 to its outer values. Just think of it as a pure sine curve, where one would fill the wave from 0, and not from card edge.
should really just be a card option (maybe even default), and not so complex a card_mod thing…

could you give me a first nudge?

Then I probably misunderstood.
In your example I see a graph placed BELOW the X-axis (the graph has negative values).
Currently the mini-graph-card provides filling “from the graph line to the bottom” - and you need it to be “from the graph line to the X-axis”, am I right?

The idea of the mod is:

  1. Both graphs are scaled down vertically to 50% (the whole area is divided between 2 graphs).
  2. The 2nd graph is vertically flipped and shifted to the bottom.
  3. The left (primary) Y-axis labels are untouched - they are used for the “top” graph.
  4. Secondary Y-axis labels are added for the “bottom” graph.

well, yes. compare it with this (custom:sun-card):

it seems to ‘regular’ that not being able to do that in the mini-graph card surprises me somehow.

Currently there is no that “from the graph line to the X-axis” filling support.

finally made it in the apex-charts card: ApexCharts card - A highly customizable graph card - #1493 by Mariusthvdb

its not perfect just yet, but getting there, and, in fact uses a default setting… simply using type: area was the main setting that does what I am looking for.

should be in mini-graph-card too surely

Is there any way to have the mini-graph-card make the lines of the graph smaller? I’ve got a graph full-screened in panel mode showing the various temperatures of every room in my house, but the lines are way too big as you can see. Is there any way to make the lines thinner? The graph is quite unreadable like this.

It’s in the docs.

1 Like

Im about to tighten up the spaces myself. Will let you know if I come across something similar.

1 Like

2022-04-02_17-11

I managed to get more or less what I was going for with layout.

Here’s what I added to each mini-graph-card:

      style: |
        ha-card .header.flex .name.flex {
          font-size: 16px;
        }
        ha-card .states.flex .state .state__value.ellipsis {
          font-size: 20px;
          align-self: center;
        }
        ha-card .states.flex .state .state__uom.ellipsis {
          font-size: 15px;
          align-self: center;
        }
        ha-card .header.flex {
          padding: 0px;
        }
        ha-card.flex {
          max-height: 100px !important;
          padding: 0px;
        }
        ha-card .states.flex {
          padding: 0px;
        }
        ha-card .graph.flex {
          margin: 0px;
          padding: 0px;
        }

The grid card header required adding the custom:mod-card, so, at the top, like this…

type: custom:mod-card
card:
  type: grid
  columns: 2
  square: false
  title: Basement Air Quality
  cards:
    - type: custom:mini-graph-card

and at the bottom, under the mini graph cards, like this:

card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          width: max-content;
          margin: 0 auto;
          padding: 1px !important;
        }