🔹 Card-mod - Add css styles to any lovelace card

this Is the complete yaml code :wink:

this is a generic camera integration entity,

Scherm­afbeelding 2023-02-05 om 13.52.08

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:

          - 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

  - 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:

  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:

  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 ? :slight_smile:

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):

  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 :slight_smile: 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:

      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
          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' }};
          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:


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.

  - type: custom:auto-entities
      type: custom:mini-graph-card
      name: prices
      hours_to_show: 1
      points_per_hour: 1
        graph: bar
        name: true
        state: false
        icon: false
        labels: true
        legend: false
      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):

  style: |
    .graph__container__svg svg g.bars:nth-of-type(3) .bar {
      fill: magenta;  

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

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 :slight_smile:

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


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

    .: |
      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
    .: |
      ha-card {
       background-color: green
  action: call-service
  service: switch.toggle
    entity_id: switch.socket_isomactea
  - 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?

Screen Shot 2023-02-07 at 2.38.39 PM

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.