how to make sure that the gray fill graph for displaying day and night does not disappear ?
wondering if someone can help me remove the rounded corners and the shadow. The card is inside a swiper card
type: custom:swipe-card
parameters:
spaceBetween: 8
scrollbar:
hide: true
draggable: true
snapOnRelease: true
cards:
- type: custom:mini-graph-card
entities:
- sensor.beaus_bedroom_average_temperature
line_width: 2
line_color: blue
font_size_header: 10
show:
icon: true
name: false
state: false
This really triggers my OCD…
1 Like
I am having some trouble with a mini graph. I have a mini graph for my washer and my dryer. Here is the code for the washer.
type: custom:mini-graph-card
entities:
- entity: input_select.washer
name: Washer Status
color: 'rgb(255,0,0)'
show_legend: true
show_line: false
show_fill: true
- entity: sensor.basement_aqara_washer_active_power
name: Washer Power
color: '#3182b7'
show_fill: true
show_legend: false
y_axis: secondary
line_width: 1
decimals: 0
hours_to_show: 24
points_per_hour: 60
hour24: true
lower_bound_secondary: 0
upper_bound_secondary: 500
state_map:
- value: Empty
label: Empty
- value: Complete
label: Complete
- value: Running
label: Running
show:
name: false
state: false
points: false
icon: false
extrema: false
labels: false
labels_secondary: false
card_mod:
style: |
ha-card {
--ha-card-background: rgba(115, 115, 115, 0.25);
--primary-text-color: '#97989c';
border-radius: 10px;
border: none;
}
.graph__legend__item:nth-of-type(1) .ellipsis:after {
content: ": {{states('input_select.washer')}}";
color: '#97989c';
}
.graph .graph__legend {
font-size: 15px;
}
I have it in a stack-in-card with the dryer as seen below.
As you can see in my code, I am trying to have the legend at the top for the washer and dryer that shows the state of the input_select helper for each. No matter what I try though, it will not show up. Is it not possible to show the state of an Input_select helper or is there an error in my code that I am missing? Any help would be greatly appreciated. Thanks in advance.
I would say - you are a happy man & live in a healthy & peaceful society.
2 Likes
Hi,
sorry for the maybe trivial question, I’m new to this card and to customization in general. Is there a way to get the colour gradient not on absolute thresholds but instead on percentages of the shown data?
Like top 75% of the graph is always red, bottom 25% green, middle 25-75% orange?
Thanks,
-E-
Unsupported.
MAY BE try adding a gradient mask by card-mod.
Hey,
it is posoble to reduce the gabs?
Card Mod is installed, but i have no idear.
big Thanks Andi
I’m no CSS expert but I can give it a try. Thanks for the prompt response.
Can anyone help with showing the legend for the input-select helpers?
What is the best way to deal with NaN values? I can make myself a template sensor that returns zero instead of NaN, but that screws up other cards that have proper handling of NaN values.
Example: I have a machine connected to a Vodafone gateway that is somewhat unstable. So I have a binary ping sensor with a state attribute that gives me the ping time to Vodafone’s gateway and to Google’s DNS. When the connection is down, the ping time goes to NaN. HA’s built-in history and statistics graph cards draw an interrupted line in that case:
Mini-graph-card, on the other hand, continues the graph with the last value:
type: custom:mini-graph-card
entities:
- entity: binary_sensor.ping_vodafone
attribute: round_trip_time_avg
aggregate_func: last
name: Vodafone 91.64.45.254 (last)
color: red
show_line: false
show_legend: false
- entity: binary_sensor.ping_vodafone
attribute: round_trip_time_max
aggregate_func: max
name: Vodafone 91.64.45.254 (max)
color: red
show_state: false
- entity: binary_sensor.ping_google_dns
attribute: round_trip_time_avg
aggregate_func: last
name: Google 8.8.8.8 (last)
color: blue
show_line: false
show_legend: false
show_state: true
- entity: binary_sensor.ping_google_dns
attribute: round_trip_time_max
aggregate_func: max
name: Google 8.8.8.8 (max)
color: blue
show_state: false
- entity: binary_sensor.ping_vodafone
color: orange
name: Gateway-Erreichbarkeit
show_line: false
show_points: false
show_legend: false
show_state: false
y_axis: secondary
show:
labels: true
extrema: false
points: false
fill: fade
state_map:
- value: 'off'
label: Nicht erreichbar
- value: 'on'
label: Erreichbar
name: Ping Vodafone & Google (1 Stunde)
icon: mdi:speedometer
line_color: orange
line_width: 1
font_size: 75
hours_to_show: 1
points_per_hour: 240
This is obviously undesirable, because the continuous graph makes it seem that ping is working when it’s obviously not. So what better way to handle NaN situations?
If some entity is unavailable / unknown within some period - history-graph shows gaps. Mini-graph shows a flatline. You cannot change it. There is an open FR in Github for this.
1 Like
OK, thanks. So I made myself a template sensor that returns a ping time of 0 if the ping is unavailable, it’s not really optimal but at least it’s visually clear.
Is there a way for the secondary y-axis label to ignore one of the secondary y-axis? I have the temperature as primary then humidity and night state as 0 (day time) or 100 (night time) on the secondary. I want to ignore the day/night values for the labs because it will just show the min as 0 and max 100 and I want to see the humidity instead.
1 Like
Each entity is either primary or secondary axis.
If you look at the lower right hand side, if I enable the secondary label, the max shows as 100 instead of the highest humidity because the night state is either 0 when it’s day or 100 when it’s night. Though I’m not sure why the min is showing as 53 instead of 0 which I assumed will be the case.
Edit: I figured out why it was showing 53. I put a lower bound on the secondary.
There is no sense to use same axis for values with diff nature.
Yeah but this is the only way I can think of to get a graph with temperature, humidity, and night state. Do you have a suggestion on how to accomplish the similar graph with a different approach?
I’ve had to do something similar. The best you can do in that case is to make the night sensor numeric, set its on and off to the min and max of one of your sensors (humidity, in this case, since it has boundaries) and display it on the same axis.
EDIT: Doesn’t seem like I still have that, unfortunately.
The only way to have 3-axis graph - placing 2-axis graph above 1-axis graph. Rather tricky.