@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:
- 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.
As it supposed to be since another CSS selector is used for UoM.
Do not try to use a code by just “copy/paste” - see if it applicable to YOUR case.
Check this.
Replace it with Courier to see if it works.
Then find out why this particular font “1-segment” is not set.
1 Like
Thank you for answer, both my issues already fixed.
Two other questions if you no mind:
-
is there any method to add any, even symbolical scale on X axis? Or even short text info, how long time is shown (hours_to_show)? I know, that would obscure the simple look of the entire card, but if it is possible by any easy way, I’d like to try, how it looks.
-
How to move down the current value, to have it in one line with min and max values?
I decided to show only graph (title I have on other place, so doesn’t make a sense to double it)
I’m trying by own but with results as below. I’m able to move value, but not the unit. Why?
For the same reason that Ildar explained in his previous answer:
(To be clear, UoM = Unit of Measurement). In other words, you will need to identify the CSS selector for the UoM, and apply the same card-mod code to it
yes, and there is a section for this UoM. Bold in this section works, my “W” is bolded. Positioning, exactly the same as in section “value” doesn’t work. Why?
Maybe more clear view, code (borders added only to show that these sections works:
ha-card .states.flex .state .state__value.ellipsis {
font-weight: bold;
font-family: Arial;
position: relative;
top: 70px;
border: 3px solid green;
}
ha-card .states.flex .state .state__uom.ellipsis{
font-weight: bold;
color: black
position: relative;
top: 70px;
border: 3px solid green;
}
And result:
Your reply made me look much closer at the CSS here - ultimately, what you are trying to do is overlap 2 div elements, one which contains the state value and UoM, and the other which contains the min and max values.
It’s a bit hacky really, but overall you might be better off applying a negative margin-top value to the min/max div, so it overlaps with the state div above it.
This works for me, but I’ve no idea how it will scale on different views and layouts:
- type: custom:mini-graph-card
card_mod:
style: |
span.state__value {
font-weight: bold;
}
span.state__uom.ellipsis {
font-weight: bold;
}
div.info.flex {
margin-top: -70px;
}
entities:
- <your-entity-here>
Ildar, would you like to chip in here with your greater expertise?
2 Likes
Works, thanks!
Last question: is there any way to add prefix or any text before value?
I removed title line, but I think about something indicating that on this graph is a sum of power from three phases. So instead of just 768W, could be: “Total: 768W” or “Σ 768W”
I tried to do it with “name” moved down, but unfortunately above of “min, value, max” line is left an empty space, regardless of moving this field.