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:
- Both graphs are scaled down vertically to 50% (the whole area is divided between 2 graphs).
- The 2nd graph is vertically flipped and shifted to the bottom.
- The left (primary) Y-axis labels are untouched - they are used for the “top” graph.
- 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
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;
}
Can someone tell me why I get so many console errors with this card please?
- type: custom:mini-graph-card
name: Downstairs vs Upstairs vs Loft vs Outside
entities:
- entity: sensor.downstairs_mean_temperature
name: Downstairs (mean)
color: IndianRed
- entity: sensor.upstairs_mean_temperature
name: Upstairs (mean)
color: SteelBlue
- entity: sensor.loft_temperature
name: Loft
color: GreenYellow
- entity: sensor.weather_current_temperature
name: Outside
color: DimGrey
- entity: binary_sensor.above_horizon
name: Night
y_axis: secondary
color: black
show_fill: true
show_line: false
show_points: false
line_width: 1
points_per_hour: 4
aggregate_func: min
show:
legend: false
name: false
state: false
labels: true
labels_secondary: false
icon: false
state_map:
- value: 'on'
label: 'Day'
- value: 'off'
label: 'Night'
Many entities + one binary_sensor (on,off).
You have specified a state_map for the binary_sensor but this option is GLOBAL.
Since other entities have different values (like 2.34, 4.45, …) this error comes.
There is a FR for “state_map for every entity” (see in GitHub).
Alternatively do not use binary_sensor for “night”.
Explained here.
1 Like
Great card, thx for sharing!
My question: how to change font of value? Or at least bold whole value with unit?
I’m trying with following code (font family is configured and works inside other card):
style: |
ha-card .states.flex .state .state__value.ellipsis {
font-weight: bold;
font-family: 7-segment;
}
But result is negative. Font is ignored, and only value is bolded, not unit.
