I have the latest Chrome version on my tablet (81.0.4044.117). Anyway, the issue is also present on the Home Assistant app.
Is there a way to set the height of the graph to the full height of the card?
I want a bar chart that completely fills the card.
Depending on what you want to achieve, you might not need to use card-mod even 
I ‘solved’ this by disabling all visual components of card but graph, putting it into vertical stack and adding markup with required information below graph. Here is example of this solution I’m using for monitoring my ESXi VMs:
Everything below bottom divider line is vertical stack with graph at the top and markup text in the bottom. For the purpose of this screenshot I changed vertical scale to be below actual sensor value to max out the graph, so you can see how much up you can go with this solution.
2 Likes
I really like that visual. It beats the crap out of the plain old text visual I have.
Care to share the code?
Sure! Here it is for entire card:
cards:
- type: divider
- cards:
- content: |
OS: {{ state_attr('sensor.esxi_vm_hassio', 'guest_os') }}
IP: {{ state_attr('sensor.esxi_vm_hassio', 'guest_ip') }}
STATE: {{ state_attr('sensor.esxi_vm_hassio', 'state') }}
STATUS: {{ state_attr('sensor.esxi_vm_hassio', 'status') }}
type: markdown
- content: >
UPTIME: {{ state_attr('sensor.esxi_vm_hassio', 'uptime_hours' ) }} h
CPUs: {{ state_attr('sensor.esxi_vm_hassio', 'cpu_count') }}
RAM: {{ state_attr('sensor.esxi_vm_hassio', 'memory_allocated_mb') }}
MB
HDD: {{ state_attr('sensor.esxi_vm_hassio', 'used_space_gb') }} GB
type: markdown
horizontal: true
type: 'custom:vertical-stack-in-card'
- type: divider
- cards:
- align_header: left
align_icon: left
align_state: center
animate: true
entities:
- color: var(--greenish)
entity: sensor.vm_hassio_cpu
name: 'CPU Load:'
show_points: false
unit: '%'
group: false
height: 100
hours_to_show: 1
icon: 'mdi:chip'
line_width: 2
lower_bound: 0
points_per_hour: 360
show:
icon: false
labels: false
name: false
points: false
state: false
tap_action: none
type: 'custom:mini-graph-card'
update_interval: 10
upper_bound: 100
- align_header: left
align_icon: left
align_state: center
animate: true
entities:
- color: var(--light-magenta)
entity: sensor.vm_hassio_mem
name: 'RAM Used:'
show_points: false
unit: MB
group: false
height: 100
hours_to_show: 1
icon: 'mdi:chip'
line_width: 2
lower_bound: 0
points_per_hour: 60
show:
icon: false
labels: false
name: false
points: false
state: false
tap_action: none
type: 'custom:mini-graph-card'
update_interval: 60
upper_bound: 10000
horizontal: true
type: 'custom:vertical-stack-in-card'
- cards:
- content: |
<center>CPU load: {{ states('sensor.vm_hassio_cpu') }} %</center>
type: markdown
- content: |
<center>RAM used: {{ states('sensor.vm_hassio_mem') }} MB</center>
type: markdown
horizontal: true
type: 'custom:vertical-stack-in-card'
title: ESXi VM hassio
type: 'custom:vertical-stack-in-card'
2 Likes
My problem with this (and my thought process is the same, I have it in a stack with markdown), is I want that padding removed from the top of the card. My understanding is that @kalkih is adding this functionality in an upcoming release. In the meantime I solved it with this.
How can i make the card take up the entire vertical space here ? I want it to align with the bottom of the buttons:
- type: horizontal-stack
cards:
- type: custom:button-card
template: border_spacer
# - type: vertical-stack
# cards:
- !include
- '../templates/graph.yaml'
- entities:
- sensor.netatmo_rainy_sum_rain_24
name: "Regen"
show_extrema: true
line_color: blue
group_by: date
graph: bar
aggregate_func: max
hours_to_show: 24
style: |
ha-card {
height: 100%;
}
- type: vertical-stack
cards:
- type: custom:button-card
template: default
aspect_ratio: 1/1
- type: custom:button-card
template: default
aspect_ratio: 1/1
- type: vertical-stack
cards:
- type: custom:button-card
template: default
aspect_ratio: 1/1
- type: custom:button-card
template: default
aspect_ratio: 1/1
- type: custom:button-card
template: border_spacer
Not sure what’s up, maybe my sensor templates are off, but I can’t get the graphs to show up.
I also get an annoying ’ on either side of the values.
sensor template:
hassio_vm_cpu_usage:
friendly_name: 'Hassio VM CPU Usage'
value_template: >
'{{state_attr('sensor.esxi_vm_hass_os_vm','cpu_use_pct')}}'
visual code:
- cards:
- align_header: left
align_icon: left
align_state: center
animate: true
entities:
- color: red
entity: sensor.hassio_vm_cpu_usage
name: 'CPU Load:'
show_points: false
unit: '%'
group: false
height: 100
hours_to_show: 1
icon: 'mdi:chip'
line_width: 2
lower_bound: 0
points_per_hour: 360
show:
icon: false
labels: false
name: false
points: false
state: false
tap_action: none
type: 'custom:mini-graph-card'
update_interval: 10
upper_bound: 100
Wrap it in a custom:stack-in-card
Or make your lovelace panel: true
Thanks, but that does not appear to fix it. It was already in ‘panel’ mode.
title: Water
panel: true
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: border_spacer
- type: vertical-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- !include
- '../templates/graph.yaml'
- entities:
- sensor.netatmo_rainy_sum_rain_24
name: "Regen"
show_extrema: true
line_color: blue
group_by: date
graph: bar
aggregate_func: max
hours_to_show: 24
- type: vertical-stack
cards:
- type: custom:button-card
template: default
aspect_ratio: 1/1
- type: custom:button-card
template: default
aspect_ratio: 1/1
- type: vertical-stack
cards:
- type: custom:button-card
template: default
aspect_ratio: 1/1
- type: custom:button-card
template: default
aspect_ratio: 1/1
- type: custom:button-card
template: border_spacer
What are you trying to achieve? If you want all 3 in the same row you need bring them in under the custom:stack-in-card. Sorry am on my phone so can’t give an example.
I want the graph to have the same height as the 2 buttons combined.
the graph has a height: use that to change height of graph, or use card-mod to change the overall height of the card
I already tried setting the height before with card-mod (in my first post)
style: |
ha-card {
height: 100%;
}
Figured it out, thx !
1 Like
remove ’ from your value_template, so change your code to:
hassio_vm_cpu_usage:
friendly_name: 'Hassio VM CPU Usage'
value_template: >
{{state_attr('sensor.esxi_vm_hass_os_vm','cpu_use_pct')}}
I have a graph which shows my electricity consumption for the last 7 days
- type: custom:mini-graph-card
entities:
- entity: sensor.electricity
name: Electricity
show:
graph: bar
labels: false
hours_to_show: 168
aggregate_func: max
lower_bound: 0
group_by: date
However, how the data is collected, it can only the previous days consumption. Is there a way to tell the graph not to display ‘today’ in the 7 days
So at the moment it would show the dates from Sunday 26th April to today the 2nd May
What I would like is for the date range to be Saturday 25th April to the 1st of May
1 Like
That was it. Thanks a bunch.
When should we expect 0.9.4 to be available? I read documentation and spend a lot of time trying to investigate why aggregate_func: delta does not work for me, untill I realized that I’m on 0.9.3 and 0.9.4 is not release yet to HACS 
1 Like
Hi,
I see that the aspect_ratio is not working any more?
is there a way to achieve the same thing?
i always used 1/3, now the size like 1/1
code:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- sensor.mi_t_4c65a8d1ee4b
style: |
ha-card {
border-radius: 15px;
# background: rgba(255,255,240,0.9);
background: #fff5bc;
}
name: Temperature
line_color: var(--accent-color)
# line_color: gray
line_width: 8
font_size: 75
show:
labels: false
extrema: true
aspect_ratio: 1/3
animate: true
- type: custom:mini-graph-card
entities:
- sensor.mi_h_4c65a8d1ee4b
style: |
ha-card {
border-radius: 15px;
# background: rgba(255,255,240,0.9);
background: #fff5bc;
}
name: Humidity
line_color: blue
# line_color: gray
line_width: 8
font_size: 75
show:
labels: false
extrema: true
aspect_ratio: 1/3
animate: true
- type: custom:mini-graph-card
entities:
- sensor.illumination_158d0001e50fc6
style: |
ha-card {
border-radius: 15px;
# background: rgba(255,255,240,0.9);
background: #fff5bc;
}
name: Illumination
line_color: '#e74c3c'
# line_color: gray
line_width: 8
font_size: 75
show:
labels: false
extrema: true
aspect_ratio: 1/3
animate: true