ApexCharts Card: producción solar, consumo y previsión en una gráfica

Descripción general

ApexCharts Card es la tarjeta de gráficas más completa para Home Assistant: líneas, áreas, columnas, varias escalas, agrupaciones por intervalo, colores por umbral y datos generados con JavaScript. Cuando la gráfica de historial se queda corta, esta es la siguiente parada.

Dos gráficas de ApexCharts en tema oscuro y claro: áreas superpuestas arriba y barras con una línea abajo — Áreas superpuestas y barras con línea, en tema oscuro y claro.

Ejemplos de los tipos de gráfica de ApexCharts: líneas, áreas y columnas — Tipos de serie: línea, área y columna.

Imágenes: apexcharts-card de RomRider, licencia MIT.

Requisitos

Sensores con historial. Para el ejemplo: sensor.produccion_solar, sensor.consumo_casa y, opcionalmente, Solcast.
HACS → «apexcharts-card» → Descargar y recarga el navegador.
Repositorio: RomRider/apexcharts-card.

Ideas de uso

Producción solar real frente a la previsión, para ver si Solcast acierta. Es el ejemplo de abajo.
Precio de la luz por horas (PVPC) en columnas, con colores según si es caro o barato.
Temperatura de todas las habitaciones en una gráfica, con la de consigna de la calefacción como línea discontinua.
Consumo diario de la última semana en columnas, agrupado por día con group_by.
Humedad del baño y extractor: el área de humedad y una franja que marque cuándo estuvo encendido el extractor.
Batería de la casa: SOC en una escala y potencia de carga y descarga en otra, con yaxis doble.
Marca de «ahora» en una gráfica de previsión para saber de un vistazo cuánto queda de día solar.

Ejemplo de uso

Producción, consumo y previsión de Solcast en el mismo día:

type: custom:apexcharts-card
header:
  show: true
  title: Energía de hoy
graph_span: 24h
span:
  start: day
yaxis:
  - min: 0
series:
  - entity: sensor.produccion_solar
    name: Producción
    type: area
    color: "#34D1BF"
    group_by:
      func: avg
      duration: 10min
  - entity: sensor.consumo_casa
    name: Consumo
    type: line
    color: "#D9467A"
    group_by:
      func: avg
      duration: 10min
  - entity: sensor.solcast_pv_forecast_forecast_today
    name: Previsión
    type: line
    color: "#8892A0"
    stroke_dash: 4
    data_generator: |
      return entity.attributes.detailedForecast.map((p) => {
        return [new Date(p.period_start).getTime(), p.pv_estimate * 1000];
      });

Cómo funciona:

graph_span: 24h con span.start: day muestra el día completo, de 0:00 a 24:00.
group_by hace la media cada 10 minutos: carga más rápido y se ve más limpia.
data_generator es JavaScript: convierte el atributo detailedForecast de Solcast (kW cada media hora) en puntos de la gráfica, en W.

Acción

Mediodía de un día despejado

Resultado

Área verde agua: producción real
Línea rosa: consumo
Línea discontinua: lo que Solcast preveía