ApexCharts card - A highly customizable graph card

Thank you so much for this card.

Here one example for spain electricity price (PVPC)

imagen

card config:
type: custom:apexcharts-card
header:
  show: true
  title: Precio vs Consumo
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
  chart:
    height: 250px
all_series_config:
  type: area
  curve: stepline
  float_precision: 3
  stroke_width: 2
  opacity: 0.2
  extend_to_end: false
  show:
    extremas: true
now:
  show: true
yaxis:
  - id: first
    min: ~0
    max: '|+0.05|'
    show: false
  - id: second
    opposite: true
    min: 0
    max: 2.4
    show: false
graph_span: 1d
span:
  start: day
series:
  - entity: sensor.pvpc
    name: Precio
    yaxis_id: first
  - entity: sensor.energy_hourly
    name: Consumo
    yaxis_id: second
  - entity: sensor.pvpc
    name: Precio
    stroke_width: 1
    opacity: 0.05
    yaxis_id: first
    extend_to_end: true
    show:
      extremas: false
      in_header: false
    data_generator: |
      let res = [];
      let current_hour = new Date().getHours(); 
      for (const [key, value] of Object.entries(entity.attributes)) {
          if (key.endsWith("h"))
          {
              let hour = key.slice(6,-1);
              let date = new Date(moment({ "hour":hour, "minute":0 }));
              if (date.getHours() >= current_hour)
              {
                res.push([date.getTime(), value]);
              }
          }      
      }
      return res;
3 Likes