I’m using the bar as part of a custom:stack-in-card and I’m manipulating it’s position within that card.
Here is my thermometer inspired temperature bar-card. 
I’m sure that the code could be cleaner, but I’m not a CSS mage. Btw it works fine.
entities:
- entity: sensor.shelly_homerseklet_halo
name: Emelet
- entity: sensor.heating_temperature
name: Földszint
- entity: sensor.shelly_homerseklet_pince
name: Pince
- entity: sensor.dark_sky_temperature
decimal: 1
max: 40
min: 10
severity:
- color: '#0080FF'
from: '0'
to: '19'
- color: '#40bf40'
from: '19'
to: '22'
- color: '#bf9540'
from: '22'
to: '25'
- color: '#c0392b'
from: '25'
to: '40'
direction: up
height: 150px
width: 24px
positions:
indicator: inside
icon: 'off'
style: |-
.card-header {
font-size: 18px;
}
bar-card-value, bar-card-name {
font-size: 12px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 1px 1px #0008;
white-space: nowrap;
}
bar-card-value {
margin-right: auto;
margin-left: 6px;
margin-bottom: auto;
margin-top: auto;
}
bar-card-name {
margin-right: auto;
margin-left: 0px;
margin-bottom: -130px;
margin-top: 130px;
right: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px;
border: 1px solid #DDD9;
}
stack: horizontal
title: Hőmérséklet
type: 'custom:bar-card'
14 Likes
Getting tons of this error after upgrading to the latest release:
2020-04-29 15:39:53 ERROR (MainThread) [frontend.js.latest.202004072] https://xxxxxxxx.duckdns.org/hacsfiles/bar-card/bar-card.js:5340:1 Uncaught SyntaxError: Unexpected token 'export'
2020-04-29 15:42:46 ERROR (MainThread) [frontend.js.latest.202004072] https://xxxxxxxx.duckdns.org/hacsfiles/bar-card/bar-card.js:5340:1 Uncaught SyntaxError: Unexpected token 'export'
2020-04-29 15:43:17 ERROR (MainThread) [frontend.js.latest.202004072] https://xxxxxxxx.duckdns.org/hacsfiles/bar-card/bar-card.js:5340:1 Uncaught SyntaxError: Unexpected token 'export'
And in the frontend i get ‘Custom element doesn’t exist: bar-card.’
How to fix?
Go to:
Configuration -> Lovelace Dashboards->Resources
and check if you have it like this:
I had the same problem and when I changed it from “JavaScript File (deprecated)” to “JavaScript Module”, it worked!
thx to @hajo62
1 Like
Yes i got it! Thanks
I had this set up fine before but I am guessing that I missed a change or something. What element do I have to change to have the right margin, match the left? The is in just a bit from the edge. I have the margins under bar-card-card both set for 7px. This used to work.
style: |-
bar-card-card {
margin-left: 7px;
margin-right: 7px;
margin-top: 10px;
}
bar-card-value {
font-size: 18px;
font-weight: bold;
margin-right: 215px;
}
bar-card-title {
font-size: 14px;
font-weight: bold;
margin-left: 20px;
}
Change bar-card-title to bar-card-name
Thanks. That actually fixed another issue. I was actually referring to this margin
You can use margin or padding right / left where you are using it no longer applies as I discovered. You will need to apply it the the bar-card-bar elements instead. I am not at my pc but background and another should get it done.
shouldn´t
style: |
bar-card-background {
color: var(--dwains-theme-names);
}
change the color of the background?
Depends on what background you’re trying to change, but that element only contains all the bar elements including the bar background. You probably either want bar-card-backgroundbar or ha-card.
1 Like
i´m an idiot. got it working with
style: |
ha-card {
background-color: var(--dwains-theme-primary);
}
This is my current setup still on bar-card version 2.0.2. It uses horizontal and vertical stacks.
Is there a way to have the same thing with ver 3.x?
Thank you.
Having the name and value like that requires some custom CSS, however you can get the layout very easily by putting all the entities in a single barcard and setting columns to 4.
After some fiddling around, I was able to get this:
Only two things missing now. To add a shadow to the sensor itself and to make the indicator arrow to be on the right side.
1 Like
mind sharing your code?
Ok here you go
- type: custom:bar-card
entities:
- entity: sensor.yatak_sicaklik_offset
name: Yatak Odası
- entity: sensor.banyo_sicaklik_offset
name: Banyo
- entity: sensor.hol_sicaklik_offset
name: Hol
- entity: sensor.kurutma_sicaklik_offset
name: Kurutma
- entity: sensor.calisma_sicaklik_offset
name: Çalışma
- entity: sensor.mutfak_sicaklik_offset
name: Mutfak
- entity: sensor.broadlink_sensor_temperature
name: Salon
- entity: sensor.camasir_sicaklik_offset
name: Çamaşır
- entity: sensor.kapi_onu_sicaklik_offset
name: Kapı Önü
- entity: sensor.dark_sky_temperature
name: Hava
- entity: sensor.balkon_dis_fark
name: Fark
min: -30
max: 30
severity:
- from: -30
to: -3
color: '#4095bf'
- from: -3
to: 3
color: '#40bf40'
- from: 3
to: 30
color: '#a93636'
- entity: sensor.balkon_sicaklik_offset
name: Balkon
- entity: sensor.purifier_aqi
name: Air Quality
min: 0
max: 300
severity:
- from: 0
to: 50
color: '#40bf40'
- from: 50
to: 150
color: '#4095bf'
- from: 150
to: 300
color: '#a93636'
- entity: sensor.dark_sky_humidity
name: Hava Nem
min: 0
max: 100
severity:
- from: 0
to: 40
color: '#a93636'
- from: 40
to: 85
color: '#ffbf40'
- from: 85
to: 100
color: '#40bf40'
- entity: sensor.holbme_air_quality
name: Hol Hava Kalite
min: 10000
max: 25000
severity:
- from: 10000
to: 15000
color: '#40bf40'
- from: 15000
to: 20000
color: '#ffbf40'
- from: 20000
to: 25000
color: '#a93636'
animations:
state: 'on'
positions:
icon: 'off'
title: inside
value: inside
style: |-
.contentbar-direction-right {
flex-direction: column;
}
.min-direction-right {
margin: 0px;
margin-bottom: -20px;
bottom: 10px;
}
bar-card-value {
margin: 0px;
font-size: 13px;
margin-left: auto;
margin-right: auto;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-name {
margin: 0px;
margin-top: 5px;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-max {
margin: 0px;
margin-left: auto;
margin-top: -20px;
top: 10px;
}
bar-card-divider {
display: none;
}
ha-card {
background-color: #383C45;
}
width: 100%
min: -10
max: 40
columns: 4
severity:
- from: -10
to: 16
color: '#4095bf'
- from: 16
to: 26
color: '#40bf40'
- from: 26
to: 40
color: '#a93636'
1 Like
I’m running HASSIO and everything was fine until a couple of updates ago. Since then all my bar-cards have stopped being displayed. Now I just get the big red box of doom saying;
Custom element doesn’t exist: bar-card
I’m using the custom:layout-card by Thomas Lovren. Bar cards displayed outside of this appear to work fine.
Any ideas what’s wrong & how to fix it?
Thanks.
Same here after updating to 0.109.1.
bars sitting inside a custom vertical-stack-in-card
1 Like
That’s how I am using it too!