Color thresholds may be defined on a card level and become common for all entities.
There is a FR to make it per-entity - you may find it on Github and start monitoring.
IMHO using thresholds for more than 1 graph is “overwhelming” (cannot find a right word in English), especially if “fill” is defined.
1 Like
thank you for your reply.
I’m afraid I don’t know what you mean by FR.
do you have the full name so I can find it on github.
that would be very nice of you
Now I understand 
Thank you and have a nice evening
1 Like
Add state: false.
- type: custom:mini-graph-card
entities:
- sensor.datchik_temperatury_na_pervom_etazhe_temperature
- sensor.datchik_temperatury_na_vtorom_etazhe_temperature
- sensor.datchik_temperatury_v_vannoi_temperature
- sensor.datchik_temperatury_v_prikhozhei_temperature
hours_to_show: 24
points_per_hour: 2
line_width: 1
hour24: true
animate: true
height: 80
show:
extrema: false
icon: false
name: false
legend: false
state: false
What do you mean by
?
1 Like
Would you mind sharing your code?
For the card as well as the change you did to the theme.
I’m assuming you’re using Leon’s theme.
I too would like to use that style on my mini-graph-cards.
So that each line of the graph has its own name.
Hi, I’ve got 2 problems with these parameters:
color: var(--white); → it ignores white but accepts any other color (red, green, pink, etc).
Instead of white, it’s grey-ish.
font-family: 'Roboto', sans-serif !important; → also not being applied to the card.
Here the complete code:
type: custom:mini-graph-card
entities:
- sensor.temperature
name: test
hours_to_show: 24
points_per_hour: 1.5
decimals: 1
hour24: true
line_width: 3
show:
icon: false
labels: false
points: false
fill: fade
card_mod:
style: |
ha-card {
font-family: 'Roboto', sans-serif !important;
}
.header.flex .name.flex {
font-size: 12px;
line-height: 18px;
background: var(--black);
color: var(--white);
padding: 6px 10px;
border-radius: 100px;
z-index: 1;}
.states.flex {
margin-top: 0;
padding: 2px 24px 0 24px;
order: 1;}
.graph hui-graph-header-footer {
order: 3;}
.header.flex {
padding: 0 24px;
order: 2;
margin: 4px 0 -16px 0;
z-index: 1;}
Dashboard is using this theme: Rounded
Any help appreciated.
--white isn’t a colour. It’s a variable (which may or may not be define and have the value white or an RGB or other format value). Where did you find this? I don’t think HA or the card defines this variable. Just try color: white.
Even if I use color: white; it’s still grey-ish.
The variable is defined in the theme.
Perhaps then there’s an alpha layer or opacity set somewhere. For example, an opacity of 50% will make white look grey. You’ll need to inspect the elements.
Yes, thank you!
This element had an opacity setting.
Changed it to 1.
.header.flex .ellipsis {
opacity: 1;}
Do you have any input about the font-family?
1 Like
Glad the one issue is solved.
Nothing immediately comes up regarding the font. I’ll think more. Those fonts should be standard, but have you tried others like good ol’ Arial?
I didn’t see this in the 5 years of comments so forgive me if I missed it. 
Is there a way to have this value of the card show the sum of all the items?
Create a template sensor, add it as the 1st sensor and switch off showing it’s graph, show only its state, and do not show states of other sensors.
2 Likes
Worked perfect, thank you for the suggestion.
I’m also interested in doing this - any tips on how to make this work? Thanks!
Place the mini-graph-card inside config-template-card (CTC) & define ANY option dynamically by using JS templates. But using the card inside CTC may have side effects.
1 Like
i posted this in reply to a thread for having a zero line for solar generation vs battery consumption.
it was suggested i post it here…so here it is for anyone that needs it, this is how i did it.
i created a template sensor in configuration.yaml
template:
- sensor:
- name: zero
unique_id: zero
state: 0
here is my card config for the mini-graph-card
- type: custom:mini-graph-card
name: I/O Power
entities:
- entity: sensor.greenhousev2_consumption_watts
- entity: sensor.zero
color: rgba(200,200,200,0.2)
show_fill: false
show_line: true
show_points: false
show_legend: false
line_width: 1
- color: '#ACACAC'
entity: sun.sun
name: Sun
show_line: false
show_points: false
show_legend: false
y_axis: secondary
decimals: 2
unit: watts
line_color: '#e74c3c'
line_width: 3
font_size: 77
hours_to_show: 24
points_per_hour: 4
upper_bound: 4
lower_bound: -4
aggregate_func: avg
show:
extrema: true
legend: false
labels: false
state: true
graph: line
fill: true
color_thresholds_transition: hard
color_thresholds:
- value: -4
color: '#e51f1f'
- value: -0.98
color: '#f2a134'
- value: 0
color: '#44ce1b'
state_map:
- value: above_horizon
label: Day
- value: below_horizon
label: Night
note that i used rgba because i wanted the opacity variable so i set it 0.2, i thought i looked nicer.
the extra addition is the grey block which represents nighttime from sun.sun
my orange section is what i define as normal consumption so i can see when im power positive or not
for my watt consumption vs generation this is my configuration.yaml code
- platform: template
sensors:
greenhousev2_consumption_amps:
friendly_name: 'Consumption Amps'
device_class: current
value_template: >-
{% set b = (states.sensor.greenhousev2_ina219_1_current.state | default(0) ) | float(2) %}
{% set s = (states.sensor.greenhousev2_ina219_2_current.state | default(0) ) | float(2) %}
{{ (s-b) | round(2)}}
greenhousev2_consumption_watts:
friendly_name: 'Consumption Watts'
device_class: power
value_template: >-
{% set b = (states.sensor.greenhousev2_ina219_1_power.state | default(0) ) | float(2) %}
{% set s = (states.sensor.greenhousev2_ina219_2_power.state | default(0) ) | float(2) %}
{{ (s-b) | round(2)}}
I just add this in my cards:
- entity: sensor.zero # zero sensor included in Recorder
name: ' '
color: red # or whatever
show_state: false
show_indicator: false
show_graph: true
show_line: true
show_fill: false
show_points: false
show_legend: false
state_adaptive_color: false
fixed_value: true
aggregate_func: min
1 Like