What do you want to animate exactly?
Sorry, you are right, I didnât specify what I needed.
In the official doc of this card, there is animate.
If this option is set on true, it add a reveal animation to the graph.
Due to the fact iâm using some very small graphs, this animation appears like a âpage lagâ instead of a smooth animation.
So, i wonder if there is a way to modify the speed or the duration of this animation.
I think there is no such an option.
You can play with card-mod:
type: custom:mini-graph-card
entities:
- entity: sensor.cleargrass_1_pm25
show_points: false
points_per_hour: 60
hours_to_show: 1
animate: true
card_mod:
style: |
.graph .graph__container .graph__container__svg svg g mask .line {
animation-duration: 5s !important;
animation-delay: 0s !important;
animation-timing-function: linear !important;
animation-iteration-count: infinite !important;
}
Note that the default animation only runs when showing the graph the first time (i.e. after opening the web page). The "animation-iteration-count: infinite" option makes the animation running in loop.
Also, in case of "infinite" after several loops the animation effect breaks (possibly Chrome bug) - see this at the end of this video:
4 Likes
Thank you so much! I will try that!
Hello, have you any idea why the color threshold is weirly apply on my card (the last one):
I insert it within a grid card with a 1:1 ratio.
I want to show bar of energy consumption per day as primary series, and a line curve showing price per day as overlay for the same day.
This is the entity data I have but not sure how that can be used in the mini graph card on my dashboard. Anyone who can help me out a bit?
hourly:
- time: '02:00'
usage: '0.806'
- time: '03:00'
usage: '0.567'
- time: '04:00'
usage: '0.749'
- time: '05:00'
usage: '0.79'
- time: '06:00'
usage: '0.739'
- time: '07:00'
usage: '0.714'
- time: '08:00'
usage: '0.637'
- time: '09:00'
usage: '0.846'
- time: '10:00'
usage: '1.132'
- time: '11:00'
usage: '1.017'
- time: '12:00'
usage: '1.686'
- time: '13:00'
usage: '1.003'
- time: '14:00'
usage: '1.085'
- time: '15:00'
usage: '1.099'
- time: '16:00'
usage: '0.921'
- time: '17:00'
usage: '1.86'
- time: '18:00'
usage: '1.354'
- time: '19:00'
usage: '0.943'
- time: '20:00'
usage: '1.625'
- time: '21:00'
usage: '0.79'
- time: '22:00'
usage: '0.852'
- time: '23:00'
usage: '0.806'
- time: '00:00'
usage: '0.964'
- time: '01:00'
usage: '1.89'
days:
- date: Sep 19 2021
usage: '0.682'
- date: Sep 18 2021
usage: '24.875'
- date: Sep 17 2021
usage: '24.147'
- date: Sep 16 2021
usage: '20.565'
- date: Sep 15 2021
usage: '16.55'
- date: Sep 14 2021
usage: '22.994'
- date: Sep 13 2021
usage: '22.789'
unit_of_measurement: kWh
friendly_name: Greenely Usage
icon: mdi:power-socket-eu
I have tried this, but it does not provide me what I want not even with the one series to visualize consumption per day:
type: custom:mini-graph-card
entities:
- entity: sensor.greenely_usage
name: Energy consumption
hours_to_show: 168
aggregate_func: max
group_by: date
show:
graph: bar
Hello people. Could someone help me to make this graphic look better? I have the problem that if the temperature is maintained, for example, as seen in the photo at the same temperature, only one line remains below and it looks bad. How can I get it to another height? Thank you
You could set some bounds.
- type: custom:mini-graph-card
name: UV
icon: mdi:weather-sunny-alert
entities:
- entity: sensor.openweathermap_uv_index
name: UV Index
lower_bound: 0
Check the docs for more related options.
Thanks for answering.
I checked the documentation but didnât find anything that would do what I need. I tried various things but they didnât work for me.
Add lower_bound: 0 and it looks like this
card:
type: "custom:mini-graph-card"
entities:
- sensor.temperatura_plantado
color_thresholds:
- color: "#007BFE"
value: 28.0
- color: "#26fe00"
value: 28.5
- color: "#FF5733"
value: 28.8
- color: "#fe0000"
value: 29.3
lower_bound: 0
line_color: blue
line_width: 6
height: 170
hours_to_show: 24
points_per_hour: 0.5
show:
name: false
icon: false
state: false
Create a graph with a stock history graph card and see if it shows a constant value.
Also, this:
- color: "#FF5733"
value: 28.8
...
line_color: blue
You should not specify a "line_color" proprty.
Thanks. There I did not explain it well. The card shows the information well, but if it stays at the same temperature during the day, it shows the constant temperature well below and it seems that there is no graph
What I want is that if the temperature remains linear, it shows the graph a little higher and not at the bottom of the card.
Set lower_bound and upper_bound to values that fit. Going with your example data Iâd try 26 or 27 up to 29 or 30.
That should set a height for the graph and your line is in the middle of the range. 
Now it looks better but I had to put values very close to what the aquarium has. Aquarium temperatures remain between 28.3 and 28.8
What if it exceeds those temperatures?
lower_bound: 28.3
upper_bound: 28.8
Hi
somebody could you help me with a way/solution/approach to use Style in my (several) custom mini-graph items contained inside of a horizontal-stack?
I have been able to do it with each mini-graph, but I want to check if it is possible to use a general style code to all mini-graph inside of horizontal stack
Use:
lower_bound: ~28.3
upper_bound: ~28.8
Thanks⌠I m using it for each mini-graph, but I would like use one Style code for all mini-graphâs contained in the same horizontal stack, maybe thiking in avoid re-write same code for each of those mini-graphs
For vertical, rewrite it for horizontal:
type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card:
$:
mini-graph-card:
$: |
.states.flex .state .state__value.ellipsis {
color: orange;
}
.states.flex .state .state__uom.ellipsis {
color: cyan;
}
.header.flex .name.flex {
color: magenta;
}
.header.flex .icon {
color: red;
}
card:
type: vertical-stack
cards:
- type: custom:mini-graph-card
entities:
- sensor.cleargrass_1_temp
- type: custom:mini-graph-card
entities:
- sensor.cleargrass_1_temp
- type: custom:mini-graph-card
entities:
- sensor.cleargrass_1_temp
oohhh, ok, maybe this should be the approach that I require use and not trying to add style directly to horizontal/vertical stack, thanks let me test it,
Card-mod cannot be applied to the stack directly - you should insert the stack into mod-card.