Lovelace: Bar Card

joaopedros2 · October 16, 2023, 2:13pm

With a bit of research and using the structure of your code, I arrived at this solution. Thank you!

{% if states(config.entity) == "unavailable" %}
  bar-card-value {
	visibility: hidden !important;
  }
  bar-card-value::after {
	visibility: visible;
	content: "n/a";
  }
{% endif %}

Subia75 · October 23, 2023, 8:45am

Hi,
I’m revisiting this post even though it’s old.
I would like to try using the gradient color but it displays it correctly, it colors the entire bar without considering the sensor percentage which is 63%.

I wonder if it is possible to share the card to understand how you did it.
thank you very much

Hope · October 29, 2023, 9:32am

You have to add the clip-path:

cismarine · November 3, 2023, 12:21pm

Hi Guys,
Can image be used as indicator?
to get something similar:

images

Ildar_Gabdullin · November 9, 2023, 11:08pm

This card is for displaying a bar, not a slider control.
Indicator is a “arrow-like” image, it is not a mark of the current value.

Alex_Z · November 11, 2023, 4:29pm

i´d like to know, how you reduced the height of the rows, including the gaps between them.

Sorry for the late answer, I just solved the problem with the gaps for myself with this string:

  bar-card-row {margin-bottom: -20px !important; margin-top: -10px !important;}

inside the style section

Franck_Code4Fun · November 15, 2023, 10:25pm

Hi,
I managed to do something that I like but I find that my code is complicated for several entities. Do you have an idea to reduce it?

type: vertical-stack
cards:
  - type: custom:auto-entities
    card:
      type: custom:bar-card
      align: split
      columns: 1
      height: 2px
      width: 70%
      icon: mdi:lightning-bolt
      animation:
        state: 'on'
        speed: 2
      attribute: null
      color: white
      decimal: 0
      direction: right
      style: "ha-card { --paper-item-icon-color: rgb(47,186,229); border-radius: 2.5px; border-width: 0px !important; background: none; border: none;height: 38px; }\nha-icon\t { margin-top: -40px; padding-right: 25px; }  bar-card-indicator\t { margin-top: -10px; padding-right: 0px; }  bar-card-name\t { margin-top: 0px; padding-left: 0px; }  bar-card-backgroundbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-currentbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-targetbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-animationbar\t { margin-top: 12px;  padding-right: 0px; } bar-card-targetmarker\t { margin-top: 40px; border-radius: 2.5px; } bar-card-value\t { margin-top: 0px; padding-left: 5px; } bar-card-row {margin-bottom: 0px !important; margin-top: -10px !important;}  bar-card-backgroundbar { background: linear-gradient(to right, green 5%, orange 50%, red 75%); border-radius: 25px; } bar-card-currentbar { background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%); clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%); border-radius: 25px; } bar-card-contentbar  { font-size: 12px; color: white; } bar-card-value  { font-size: 16px; color: white; }"
      positions:
        icon: 'off'
        indicator: inside
        name: inside
        minmax: 'off'
        value: inside
      unit_of_measurement: W
      max: 300
      min: 0
      severity:
        - color: Green
          from: 0
          to: 25
        - color: Orange
          from: 26
          to: 300
        - color: Red
          from: 51
          to: 300
    entities: []
    sort:
      methode: state
      numeric: true
      reverse: true
    filter:
      include:
        - entity_id: sensor.pompe_a_chaleur_power
  - type: custom:auto-entities
    card:
      type: custom:bar-card
      align: split
      columns: 1
      height: 2px
      width: 70%
      icon: mdi:lightning-bolt
      animation:
        state: 'on'
        speed: 2
      attribute: null
      color: white
      decimal: 0
      direction: right
      style: "ha-card { --paper-item-icon-color: rgb(47,186,229); border-radius: 2.5px; border-width: 0px !important; background: none; border: none;height: 38px; }\nha-icon\t { margin-top: -40px; padding-right: 25px; }  bar-card-indicator\t { margin-top: -10px; padding-right: 0px; }  bar-card-name\t { margin-top: 0px; padding-left: 0px; }  bar-card-backgroundbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-currentbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-targetbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-animationbar\t { margin-top: 12px;  padding-right: 0px; } bar-card-targetmarker\t { margin-top: 40px; border-radius: 2.5px; } bar-card-value\t { margin-top: 0px; padding-left: 5px; } bar-card-row {margin-bottom: 0px !important; margin-top: -10px !important;} bar-card-backgroundbar { background: linear-gradient(to right, green 5%, orange 50%, red 75%); border-radius: 25px; } bar-card-currentbar { background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%); clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%); border-radius: 25px; } bar-card-contentbar  { font-size: 12px; color: white; } bar-card-value  { font-size: 16px; color: white; }"
      positions:
        icon: 'off'
        indicator: inside
        name: inside
        minmax: 'off'
        value: inside
      unit_of_measurement: W
      max: 300
      min: 0
      severity:
        - color: Green
          from: 0
          to: 25
        - color: Orange
          from: 26
          to: 300
        - color: Red
          from: 51
          to: 300
    entities: []
    sort:
      methode: state
      numeric: true
      reverse: true
    filter:
      include:
        - entity_id: sensor.informatique_bureau_power
  - type: custom:auto-entities
    card:
      type: custom:bar-card
      align: split
      columns: 1
      height: 2px
      width: 70%
      icon: mdi:lightning-bolt
      animation:
        state: 'on'
        speed: 2
      attribute: null
      color: white
      decimal: 0
      direction: right
      style: "ha-card { --paper-item-icon-color: rgb(47,186,229); border-radius: 2.5px; border-width: 0px !important; background: none; border: none;height: 38px; }\nha-icon\t { margin-top: -40px; padding-right: 25px; }  bar-card-indicator\t { margin-top: -10px; padding-right: 0px; }  bar-card-name\t { margin-top: 0px; padding-left: 0px; }  bar-card-backgroundbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-currentbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-targetbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-animationbar\t { margin-top: 12px;  padding-right: 0px; } bar-card-targetmarker\t { margin-top: 40px; border-radius: 2.5px; } bar-card-value\t { margin-top: 0px; padding-left: 5px; } bar-card-row {margin-bottom: 0px !important; margin-top: -10px !important;} bar-card-backgroundbar { background: linear-gradient(to right, green 5%, orange 50%, red 75%); border-radius: 25px; } bar-card-currentbar { background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%); clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%); border-radius: 25px; } bar-card-contentbar  { font-size: 12px; color: white; } bar-card-value  { font-size: 16px; color: white; }"
      positions:
        icon: 'off'
        indicator: inside
        name: inside
        minmax: 'off'
        value: inside
      unit_of_measurement: W
      max: 300
      min: 0
      severity:
        - color: Green
          from: 0
          to: 25
        - color: Orange
          from: 26
          to: 300
        - color: Red
          from: 51
          to: 300
    entities: []
    sort:
      methode: state
      numeric: true
      reverse: true
    filter:
      include:
        - entity_id: sensor.informatique_salon_power

