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
this is the one: https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card
Thank you! /Peter
Hello,
I am trying to change the background color of my custom:mini-graph-card based on the state of the switch.socket_isomactea switch
Green = On
Red = Off
So i added
card_mod:
style:
.: |
ha-card {
background-color: green
}
but how i change to color based on the Item Stat?
type: custom:mini-graph-card
name: La Pavoni
icon: mdi:coffee
card_mod:
style:
.: |
ha-card {
background-color: green
}
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.socket_isomactea
entities:
- entity: sensor.socket_isomactea_energy_power
name: now
- entity: sensor.socket_isomactea_energy_today
name: today
show_state: true
show_indicator: true
show_graph: false
- entity: sensor.socket_isomactea_energy_yesterday
name: yesterday
show_state: true
show_indicator: true
show_graph: false
hours_to_show: 24
line_width: 3
hour24: true
aggregate_func: max
height: 50
1st post - link at the bottom
This makes the icons misaligned as they expand from the top left to the bottom right. How can I use this but have them scale in size from the center?
Examples are not supposed to solve every case. They just give a first push.
Try playing with styles for the ātextā element.
I try to change the font color of the sun card, with no sucess. Any idea?
type: custom:sun-card
language: de
style: |
ha-card {
color: red;
}
??
1st post - link at the bottom
Ups, thanks.