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-cardthnx voor de help @archi071 , but thats just the same. only you use DELTA and I used DIFF
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 
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
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!
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 
thx for taking the time
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:
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.
Im about to tighten up the spaces myself. Will let you know if I come across something similar.
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;
}