yes, there are quite a few things to remove (severity duplicates with “background: linear gradient”)

Ildar_Gabdullin · November 15, 2023, 10:36pm

Franck_Code4Fun:

  - type: custom:auto-entities
    ...
    sort:
      methode: state
      numeric: true
      reverse: true
    filter:
      include:
        - entity_id: sensor.pompe_a_chaleur_power

Any special reason to use auto-entities for ONE entity here?

Any special reason to use THREE bar-cards with same settings - instead of using ONE bar-card for three entities?

Santo · November 16, 2023, 3:40pm

Hi everyone, I wanted to ask you how to eliminate the line at the beginning of the bar, as highlighted. thanks to all those who will help me.

Ildar_Gabdullin:

entities:

positions:
minmax: inside
entity_row: true
target: 10
name: Condizionatore Letto
type: custom:bar-card
entities:

entity: sensor.condizionatore_letto_power
decimal: ‘0’
max: ‘1800’
min: ‘0’
icon: mdi:air-conditioner
style: >
bar-card-backgroundbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar { border-radius: 10px; background: linear-gradient(to
right, green 5%, yellow 15%, orange 35%, red 85%);border-radius: 10px;

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);border-radius: 10px;

} ha-card {
border: none !important;
border-radius: 10px;
}

positions:
minmax: inside
entity_row: true
target: 10
name: Condizionatore Cucina
type: custom:bar-card
entities:

entity: sensor.condizionatore_cucina_power
decimal: ‘0’
min: ‘0’
max: ‘1800’
icon: mdi:air-conditioner
style: >
bar-card-backgroundbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}

positions:
minmax: inside
entity_row: true
target: 10
name: Lavastoviglie
type: custom:bar-card
entities:

entity: sensor.lavastoviglie_current_power
decimal: ‘0’
min: ‘0’
max: ‘2500’
icon: mdi:dishwasher
style: >
bar-card-backgroundbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}

