First, thanks for this great card.
One question i am struggling with: i want to create a card which shows two values (temp and humidity).
How do i need to configure to show BOTH of the current values?
The state only shows the first one (in my case temp).
Thanks, Ralf
Thanks for the fast reply. Got it.
My code - mybe helps the next one searching for this:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.tfa_ts34c_cresta_35_0e_temperature
color: green
show_state: true
show_points: false
name: Temperatur
- entity: sensor.tfa_ts34c_cresta_35_0e_humidity
color: blue
show_state: true
show_points: false
y_axis: secondary
name: Luftfeuchtigkeit
hours_to_show: 24
points_per_hour: 60
line_width: 3
show:
labels: true
labels_secondary: true
line_width: 2
height: 65
lower_bound: 0
font_size: 70
name: Keller
show:
name: false
icon: false
legend: false
/ Ralf
1 . Wrong placement. These data must relate to both sensors.
2 . You will never see these "name: Luftfeuchtigkeit" & "name: Temperatur" - because "legend: false", "show_points: false".
3 . You will never see this "name: Keller" - because "name: false".
4 . May be it is better to have "lower_bound: ~0" instead of "lower_bound: 0".
Thanks for these tips!
/ Ralf
Animated elements by using card-mod.
Blinking state for “unavailable” and “unknown” values:
Note that the same method may be used for other values.
Three styles are here:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
style: |
ha-card .states.flex .state .state__uom.ellipsis {
{% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
display: none;
{% endif %}
}
ha-card .states.flex .state .state__value.ellipsis {
{% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
color: red;
animation: blinking 0.5s linear alternate infinite !important;
{% endif %}
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
state_map:
- value: unavailable
label: Sensor off
- value: unknown
label: Sensor off
Resized & rotating icon:
The rotation speed may depend on the sensor’s value (could be a wind speed, fan speed etc).
In this example the sensor is an "input_number" entity. Change it’s value and see how the rotation speed changes.
Sorry for a video quality…
type: vertical-stack
cards:
- type: markdown
content: |
colored icon
rotating icon
resized icon
style: 'ha-card { color: red; }'
- type: entities
entities:
- entity: input_number.servicewithhistory_value
icon: 'mdi:fan'
name: Fan speed
style:
hui-input-number-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
animation:
{% if states('input_number.servicewithhistory_value')|int <= 250|int -%}
rotation 4s
{%- elif states('input_number.servicewithhistory_value')|int > 250|int and states('input_number.servicewithhistory_value')|int <= 500|int -%}
rotation 2s
{%- elif states('input_number.servicewithhistory_value')|int > 500|int and states('input_number.servicewithhistory_value')|int <= 750|int -%}
rotation 1s
{%- else -%}
rotation 0.3s
{%- endif %}
linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- type: 'custom:mini-graph-card'
entities:
- entity: input_number.servicewithhistory_value
name: "Service: value"
hours_to_show: 1
points_per_hour: 60
icon: 'mdi:fan'
style:
.header.flex .icon ha-icon:
$: |
ha-svg-icon {
--mdc-icon-size: 60px;
fill: orange;
animation:
{% if states('input_number.servicewithhistory_value')|int <= 250|int -%}
rotation 4s
{%- elif states('input_number.servicewithhistory_value')|int > 250|int and states('input_number.servicewithhistory_value')|int <= 500|int -%}
rotation 2s
{%- elif states('input_number.servicewithhistory_value')|int > 500|int and states('input_number.servicewithhistory_value')|int <= 750|int -%}
rotation 1s
{%- else -%}
rotation 0.3s
{%- endif %}
linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
I have an issue with my mini-graph card. No matter what I do I can’t work it out. What I’m trying to achieve is to have the size of the graph card same as the rest of my buttons. I partially achieved this when I defined the height and width in the style for the card. However, when I set to SHOW the name, labels or state (set to TRUE), than whole card expand (enlarge). Can anyone advise me how to prevent this? How to display Name and the statte with the graph on the small card?
Here is how it looks the enlarged card (the height of the card is bigger than other buttons):
and here is my code:
cards:
- type: 'custom:card-modder'
card:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.speedtest_download
show_state: true
- entity: sensor.speedtest_upload
show_state: true
style: |
ha-card {
transform: scale(1.0);
height: 95%;
border-radius: 10px;
width: 98%;
margin: -0px;
padding-top: 0px;
background-color: rgba(10,10,10,0.9);
border: solid 1.4px rgba(50,50,50,0.9);
box-shadow: 0px 0px 3px 0.5px #2D2F32;
text-shadow: 1px 1px 1px block;
}
line_width: 2
align_icon: state
font_size: 50
group: false
group_by: hour
hours_to_show: 48
fill: fade
show:
icon: true
legend: false
name: true
state: true
labels: false
graph: line
points: false
extrema: true
I could never get mini graph to an aspect ratio of 1/1. I ended wrapping mini graph into a button card using custom fields.
Sorry for the code photo. I’m on my phone
Hi to all,
can anyone please advise me on setup? Somehow I can’t display colors by temperature. I still have the same color chart.
The configuration is below. thank you in advance for your help
entities:
- color_thresholds:
- value: -10
color: '#0040ff'
- value: 0
color: '#00ffff'
- value: 10
color: '#ffcc33'
- value: 18
color: '#ffbf00'
- value: 23
color: '#ff4000'
entity: sensor.teplomer_venkovni_temperature
show_state: true
hour24: true
name: Venkovní teplota
hours_to_show: 336
show:
extrema: true
labels: true
points: false
update_interval: 30
icon_adaptive_color: true
name_adaptive_color: true
points_per_hour: 1
type: 'custom:mini-graph-card'
Invalid indentation:
color_thresholds - is not a property of some entity.update_interval: 30icon_adaptive_color: truename_adaptive_color: truepoints_per_hour: 1
That’s what you thought now, isn’t it?
entities:
- entity: sensor.teplota_vonk
show_state: true
hour24: true
name: Venkajsia Teplota
show:
extrema: true
labels: true
color_thresholds:
- value: -10
color: '#0040ff'
- value: 0
color: '#00ffff'
- value: 10
color: '#ffcc33'
- value: 18
color: '#ffbf00'
- value: 23
color: '#ff4000'
type: 'custom:mini-graph-card'
Right
And you can add this:
update_interval: 30
icon_adaptive_color: true
name_adaptive_color: true
points_per_hour: 1
Cannot check it myself but the code seems right.
Thanks for pushing, the line works fine, icon and name working OK
i did try the mini-graph into custom:button-card, however I can’t fit if I turn the name, state or labels as true. Can you fit all the info on such small button?
I could but it becomes a real estate issue.
Another option beside button card may be grid, but real estate becomes an issue.
type: grid
cards:
- type: 'custom:mini-graph-card'
entities:
- entity: sensor.speedtest_download
show_state: true
- entity: sensor.speedtest_upload
show_state: true
style: |
ha-card {
transform: scale(1.0);
height: 95%;
border-radius: 10px;
width: 98%;
margin: -0px;
padding-top: 0px;
background-color: rgba(10,10,10,0.9);
border: solid 1.4px rgba(50,50,50,0.9);
box-shadow: 0px 0px 3px 0.5px #2D2F32;
text-shadow: 1px 1px 1px block;
}
line_width: 2
align_icon: state
font_size: 50
group: false
group_by: hour
hours_to_show: 48
fill: fade
show:
icon: true
legend: false
name: true
state: true
labels: false
graph: line
points: false
- type: button
tap_action:
action: toggle
entity: switch.workshop
- type: button
tap_action:
action: toggle
entity: light.pool_lights
Here was my original suggestion. Showing the extrema is a challenge. Eventually I added a pop up card to show the detail of the entity. The button image simply gives me a quick visual reference.
type: 'custom:button-card'
aspect_ratio: 1/1
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: []
card:
!include /config/lovelace/popups/climate_stats.yaml
custom_fields:
graph:
card:
type: 'custom:mini-graph-card'
entities: '[[entities]]'
animate: true
font_size: 75
hours_to_show: 48
line_width: 1
show:
extrema: false
name: true
icon: true
state: true
legend: false
fill: fade
!
I’m working on a wall tablet that will default to a stock page during market hours, and I’m wondering if anyone has a way to set a variable based on an entity attribute that can be used a color threshold (in this case the prior market close value). I know core HA was supposed to support templates in more places as of a few releases ago but this doesn’t work:
- type: custom:mini-graph-card
name: 'amzn'
icon: mdi:amazon
hours_to_show: 9
points_per_hour: 60
line_width: 1
color_thresholds:
- value: 0
color: red
- value: "{{ state_attr('yahoofinance.amzn', 'regularMarketPreviousClose') }}"
color: var(--accent-color)
color_thresholds_transition: smooth
height: 90
entities:
- entity: yahoofinance.amzn
Use config-template-card.
type: vertical-stack
cards:
- type: 'custom:config-template-card'
variables:
- 'states[''input_number.test_number'']'
entities:
- '${vars[0].entity_id}'
card:
type: vertical-stack
cards:
- type: entities
entities:
- input_number.test_number
- type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_co2
hours_to_show: 6
points_per_hour: 60
show:
labels: false
fill: true
name_adaptive_color: true
icon_adaptive_color: true
color_thresholds_transition: smooth
font_size: 50
line_width: 4
height: 500
color_thresholds:
- value: '${parseFloat(vars[0].state) - 100}'
color: red
- value: '${parseFloat(vars[0].state) - 75}'
color: green
- value: '${parseFloat(vars[0].state) - 50}'
color: magenta
- value: '${parseFloat(vars[0].state) - 10}'
color: cyan
- value: '${parseFloat(vars[0].state)}'
color: orange
- value: '${parseFloat(vars[0].state) + 10}'
color: violet
- value: '${parseFloat(vars[0].state) + 75}'
color: blue
- value: '${parseFloat(vars[0].state) + 100}'
color: brown
Using the card to display sensors’ change with “Day / Night” as a background graph:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_co2
name: CO2
color: green
unit: ''
show_state: true
show_indicator: false
show_graph: true
show_line: true
show_fill: true
show_points: true
show_legend: false
state_adaptive_color: false
fixed_value: false
- entity: binary_sensor.night
name: Day/night
color: 'rgba(50,73,92,0.85)'
unit: ''
show_state: false
show_indicator: false
show_graph: true
show_line: false
show_fill: true
show_points: false
show_legend: false
state_adaptive_color: false
fixed_value: false
aggregate_func: min
y_axis: secondary
name: CO2
hours_to_show: 24
points_per_hour: 60
aggregate_func: last
update_interval: 0
height: 150
line_width: 1
hour24: true
lower_bound: ~400
lower_bound_secondary: ~0
smoothing: false
show:
name: true
icon: true
state: true
graph: true
fill: fade
points: true
legend: false
average: false
extrema: true
labels: true
labels_secondary: true
state_map:
- value: 'off'
label: '0'
- value: 'on'
label: '1'
Recently I realized that the browser is flooded by warnings:
"state_map" is provided only for one graph.Another case - let’s use only ONE graph with state_map like this:
state_map:
- value: unavailable
label: Sensor off
- value: unknown
label: Sensor off
Even now we have to receive lots of warnings.
So my proposal is:
"state_map" for all entities;WOW
Could you post the code for this graph?
It’s great looking!!