Juten Tag
Ich suche für meine Temperaturanzeige ein Balkendiagramm mit schöne Verlauf.
Mit schöne Verlauf meine ich fliessend und nicht von Grad zu Grad eine andere Farbe.
eigentlich so wie es Grafana auch kann. 
Welche Karte kann das?
Gruss Rush
Meinst du vielleicht so?
type: custom:mini-graph-card
entities:
- entity: sensor.temperatur
name: Temperatur
color: var(--green-color)
- entity: sensor.luftfeuchtigkeit
name: Feuchtigkeit
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
line_width: 6
font_size: 50
points_per_hour: 6
align_state: center
animate: true
show: null
name: Wohnzimmer
icon: false
state: false
legend: false
fill: fade
Hallo
Nein so etwas habe ich jetzt.
Ich meine ein Balken der je wärmer es wird grösser wird und die farbe wechselt.
A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistanttype: custom:mini-graph-card
entities:
- entity: sensor.power
group: false
hour24: true
line_width: 6
points_per_hour: 2
show:
graph: bar
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
name: Power
align_state: center
color_thresholds:
- value: 150
color: green
- value: 50
color: blue
- value: 20
color: red
color_thresholds_transition: hard
Dann hätte ich noch einen, Apex ist auch gut
Danke!
Die Karte kenne ich auch schon. 
Schwer zu beschreiben oder ich bin nicht fähig dazu darum ein Bild.
Der Balken liegen und ein softer Verlauf wie hier…
Einen horizontalen Balken suche ich schon länger. Leider bisher nicht fündig geworden.
Vielleicht sowas ?
Das nutze ich nicht mehr. Hatte ich mal irgendwo gesehen.
type: custom:bubble-card
name: Hausspeicher
card_type: button
button_type: state
entity: sensor.solarbank_3_e2700_pro_ladestand
tap_action:
action: navigate
navigation_path: "#batterie"
modules:
- progress_bar
progress_bar:
progress_color: green
min_value: 0
max_value: 100
conditional_colors:
condition_color_1: orange
condition_color_2: green
condition_1:
- condition: numeric_state
entity_id: sensor.solarbank_3_e2700_pro_ladestand
below: 55
condition_2:
- condition: numeric_state
entity_id: sensor.solarbank_3_e2700_pro_ladestand
above: 55
custom_entity: sensor.solarbank_3_e2700_pro_ladestand
sub_button:
- entity: sensor.acpowerzubatterie_energy_power
show_icon: false
state_background: false
show_background: false
show_state: true
name: ""
show_name: true
visibility:
- condition: state
entity: switch.acpowerzubatterie
state: "on"
- entity: sensor.batterie_ausgang
show_state: true
show_icon: false
state_background: false
show_background: false
visibility:
- condition: state
entity: switch.acpowervonbatterie
state: "on"
name: ""
show_name: true
- entity: sensor.batterie_eingang
show_icon: false
show_name: false
show_state: true
state_background: false
show_background: false
styles: |
.bubble-button-card-container {
background: linear-gradient(to right, darkorange 15%, orange 25%, yellow 50%, green 100%);
/* opacity: 0.5 !important; */
clip-path: inset(0 calc(100% - var(--bar-percent)) 0 0);
border-radius: 10px !important;
border-radius: 3px !important;
}
.bubble-name-container {
color: #3a3a3a !important;
}
.bubble-sub-button-name-container {
color: #3a3a3a !important;
}
.bubble-action-enabled {
border-radius: 3px !important;
margin: 0 5px 0 0 !important;
}
.bubble-button-background {
/* background: linear-gradient(to right, var(--orange-color), #cd101000); */
}
.bubble-state {
font-size: 14px;
font-weight: bold;
opacity: 1;
}
.bubble-icon {
color: #3a3a3a !important;
}
.type-custom-bubble-card{
margin: 0px 0px 0px 0px !important;
}
rows: "0.75"
force_icon: false
Würde es schon geben, aber nicht mit einem “schönen” Verlauf.
Z.b die Bubble Card als Slider, oder waterfall-history-card kann auch so etwas.
entities:
- entity: sensor.disk_use
name: Festplatte
max: 198
positions:
minmax: inside
entity_row: true
type: custom:bar-card
severity:
- color: "#d32f2f"
from: 130
to: 197
- color: "#ffa000"
from: 100
to: 135
- color: "#388e3c"
from: 0
to: 100
card_mod:
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%);
}
so in der Richtung.
Danke euch.
Mal schauen wie ich das umsetzten kann.
Das geht wirklich in die Richtung die ich möchte.
Nun wenn ich das Icon ausblende (Celsius weg), füllt der Balken der linke frei gewordene Platz nicht aus.
Gibt es für das auch noch einen Code 
Teil mal deinen code
> name: Wohnzimmer
> max: 40
> min: 10
> entity_row: false
> icon: true
> type: custom:bar-card
> severity:
>
> * color: “#452fd3”
> from: 0
> to: 19.9
> * color: “#68d32f”
> from: 20
> to: 27
> * color: “#388e3c”
> from: 27.1
> to: 40
> entities:
> * entity: sensor.wohnzimmer_temperatur
> card_mod:
> style: |
> bar-card-backgroundbar {
> background: linear-gradient(to right, blue 0.1%, green 49.75%, orange 62.5%, red 75%);
> }
> bar-card-currentbar {
> background: linear-gradient(to right, blue 0.1%, green 49.75%, orange 62.5%, red 75%);
> clip-path: polygon(0 0, var(–bar-percent) 0, var(–bar-percent) 100%, 0 100%);
> }
by HarryP: Code-/Logzeilen formatiert (bitte immer in </> einbinden)
s.a.: (Neues Update & Features - Hier in der Community 🫶)
Hallo Zusammen,
sich stehe auf dem Schlauch und finde auch nichts in der Doku bei der custom:bar-card…
Ich möchte gerne den Ecken-Radius der eigentliche „Bar“ anpassen.
Bei die @peacemaker89 ist R0
und bei dir @Rush4 ist der Radius deutlich größer
Könntet ihr mir einen Tipp geben?
Das macht man im style mit border-radius
card_mod:
style: |
bar-card-backgroundbar {
border-radius: 8px;
}
bar-card-currentbar {
border-radius:
Hier mein Ausschnitt.