positions:
minmax: inside
entity_row: true
name: Frigorifero
type: custom:bar-card
entities:

entity: sensor.frigorifero_current_power
decimal: ‘0’
min: ‘0’
max: ‘200’
icon: mdi:fridge
style: >
bar-card-backgroundbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}

positions:
minmax: inside
entity_row: true
target: 10
name: Macchina Caffé
type: custom:bar-card
entities:

entity: sensor.macchina_caffe_current_power
decimal: ‘0’
min: ‘0’
max: ‘650’
icon: mdi:coffee-maker
style: >
bar-card-backgroundbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}

positions:
minmax: inside
entity_row: true
target: 10
name: Lavatrice
type: custom:bar-card
entities:

entity: sensor.lavatrice_power
decimal: ‘0’
min: ‘0’
max: ‘2500’
icon: mdi:washing-machine
style: >
bar-card-backgroundbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}

positions:
minmax: inside
entity_row: true
target: 10
name: Asciugatrice
type: custom:bar-card
entities:

entity: sensor.asciugatrice_power
decimal: ‘0’
min: ‘0’
max: ‘1500’
icon: mdi:tumble-dryer
style: >
bar-card-backgroundbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}

positions:
minmax: inside
entity_row: true
target: 10
name: Motore Acqua
type: custom:bar-card
entities:

entity: sensor.linea_prese_channel_2_power
decimal: ‘0’
min: ‘0’
max: ‘1500’
icon: mdi:water-pump
style: >
bar-card-backgroundbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
title: Visione Carichi
type: entities
show_header_toggle: false

Ildar_Gabdullin · November 16, 2023, 3:43pm

Post a code for your card, otherwise an origin of this line is unclear.

Santo · November 16, 2023, 3:55pm

Blockquote
entities:

positions:
minmax: inside
entity_row: true
target: 10
name: Condizionatore Letto
type: custom:bar-card
entities:
- entity: sensor.condizionatore_letto_power
  decimal: ‘0’
  max: ‘1800’
  min: ‘0’
  icon: mdi:air-conditioner
  style: >
  bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
positions:
minmax: inside
entity_row: true
target: 10
name: Condizionatore Cucina
type: custom:bar-card
entities:
- entity: sensor.condizionatore_cucina_power
  decimal: ‘0’
  min: ‘0’
  max: ‘1800’
  icon: mdi:air-conditioner
  style: >
  bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
positions:
minmax: inside
entity_row: true
target: 10
name: Lavastoviglie
type: custom:bar-card
entities:
- entity: sensor.lavastoviglie_current_power
  decimal: ‘0’
  min: ‘0’
  max: ‘2500’
  icon: mdi:dishwasher
  style: >
  bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
positions:
minmax: inside
entity_row: true
name: Frigorifero
type: custom:bar-card
entities:
- entity: sensor.frigorifero_current_power
  decimal: ‘0’
  min: ‘0’
  max: ‘200’
  icon: mdi:fridge
  style: >
  bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
positions:
minmax: inside
entity_row: true
target: 10
name: Macchina Caffé
type: custom:bar-card
entities:
- entity: sensor.macchina_caffe_current_power
  decimal: ‘0’
  min: ‘0’
  max: ‘650’
  icon: mdi:coffee-maker
  style: >
  bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
positions:
minmax: inside
entity_row: true
target: 10
name: Lavatrice
type: custom:bar-card
entities:
- entity: sensor.lavatrice_power
  decimal: ‘0’
  min: ‘0’
  max: ‘2500’
  icon: mdi:washing-machine
  style: >
  bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
positions:
minmax: inside
entity_row: true
target: 10
name: Asciugatrice
type: custom:bar-card
entities:
- entity: sensor.asciugatrice_power
  decimal: ‘0’
  min: ‘0’
  max: ‘1500’
  icon: mdi:tumble-dryer
  style: >
  bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
positions:
minmax: inside
entity_row: true
target: 10
name: Motore Acqua
type: custom:bar-card
entities:
- entity: sensor.linea_prese_channel_2_power
  decimal: ‘0’
  min: ‘0’
  max: ‘1500’
  icon: mdi:water-pump
  style: >
  bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);border-radius: 10px;

}

bar-card-currentbar {

background: linear-gradient(to right, green 5%, yellow 15%, orange 35%,
red 85%);

clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0
100%);

} ha-card {
border: none !important;
}
title: Visione Carichi
type: entities

