Thank you for pointer <3 
I too have had this issue previously. Try the following under style:
style: |
ha-card .graph {
background: none !important;
}
Thank you for the advise.
I am not experiencing any similar issues. The person who experienced it said something about styles in a theme causing the issue, that is why I asked him about about that particular âbad styleâ.
somehow my bar card setup doyens no longer show any of the entities⌠ive edited most if not all options set, including mods and non essentials, but Ll I get is an empty card.
could anyone please see what has been changed, or why this does no longer show any bar?
all of the individual entities exist in dev tools states:
type: entities
entities:
- type: custom:mini-graph-card
hours_to_show: 1
icon: none
name: EasyEnergy electriciteit prijzen
tap_action:
action: none
card_mod: &mod
style: |
ha-card {
box-shadow: none;
margin: -16px;
}
{% set now = now().hour %}
.graph__container__svg svg g.bars:nth-of-type({{now}}) .bar {
fill: var(--primary-color);
transition: opacity .25s cubic-bezier(0.215, 0.61, 0.355, 1);;
}
entities:
- entity: sensor.gemiddelde_energieprijs_vandaag
state_adaptive_color: true
show_graph: false
- entity: sensor.energieprijs_huidige_uur
name: Huidige prijs
show_indicator: true
state_adaptive_color: true
show_state: true
show_graph: false
- entity: sensor.energieprijs_uur_0
name: 00:00-01:00
- entity: sensor.energieprijs_uur_1
name: 01:00-02:00
- entity: sensor.energieprijs_uur_2
name: 02:00-03:00
- entity: sensor.energieprijs_uur_3
name: 03:00-04:00
- entity: sensor.energieprijs_uur_4
name: 04:00-05:00
- entity: sensor.energieprijs_uur_5
name: 05:00-06:00
- etc etc
before you ask: I did test quoting the entity names too, no change in the card
Hello friends. Please help with the schedule. I need to sign each line and remove the main value 23.09. Below is my code. Thank you in advance for your help!
type: vertical-stack
cards:
- type: custom:stack-in-card
keep:
border_radius: true
margin: true
cards:
- type: custom:button-card
name: Temp
show_name: true
styles:
card:
- padding: 0px
- border: 0px
name:
- justify-self: start
- padding-left: 10px
- font-size: 20px
- font-weight: 150px
- type: horizontal-stack
cards:
- 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
color_thresholds:
- value: 30
color: '#d32f2f'
- value: 20
color: '#388e3c'
- value: 10
color: '#0000ff'
Hello
I have a problem configuring the mini graph card.
I have in a stack first above three thermostats in a swipe card. This works fine.
In the middle I have the mini graph card, this makes problems.
At the bottom I have an entity card with the battery sensors.
My problem is now the following:
I want to work with a gradient on both lines. Each line with different colors and
values. But when I work with color_thresholds:, this somehow does not work.
I tried to configure each entity individually by adding the respective additions under each entity.
Maybe someone of you can tell me why my line customizations are not working?
Thanks a lot
cards:
- cards:
- cards:
- entity: climate.wohnzimmer_links
type: custom:simple-thermostat
layout:
step: row
header: true
control: false
- entity: climate.wohnzimmer_rechts
type: custom:simple-thermostat
layout:
step: row
header: true
control: false
type: custom:swipe-card
type: horizontal-stack
- cards:
- align_state: center
name: Temperatur & Luftfeuchtigkeit
align_header: center
show:
icon: false
entities:
- entity: sensor.fritz_dect_440_wohnzimmer_temperatur
name: Temperatur
show_state: true
color_thresholds:
- value: 0
color: '#58D3F7'
- value: 20
color: '#F3F781'
- value: 22
color: '#F78181'
- entity: sensor.fritz_dect_440_wohnzimmer_luftfeuchtigkeit
name: Luftfeuchtigkeit
show_state: true
color_thresholds:
- value: 0
color: '#58D3F7'
- value: 40
color: '#A9F5A9'
- value: 60
color: '#58D3F7'
type: custom:mini-graph-card
type: horizontal-stack
- cards: null
type: glance
entities:
- entity: sensor.wohnzimmer_links_batterie
name: links
- entity: sensor.fritz_dect_440_wohnzimmer_batterie
name: Dect 440
- entity: sensor.wohnzimmer_rechts_batterie
name: rechts
type: custom:vertical-stack-in-card
style: |
ha-card {
--st-spacing: 2px;
}
Wrong, the âcolor_thresholdsâ is defined on a card level, not per entity.
1 Like
thanks for your quick reply
hm, ok, that explains why the colors donât change.
if i understand this correctly, it is not possible to display both lines with different colors and values, but only one formatting for both lines under entitys?
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