Ich verzweifle gerade daran, die monatlichen Regenmengen mit der ApexCharts Karte darzustellen. Ich habe dazu 12 input Helfer von Januar bis Dezember erstellt. Dieser werden über eine Automation gefüllt. Leider gelingt mir die Darstellung nicht korrekt. Kann mir jemand unter die Arme greifen?
type: custom:apexcharts-card
graph_span: 1y
header:
show: true
title: Monatliche Regenmengen 2025
show_states: true
colorize_states: true
series:
- entity: input_number.regenmenge_januar
name: Januar
type: column
color: "#007bff"
- entity: input_number.regenmenge_februar
name: Februar
type: column
color: "#0056b3"
- entity: input_number.regenmenge_marz
name: März
type: column
color: "#004085"
- entity: input_number.regenmenge_april
name: April
type: column
color: "#00264d"
- entity: input_number.regenmenge_mai
name: Mai
type: column
color: "#3399ff"
- entity: input_number.regenmenge_juni
name: Juni
type: column
color: "#66b3ff"
- entity: input_number.regenmenge_juli
name: Juli
type: column
color: "#99ccff"
- entity: input_number.regenmenge_august
name: August
type: column
color: "#cce6ff"
- entity: input_number.regenmenge_september
name: September
type: column
color: "#e6f2ff"
- entity: input_number.regenmenge_oktober
name: Oktober
type: column
color: "#b3d9ff"
- entity: input_number.regenmenge_november
name: November
type: column
color: "#80bfff"
- entity: input_number.regenmenge_dezember
name: Dezember
type: column
color: "#4da6ff"
apex_config:
xaxis:
categories:
- Januar
- Februar
- März
- April
- Mai
- Juni
- Juli
- August
- September
- Oktober
- November
- Dezember
labels:
rotate: -45
Hi, versuche es doch mal mit der ploty-graph-card. Da kann man schöne Balkendiagramme mit erstellen. Ich hatte dazu auch mal ein Tutorial geschrieben.
Bei der apex-chart-card bin ich irgendwie an meine Grenzen gestoßen mit dem styling und nutze daher nun die ploty-graph-card. Das Problem sind die series bei apex-card. Das wird dann in einer serie zusammengefasst und daher hast du nur so dünne Balken in der Ansicht.
Du kannst ja mal das hier testen, aber weiß nicht ob es wirklich klappt. Auf jeden Fall kann die apex-card auch js verarbeiten. Ein Versuch ist es Wert, ansonsten würde ich gleich mit der ploty-card weitermachen.
type: custom:apexcharts-card
header:
show: true
title: Monatliche Regenmengen
graph_span: 12months
span:
start: year
series:
- entity: sun.sun # irgendeine Entität (wird nicht angezeigt)
name: Regenmenge
type: column
data_generator: |
const ids = [
'input_number.regenmenge_januar',
'input_number.regenmenge_februar',
'input_number.regenmenge_marz',
'input_number.regenmenge_april',
'input_number.regenmenge_mai',
'input_number.regenmenge_juni',
'input_number.regenmenge_juli',
'input_number.regenmenge_august',
'input_number.regenmenge_september',
'input_number.regenmenge_oktober',
'input_number.regenmenge_november',
'input_number.regenmenge_dezember'
];
const year = 2025;
const out = [];
for (let i = 0; i < 12; i++) {
const st = hass.states[ids[i]]?.state;
const y = Number(st);
const x = new Date(year, i, 1).getTime(); // 1. des Monats
out.push({ x, y: isNaN(y) ? null : y });
}
return out;
apex_config:
xaxis:
type: datetime
labels:
datetimeFormatter:
month: 'MMM'
plotOptions:
bar:
columnWidth: '70%'
