âWith my all due respectâ, you should have at least explain people here what was a reason of your issue.
You neither posted a code for your card nor shown an origin of your issue.
Not to mention a fact that the very issue is unclear - either you were talking about a NORMAL fill below the graph line or about ABNORMAL fill above the graph line (which only may occur in case of presence of the 2nd graph w/o line):
Asking a question and then saying âok, nevermind, I sorted outâ w/o sharing details about a reason is not cool. Not meant to be rude, sorry if offended.
2 Likes
Yes, I jumped the gun and didnât think. My apologies. It was the abnormal fill that I was having troubles with. My theme file had conflicting css with the graph causing the oddity. Removing the css from the theme file fixed it.
Could you share this wrong style here? Many people are using themes, your experience will be very helpful.
Greetings,
so i have 3 sensors.
1.Electricity usage from grid
2.Electricity usage of the home
3.Solar production
How can i make this graph like this one, colors below the solar production is a different color for the electricity usage and above solar production is electricity usage from grid.
Perhaps look at the Apex Charts custom card. Youâll have a lot more control. I canât tell you how exactly to do that, but look at the examples where a series is one colour when positive and another when negative. This might get you in the right direction.
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.