Ildar_Gabdullin · November 16, 2023, 4:06pm

Suggest to remove all card-mod code and then add it one by one

Franck_Code4Fun · November 16, 2023, 6:13pm

In fact, I’m clumsily trying to use automatic entities to avoid typing the same code 3 times.
While testing, I realized that by using 1 bar-card with self-entities and 3 entities, the bar-graphs are superimposed on each other because of my style.

I don’t see any other solution than making 3 bar-cards…

I fixed my code by removing auto-entities

type: vertical-stack
cards:
  - type: custom:bar-card
    align: split
    columns: 1
    height: 2px
    width: 70%
    icon: mdi:lightning-bolt
    animation:
      state: 'on'
      speed: 2
    attribute: null
    color: white
    decimal: 0
    direction: right
    style: "ha-card { --paper-item-icon-color: rgb(47,186,229); border-radius: 2.5px; border-width: 0px !important; background: none; border: none;height: 38px; }\nha-icon\t { margin-top: -40px; padding-right: 25px; }  bar-card-indicator\t { margin-top: -10px; padding-right: 0px; }  bar-card-name\t { margin-top: 0px; padding-left: 0px; }  bar-card-backgroundbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-currentbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-targetbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-animationbar\t { margin-top: 12px;  padding-right: 0px; } bar-card-targetmarker\t { margin-top: 40px; border-radius: 2.5px; } bar-card-value\t { margin-top: 0px; padding-left: 5px; } bar-card-row {margin-bottom: 0px !important; margin-top: -10px !important;}  bar-card-backgroundbar { background: linear-gradient(to right, green 5%, orange 50%, red 75%); border-radius: 25px; } bar-card-currentbar { background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%); clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%); border-radius: 25px; } bar-card-contentbar  { font-size: 12px; color: white; } bar-card-value  { font-size: 16px; color: white; }"
    positions:
      icon: 'off'
      indicator: inside
      name: inside
      minmax: 'off'
      value: inside
    unit_of_measurement: W
    max: 300
    min: 0
    severity:
      - color: Green
        from: 0
        to: 25
      - color: Orange
        from: 26
        to: 300
      - color: Red
        from: 51
        to: 300
    entities:
      - entity: sensor.pompe_a_chaleur_power
  - type: custom:bar-card
    align: split
    columns: 1
    height: 2px
    width: 70%
    icon: mdi:lightning-bolt
    animation:
      state: 'on'
      speed: 2
    attribute: null
    color: white
    decimal: 0
    direction: right
    style: "ha-card { --paper-item-icon-color: rgb(47,186,229); border-radius: 2.5px; border-width: 0px !important; background: none; border: none;height: 38px; }\nha-icon\t { margin-top: -40px; padding-right: 25px; }  bar-card-indicator\t { margin-top: -10px; padding-right: 0px; }  bar-card-name\t { margin-top: 0px; padding-left: 0px; }  bar-card-backgroundbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-currentbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-targetbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-animationbar\t { margin-top: 12px;  padding-right: 0px; } bar-card-targetmarker\t { margin-top: 40px; border-radius: 2.5px; } bar-card-value\t { margin-top: 0px; padding-left: 5px; } bar-card-row {margin-bottom: 0px !important; margin-top: -10px !important;}  bar-card-backgroundbar { background: linear-gradient(to right, green 5%, orange 50%, red 75%); border-radius: 25px; } bar-card-currentbar { background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%); clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%); border-radius: 25px; } bar-card-contentbar  { font-size: 12px; color: white; } bar-card-value  { font-size: 16px; color: white; }"
    positions:
      icon: 'off'
      indicator: inside
      name: inside
      minmax: 'off'
      value: inside
    unit_of_measurement: W
    max: 300
    min: 0
    severity:
      - color: Green
        from: 0
        to: 25
      - color: Orange
        from: 26
        to: 300
      - color: Red
        from: 51
        to: 300
    entities:
      - entity: sensor.informatique_bureau_power
  - type: custom:bar-card
    align: split
    columns: 1
    height: 2px
    width: 70%
    icon: mdi:lightning-bolt
    animation:
      state: 'on'
      speed: 2
    attribute: null
    color: white
    decimal: 0
    direction: right
    style: "ha-card { --paper-item-icon-color: rgb(47,186,229); border-radius: 2.5px; border-width: 0px !important; background: none; border: none;height: 38px; }\nha-icon\t { margin-top: -40px; padding-right: 25px; }  bar-card-indicator\t { margin-top: -10px; padding-right: 0px; }  bar-card-name\t { margin-top: 0px; padding-left: 0px; }  bar-card-backgroundbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-currentbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-targetbar\t { margin-top: 12px; border-radius: 2.5px; } bar-card-animationbar\t { margin-top: 12px;  padding-right: 0px; } bar-card-targetmarker\t { margin-top: 40px; border-radius: 2.5px; } bar-card-value\t { margin-top: 0px; padding-left: 5px; } bar-card-row {margin-bottom: 0px !important; margin-top: -10px !important;}  bar-card-backgroundbar { background: linear-gradient(to right, green 5%, orange 50%, red 75%); border-radius: 25px; } bar-card-currentbar { background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%); clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%); border-radius: 25px; } bar-card-contentbar  { font-size: 12px; color: white; } bar-card-value  { font-size: 16px; color: white; }"
    positions:
      icon: 'off'
      indicator: inside
      name: inside
      minmax: 'off'
      value: inside
    unit_of_measurement: W
    max: 300
    min: 0
    severity:
      - color: Green
        from: 0
        to: 25
      - color: Orange
        from: 26
        to: 300
      - color: Red
        from: 51
        to: 300
    entities:
      - entity: sensor.informatique_salon_power

Ildar_Gabdullin · November 16, 2023, 11:07pm

There are 2 ways of using bar-card with many entities:

One bar-card contains one entity; the cards are grouped in a stack. You need to repeat same code for bar-card for each card.
One bar-card contains 3 entities. You need to define a card-wide code ONCE, an entity-specific code - for each entity (severities, target etc - if they are different).

1:
In yaml mode you may use yaml-anchors for a repeated code: define settings for the 1st bar-card , then use it with an anchor in the 2nd and 3rd cards.
In storage mode using yaml-anchors is not a good idea. Then you can really use the auto-entities (especially for a dynamic number of entities, in yaml-mode also): pass a list of 3 entities into a stack card using bar-card as “options”. Check docs and community for examples of auto-entities.

2:
If you have three or a defined number of entities - no need to use auto-entities. A short and elegant code is (as said before) “one bar-card for many entities”.
In case if a dynamic number of entities you should use auto-entities. Pass a dynamic list of entities to bar-card.

Franck_Code4Fun · November 17, 2023, 10:50pm

ok, thank you for these clarifications. I will use the second solution.

lips2000 · November 19, 2023, 5:12pm

Hoping to this is possible but I can not figure this out.

I would like to have the MAX: be a variable based on the entity sensor.load_power so that I get a scaled usage of each entity. There are 16 total so it would be helpful to see each bar as it relates to the total of the load.

I have included my code and screenshot for reference.

If someone smarter than me has a solution, thank you very much!

type: custom:auto-entities
card:
  type: custom:bar-card
  positions:
    name: inside
    value: inside
    indicator: 'off'
    icon: 'off'
  unit_of_measurement: W
  max: 1000
  severity:
    - color: '#7bc13c'
      from: 0
      to: 50
    - color: '#c1bb3c'
      from: 50
      to: 200
    - color: '#ff8100'
      from: 200
      to: 500
    - color: '#ff6700'
      from: 500
      to: 1000
    - color: '#ff4d00'
      from: 1000
      to: 5000
  height: 30px
  stack: vertical
  direction: right
  decimals: 0
entities: []
sort:
  method: state
  numeric: true
  reverse: true
filter:
  include:
    - entity_id: sensor.*_1min
    - entity_id: sensor.load_power
    - entity_id: sensor.bed_warmer_current_power
  exclude:
    - entity_id: sensor.home_123_1min
    - state: < 1
view_layout:
  position: sidebar

In this instant, it would be great if the MAX: for each entity was set to 863 to match the total load.

Ildar_Gabdullin · November 19, 2023, 5:54pm

Since you have plenty of sensors - it is good to use auto-entities.
You need a “max” option defined as a template. Only some cards support templates. Since you use auto-entities - define a list of sensors not by “include/exclude” - use a “template” option. And in this template will also define the “max”. Go to auto-entities thread for examples.

josephny · December 2, 2023, 8:55am

I just discovered bar-card but I see it is no longer supported.

Is there a successor/alternative anyone can suggest?

Thank you.

dimitri.landerloos · December 2, 2023, 2:24pm

Its not being updated. It still works and works quite well though.

ptgomes · December 13, 2023, 1:44pm

How can I order the entities by it’s value?