cpo
February 29, 2024, 3:25pm
1
Hi there,
i’m trying to get the graph in a mini graph card (or any alternatve for that matter) to use the full height of the card. Maybe im a bit stupid here.
I disabled everything, i do not want any intaraction in or with this card, no legend, nothing. Just display the bars.
The maximum height i can get is 25/26px in a 64px card. this is way less then half the height of the card.
Is it just not possible to get at least 52px (i think that is maybe a margin defined somewhere in HA). But wasting so much space is unsatisfactory.
Can someone help or is it just not possible. I’m trying to avoid unnecassary large constructs to get there for just one card …
Thank you.
Please post your code to expedite a solution.
cpo
March 1, 2024, 7:26am
3
Here it is
- type: custom:mini-graph-card
name: Solarertrag Tag
icon: mdi:counter
height: 64
entities:
- sensor.solar_daily_kwh_total
show:
graph: bar
name: false
icon: false
state: false
line_color: '#FFD221'
aggregate_func: max
group_by: date
hours_to_show: 336
Have you tried it as an independent card?
I got this at height:102
type: custom:mini-graph-card
name: Solarertrag Tag
icon: mdi:counter
height: 102
entities:
- sensor.solar_daily_kwh_total
show:
graph: bar
name: false
icon: false
state: false
line_color: '#FFD221'
aggregate_func: max
group_by: date
hours_to_show: 336
The default is 150 and it looks like the bottom is static so you are only seeing the top of the graph.
Removing the padding at the top seems to help.
type: custom:mini-graph-card
name: Solarertrag Tag
icon: mdi:counter
height: 52
entities:
- sensor.solar_daily_kwh_total
show:
graph: bar
name: false
icon: false
state: false
line_color: '#FFD221'
aggregate_func: max
group_by: date
hours_to_show: 336
card_mod:
style: |
ha-card {
padding-top: 0px !important;
padding-bottom: 2px !important;
}
cpo
March 1, 2024, 8:12am
7
It does look different, indeed.
But i don’t think that it is only the top of the graph. If so, the left bars would not be seen, as they would hay been truncated in comparison to the solo card.
Can you post the entire card’s code for the cards in the image?
cpo
March 1, 2024, 8:17am
9
When i insert the card_mod, it seems to only affect the standalone card.
cpo
March 1, 2024, 8:18am
10
Certainly:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Solar heute {{ states('sensor.solar_daily_kwh_total') | round(1) }} kWh
secondary: >-
m {{ states('sensor.solar_monthly_kwh_total') | round(1) }} •
y {{ states('sensor.solar_yearly_kwh_total') | round(0) }} kWh
icon: mdi:solar-power-variant-outline
icon_color: amber
- type: custom:mini-graph-card
# Card_Mod für die Verringerung des oberen Kachelrandes
name: Solarertrag Tag
icon: mdi:counter
height: 64
entities:
- sensor.solar_daily_kwh_total
show:
graph: bar
name: false
icon: false
state: false
line_color: '#FFD221'
aggregate_func: max
group_by: date
hours_to_show: 336
card_mod:
style: |
ha-card {
padding-top: 0px !important;
padding-bottom: 2px !important;
- type: custom:mini-graph-card
name: Solarertrag Tag
icon: mdi:counter
height: 64
entities:
- sensor.solar_daily_kwh_total
show:
graph: bar
name: false
icon: false
state: false
line_color: '#FFD221'
aggregate_func: max
group_by: date
hours_to_show: 336
card_mod:
style: |
ha-card {
padding-top: 0px !important;
padding-bottom: 2px !important;
Closer…
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.basement_sensor
hours_to_show: 6
points_per_hour: 5
show:
graph: bar
name: false
icon: false
state: false
- type: custom:mini-graph-card
entities:
- entity: sensor.basement_sensor
hours_to_show: 6
points_per_hour: 5
show:
graph: bar
name: false
icon: false
state: false
cpo
March 1, 2024, 8:40am
12
Hmm. The culprit seems to be my card height of 64px.
I think I just got rid of or reduced that space , one minute
There is padding around everything (icon, name etc…)and it doesn’t go away when you hide with a false.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.basement_sensor
hours_to_show: 360
points_per_hour: 1
height: 150
show:
graph: bar
name: false
icon: false
state: false
card_mod:
style: |
.header {
padding-bottom: 0px !important;
}
.states {
padding-bottom: 0px !important;
}
ha-card {
height: 64px !important;
padding-top: 0px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.basement_sensor
hours_to_show: 5
points_per_hour: 6
height: 150
show:
graph: bar
name: false
icon: false
state: false
card_mod:
style: |
.header {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.states {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
ha-card {
height: 64px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
With 3 cards I think this is the best you’ll do. The card above is 64px tall
cpo
March 1, 2024, 9:18am
16
Strange behaviour that is
And that’s how it looks on a mobile device: (no change in the stacked card but complete graph in the standalone card)
But that’s all better than before.
No problem, it was frustrating that the baseline height is 150. It may be abled to be adjusted in the JS. I’ll message you if I dig in further and that works.
1 Like
