This worked out perfect. Thank you very much.
1 Like
Hi
I feel like I have tried everything: I want to change the color of the bars i plot in a mini-graph-card with an if-statement based on which hour it is to highlight which bar represents the current electricity price. I thought card-mod is the best way to go but I canāt find out even how to change the color with card-mod. I have tried place the card-mod code in different places but I donāt really know what iām doing. I can change the color with the ācolor entryā when i add the entitiy to the graph but not with card-mod to include the if-statement. Any suggestions how to proceed here? Perhaps there is another smarter way than if-statement based on the current hour?
The image should show what Iām after, The code I have right now is belowā¦ i have removed some entity entries just to make the code a bit more readable.
type: custom:mini-graph-card
entities:
- entity: sensor.nordpool_kwh_se3_sek_3_095_025
color: '#d0cdcd'
show_graph: false
show_state: true
state_adaptive_color: true
- entity: sensor.nordpool_today_hr_00_01
name: Today hour 1
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_01_02
name: Today hour 2
color: '#03a9f4'
show_legend: false
name: Elpris idag
group_by: hour
hours_to_show: 1
lower_bound: 0
hour24: true
icon: mdi:cash-multiple
show:
graph: bar
card_mod:
style: |
ha-card > div.graph > div > div.graph__container__svg > svg > g > g:nth-child(17) > rect {
fill: 'grey';
}
Thanks in advance !
//Noob HA user 
- A path for some ābarā should be defined as below:
type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
group_by: hour
hours_to_show: 24
show:
graph: bar
card_mod:
style: |
.graph__container__svg svg g.bars .bar:nth-child(5) {
fill: grey;
}
This works for a āshow 1 graphā case.
In your case a code contains 3 graphs (one with āshow_graph: falseā) - so adapt this style for your case.
- To select some bar you need to use smth like ā
nth-child(17)ā.
Each bar corresponds to some hour. If you need to select the current hour - this will be the LAST bar.
Goto 1st post ā link at the bottom ā styles for mini-graph-card ā How to set a color for the last bar.
If you need to select SOME PARTICULAR bar - then use this:
card_mod:
style: |
{% set INDEX = ................ -%}
.graph__container__svg svg g.bars .bar:nth-child({{INDEX}}) {
fill: grey;
}
where you need to specify a formula for the āINDEXā value.
in addition to the great main post on picture-glance, I needed a way to style the pointer-events: none
first I set it to the ha-card, but that was moot, since I use these picture-element cards to navigate to my roomsā¦ only looked for a way to have the bottom-section icons be non-responsive.
this seems to work as hoped for, posting here for others to help, and if something could be optimized, please do (as always the challenge is in combining several styling aspects, in the case the border on the card. the [[]] originate the decluttering template I use for these Navigating cards):
type: picture-glance
card_mod:
style:
.: |
ha-card {
border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
else 'none'}};
}
.box: |
.wrapper {
pointer-events: none;
}
full decluttering-card template:
default:
- trigger_state: 'on'
card:
type: picture-glance
card_mod:
style:
.: |
ha-card {
border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
else 'none'}};
}
.box: |
.wrapper {
pointer-events: none;
}
entity: '[[main_id]]'
# title: '[[title]]'
show_state: true
state_filter:
'off': grayscale(80%)
'unavailable': grayscale(100%)
# area: '[[area]]'
image: /local/images/areas/[[image]]
aspect_ratio: 100%
tap_action: none
hold_action:
action: navigate
navigation_path: /ui-sub-views/[[path]]
double_tap_action:
action: toggle
entities:
'[[entities]]'
the card_mod stops me from requiring this on all cards per entity:
- entities:
- entity: sensor.laundry_sensor_temperature
<<: &none
tap_action: none
hold_action: none
double_tap_action: none
- entity: sensor.laundry_sensor_illuminance
<<: *none
- entity: binary_sensor.back_door
<<: *none
- entity: switch.boiler_bijkeuken
<<: *none
saving a lot of (already anchored) yamlā¦
2 things needing further exploration:
- only disable pointer-events on the
div:nth-child(2)and not on the actionable entities in the 3d section to the right - only allow hover popups, and nu further interaction. which is not that straightforward so it seemsā¦html - Is there a `pointer-events:hoverOnly` or similar in CSS? - Stack Overflow
juist for reference, this can be done, and is probably tidier:
type: picture-glance
card_mod:
style: |
ha-card {
border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
else 'none'}};
}
.box div:nth-child(1) .wrapper {
pointer-events: none;
}
and even
.box div:nth-child(1) {
pointer-events: none;
}
since I dont use titles for the picture-glance cards, the div is 1ā¦ it opens up the right section for interaction.
I also tried to set cursor: none in that section, but suppose I need another property to attach that to, because it cant be dine generically in that div
the hover popups are a bit slow (in button-card I always use
transition: opacity 0.5s
for that)
, but this shows what it does alright
just found a card_mod I dont think that has been posted here yet:
- type: picture-entity
card_mod:
style: |
ha-card {
{{'filter: invert(100%)' if is_state('binary_sensor.dark_outside','on')
else 'filter: none'}} ;
}
show_state: false
show_name: false
entity: camera.weer_roosendaal
turning day card/light:
into night/dark:
which I find to be exactly what I was looking for 
well, except for the color of the sun ofc, but hey, thatās a minor detailā¦
@Ildar_Gabdullin Thanks for taking time to explain for a beginner
Your example colors the whole graph if I select nth-child(1) since I only show 1 hour per entity. My entities are energy prices for one hour that is why I have this set up.
I donāt see how to tweak it to select the right entity to color When i check the inspector the bars seem to have individual numbers so I donāt really understand 
Do you have any additional suggestion?
Thanks for helping out!
Not sure I understand you.
In my example there is a graph with N bars for some time span (hours_to_show). By card-mod you may colorize some bar(s) - the first, the last, the 7th etc.
Probably your initial goal is not clear then. Post a graph and explain which bar you want to colorize.
Can you share the complete yaml code this this card? Thanks.
this Is the complete yaml code
this is a generic camera integration entity,
made on the
https://www.yr.no/en/content/2-2747930/meteogram.svg resource.
if you go there you find your own region and save thathttps://www.yr.no/en
1 Like
besides the current price indicator, didnt you consider using some thresholds? I find the bar card especially suited for that:
color_threshold:
- value: 0.05
color: lightgreen
- value: 0.1
color: green
- value: 0.2
color: orange
- value: 0.3
color: darkorange
- value: 0.4
color: red
- value: 0.5
color: maroon
- value: 0.6
color: purple
- value: 0.7
color: black
more configurability is available using apexcharts btw, making indicating the current price even easier, injecting a secondary graph, and the Now indicator:
Hi, Yes sorry Iām probably not being clear.
Iāll take it from beginning maybe it will be more clear:
I have sensor data for energy price for each hour. So sensor.nordpool_today_hr_00_01 (energy cost during 00:00 - 01:00), sensor.nordpool_today_hr_01_02 ( energy cost during 01:00 - 02:00) I have 24 bars that are plotted with individal entity and I only show 1 hour.
group_by: hour
hours_to_show: 1
But since i put
entities:
- entity: sensor.nordpool_today_hr_00_01
name: Today hour 1
show_legend: false
- entity: sensor.nordpool_today_hr_01_02
name: Today hour 2
show_legend: false
... and so on until ...
- entity: sensor.nordpool_today_hr_23_24
name: Today hour 24
show_legend: false
If i put in your card_mod code addressing the 2nth bar in the end of my card:
card_mod:
style: |
.graph__container__svg svg g.bars .bar:nth-child(2) {
fill: grey;
}
Nothing happens since i donāt show the 2nth bar of any entity.
If I however, put in 1 in nth-child:
card_mod:
style: |
.graph__container__svg svg g.bars .bar:nth-child(1) {
fill: grey;
}
I color the whole graph (all 24 bars get color grey) because each entity has is represented by 1 bar and iām now coloring 1st bar of every entity. Do you see my problem ?
I donāt understand the how to translate the DOM to CSS/YAML for card-mod but what Iām after (i know it is not correct but):
card_mod:
style: |
.graph__container__svg svg g.bars .bar:nth-child(1) entity(1) {
fill: grey;
}
Your figure with Processor use where you are colring the 5th bar is exaclty what Iām after and the generic code to set the id of the bar is perfect for my purpose but it seems like the card_mod style is not specifying which entity it is refering to modify the fill for which in my case seems to be needed.
I hope that makes sence THanks again for helping out, It is much appreciated!
this wont work, because for 24 hours, you show 24 entities.
that is a completely different config from a single entity shown for 24 hours.
sadly there is no option in the mini-graph-card card to add a ānowā label. if you d need the now indicator, maybe some nifty vertical-stack option could work showing the 2 on top of each other.
ofc, the easiest way out here would be the apexcharts, which has the option builtin:
now:
show: true
label: Now
I opened a discussion on mini-graph-card for it, because it seems very usable addition to that great card
Was it changed recently that we need to set --section-header-text-color in the mod styling for the fold-entity-row label?
I just noticed that my original color: no loner worked:
- type: custom:fold-entity-row
card_mod:
style: |
:host {
color: {{'ivory' if is_state('binary_sensor.dark','on') else 'green'}};
--paper-item-icon-color: {{'ivory' if is_state('binary_sensor.dark','on') else
'darkgreen' }};
}
head:
type: section
label: Details
card_mod: &label
style: |
.label {
--section-header-text-color:{{'ivory' if is_state('binary_sensor.dark','on') else 'green'}};
margin-left: 0px;
}
Then there is no need to use card-mod.
Consider these 24 sensors:
sensor.testing_price_0_1
...
sensor.testing_price_23_0
where each is a price for a particular hour.
Let them be equal to ā1, ā¦, 24ā for simplicity.
Then we got 24 bars , orange/green colors to differentiate every 4-hours interval, and the red bar is the current time:
where the bottom card is for a āsome bar is selectedā case.
code
- type: custom:auto-entities
card:
type: custom:mini-graph-card
name: prices
hours_to_show: 1
points_per_hour: 1
show:
graph: bar
name: true
state: false
icon: false
labels: true
legend: false
filter:
template: >-
{% set PART_1 = states.sensor |
selectattr('entity_id','search','testing_price_[\d]_') |
sort(reverse=false,attribute='entity_id') -%}
{%- set PART_2 = states.sensor |
selectattr('entity_id','search','testing_price_[\d][\d]_') |
sort(reverse=false,attribute='entity_id') -%}
{%- set PRICES = PART_1 + PART_2 -%}
{%- for state in PRICES -%}
{%- if loop.index == now().hour|int(0) -%}
{%- set COLOR = 'red' -%}
{%- elif loop.index in [1,2,3,4,9,10,11,12,17,18,19,20] -%}
{%- set COLOR = 'orange' -%}
{%- else -%}
{%- set COLOR = 'lightgreen' -%}
{%- endif -%}
{{
{
'entity': state.entity_id,
'color': COLOR
}
}},
{%- endfor %}
Just for educational purpose: this is a valid selector to colorize the 3rd bar (may be used if you decide not to use auto-entities):
card_mod:
style: |
.graph__container__svg svg g.bars:nth-of-type(3) .bar {
fill: magenta;
}
2 Likes
nice Ildar!
can confirm
{% set now = now().hour %}
.graph__container__svg svg g.bars:nth-of-type({{now}}) .bar {
fill: magenta;
}
to work also
for obvious reasons (the bars are colored depending on the actual price thresholds) Id like it to be distinguished eg by setting a border
{% set now = now().hour %}
.graph__container__svg svg g.bars:nth-of-type({{now}}) .bar {
border: solid 0.5em red;
}
however does not change the bar border, even though inspector seems to use that element.
1 Like
Hello
I have been following your discussions and thoughts regarding the apexcharts card with great interest. I have a different thought than the ones Iāve seen you discuss so far, but it still applies to the sensor for the energy price. My desire is to be able to color the different bars depending on whether they are above or below, say, the average for the day. If it were possible to use the value of a sensor or some kind of template to specify the value of a color_threshold, that would solve my problem. I have made a few attempts without success. Is there any solution to this./Peter
Both methods are great suggestions, thanks this works perfectly for my purpose
Iād say that to be a apexcharts specific challengeā¦ maybe better hop over to that thread, did you check there btw?
If not already possible inside the supported card option, Id try it with custom:config-template-card and set a template on the color like that
No, I just stumbled upon this thread via a google search. Iāll have to try to find another thread about this then. Thanks anyway