Barchart bars are not the same width.

[zibous]

Installed: BAR-CARD Version 3.1.6

type: "custom:vertical-stack-in-card"
title: Verbrauch Erdgeschoss
cards:

  - type: "custom:bar-card"
    columns: 7
    stack: horizontal
    direction: up
    entities:
      - entity: sensor.verbrauch_buro
        name: 'Büroraum'
      - entity: sensor.verbrauch_waschraum
        name: 'Wirtschaftraum'
      - entity: sensor.verbrauch_heizung
        name: 'Heizungsraum'
      - entity: sensor.verbrauch_vorratsraum
        name: 'Vorratsraum'
      - entity: sensor.verbrauch_gang_eg
        name: 'Vorraum'
      - entity: sensor.verbrauch_garage
        name: 'Garage'
      - entity: sensor.verbrauch_zahlerschrank
        name: 'Zählerschrank'
    positions:
      icon: 'off'
      indicator: inside
      name: outside
    height: 240px
    max: 3500
    min: 0
    padding: 2px
    title_position: inside
    unit_of_measurement: Wh
    width: 100%
    line_width: 0.5
    title_style:
      font-size: 14px
      font-weight: 400
    value_style:
      font-size: 14px
      font-weight: 500
    severity:
      - color: "#CFD8DC"
        value: 0
      - color: "#4CAF50"
        value: 50
      - color: "#FDD835"
        value: 100
      - color: "#64DD17"
        value: 200
      - color: "#FFF176"
        value: 300
      - color: "#FFEB3B"
        value: 400
      - color: "#FF5722"
        value: 600
      - color: "#f44336"
        value: 800
      - color: "#f44336"
        value: 5000
    style: |
      ha-card {
        border-radius: 4px;
        transform: scale(0.95);
        background-size: 100% 100%;
        background-color: transparent;
      }
     ....

name: inside --> same barwidth but name text to long ?

QAD-Setting with CSS:

    style: |-
      ha-card {
        border-radius: 4px;
        transform: scale(0.95);
        background-size: 100% 100%;
        background-color: transparent;
      }
      bar-card-name {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
       width:100%;
       cursor: pointer ! important;
      }
      bar-card-card	{
        min-width:10%;  
      }

Do I have to change anything in the settings?

[Gluwc]

Your last CSS example actually works fine for me.

Just to be sure do you have card-mod installed and working correctly?

[zibous]

@Gluwc Yes it works, but only with CSS (and card-mod installed).

[Gluwc]

Ah right I thought you meant it didn't work at all. I'll see if I can do anything about this to make it default behavior, however I'm not sure since I might have to add a load of exceptions. Good to see you at least got it working for now.

[tomlut]

I think this is a similar issue. I was about to ask if the name field could be shortened to the chart width with ellipses (like the button card below) to prevent it pushing the bar charts off the card:

Rather than the bar chart assuming the width of the name.

[tomlut]

Would it help if we were able to specify the column width as a percentage of the card width rather than a number that seems to calculate an absolute width in px?