[Question] From center possible?

[SergioRius]

Is it possible by any means to get a "from center" measuring bar, configuration or css? I mean having the 0 on the center and -1000 at the left and 1000 at the right. For displaying import-export grid or battery power, like in this mockup:

[tiagof]

Hi.

This would be great if supported. I've made it worked through css tweaking, but it's ugly.

Below my scenario where the 4th and 5th bars/entities go from -X <--> 0 <--> X

type: custom:bar-card
entities:
  - entity: sensor.battery_state_of_capacity
    name: Battery Charge
    [...]
  - entity: sensor.current_house_power
    name: Usage
    [...]
  - entity: sensor.input_power
    name: Production
    [...]
  - entity: sensor.charge_discharge_power
    icon: mdi:battery-charging
    name: Bateria Usage
    color: green
    min: -2500
    max: 2500
    positions:
      indicator: 'off'
      name: 'off'
      value: outside
    severity:
      - from: -2500
        to: 0
        color: orangered
      - from: 1
        to: 2500
        color: lime
  - entity: sensor.grid_active_power
    name: Grid
    icon: mdi:transmission-tower-import
    min: -3500
    max: 3500
    positions:
      indicator: 'off'
      name: 'off'
      value: outside
    severity:
      - from: -9999
        to: 0
        color: orangered
        icon: mdi:transmission-tower-export
      - from: 1
        to: 9999
        color: Plum
direction: right
height: 0.8rem
stack: vertical
style: >
  bar-card-row:nth-child(4) bar-card-backgroundbar,
  bar-card-row:nth-child(5) bar-card-backgroundbar {
    background: linear-gradient(
      to var(--bar-direction),
      var(--bar-color) 50%,
      transparent 50%
    );
  }
  bar-card-row:nth-child(4) bar-card-currentbar,
  bar-card-row:nth-child(5) bar-card-currentbar {
    background: linear-gradient(
      to var(--bar-direction),
      var(--primary-background-color) min(50%, var(--bar-percent)),
      var(--bar-color) min(50%, var(--bar-percent)),
      var(--bar-color) var(--bar-percent),
      transparent var(--bar-percent)
    )
  }

[hawkeye100]

Yes please to this feature.

I have thought of a few ideas to solve this but a centre config would be simplest (from user pov). OR a config for the target colour (unless I have missed this)

Se this post if it helps.

Thanks - the bar card is very useful.

[PulsarFX]

Hi.

This would be great if supported. I've made it worked through css tweaking, but it's ugly.

Below my scenario where the 4th and 5th bars/entities go from -X <--> 0 <--> X

I've modified it a little bit, to not have a black background, but the default bar background. For this, just remove bar-card-backgroundbar and modify bar-card-currentbar Here is a minimal example:

type: custom:bar-card
entities:
  - entity: sensor.niro_torque_power
    name: Power
    unit_of_measurement: ' '
    color: SlateGrey
    min: -150
    max: 150
    decimal: 1
    severity:
      - color: var(--label-badge-green)
        from: -200
        to: -1
      - color: var(--label-badge-yellow)
        from: 1
        to: 200
target: 1
direction: right
positions:
  icon: 'off'
  indicator: 'off'
  name: inside
card_mod:
  style: |-
    bar-card-card {
      border: 1px solid DarkSlateGray;
      border-radius: var(--ha-card-border-radius); 
    }

    bar-card-currentbar{
      background: linear-gradient(
        to var(--bar-direction),
        var(--bar-background-color) min(50%, var(--bar-percent)),
        var(--bar-color) min(50%, var(--bar-percent)),
        var(--bar-color) var(--bar-percent),
        transparent var(--bar-percent)
      )
    }

Examples with dark and light skin: