Tried that it didn’t work.
I’d like to do this as well, but someone asked above in the string (in 4/20) and the response was that it’s not possible without using another custom card type that allows you to define Jinja2 templates anywhere in Lovelace.
Hmm… Maybe it’s my other card that is messing things up, will test and see.
OK it works, was my other card that was blocking it plus I found there is a min height that this card can handle.
I’ve the same issue, so also looking for a solution.
Worked it out:
type: 'custom:mini-graph-card'
name: Daily Energy Used
icon: 'hass:flash'
show:
graph: bar
hours_to_show: 168
aggregate_func: max
group_by: date
entities:
- entity: sensor.daily_energy_peak
name: Energy
Wondering why its not part of the HA core. Super popular card! Looks like only lack of UI config form stops from being part of HA and more popularity.
ABSOLUTELY love the card…awesome beyond all belief. I do have one question as
I am using it from my pool and spa temperatures when they are running.
When one or both are not running the state of the sensor is unknown.
Using the state_map I stated the value of unknown the label would be Pool Off
or for Spa it would be Spa Off. Is there a way to hide or blank the unit when
using this state_map method. He is how it currently looks for me…
I would like to not see the F for Fahrenheit when using the state_map.
Thanks SO much in advance!!!
Use card-mod:
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 %}
}
state_map:
- value: "unavailable"
label: Sensor off
- value: "unknown"
label: Sensor off
More about using card-mod:
AWESOME!!!
Worked like a charm. Thank you SO much for your help on this.
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:
- colored & blinking state
- hidden unit
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);
}
}
8 Likes
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'