Sharing my APEX chart cards code

[msnapka]

With the help of an LLM i optimized the APEX cards:

---

Top left APEXcharts bar graph:

type: custom:apexcharts-card
header:
show: true
title: Electricity Prices
graph_span: 48h
span:
start: day
now:
show: true
label: Now
series:

• entity: sensor.epex_spot_at_price
  name: Electricity Price
  type: column
  float_precision: 3
  extend_to: end
  color_threshold:
  • value: 0
    color: "#186ddc"
  • value: 0.1
    color: "#04822e"
  • value: 0.15
    color: "#C4D81D"
  • value: 0.2
    color: red
  • value: 0.25
    color: magenta
    data_generator: >
    return entity.attributes.data.map(entry => [new
    Date(entry.start_time).getTime(), entry.price_per_kwh]);
    yaxis:
• decimals: 3
  max: 0.3
  min: -0.05
  apex_config:
  title:
  text: €/kWh
  tickAmount: 10
  labels:
  formatter: |
  EVAL:(value) => value.toFixed(3) + " €/kWh"
  apex_config:
  legend:
  show: false
  tooltip:
  theme: dark
  style:
  fontSize: 14px
  x:
  show: true
  format: dd MMM HH:00
  "y":
  formatter: |
  EVAL:(value) => value.toFixed(3) + " €/kWh"
  chart:
  background: transparent
  toolbar:
  show: false
  grid:
  show: true
  borderColor: rgba(255, 255, 255, 0.2)
  plotOptions:
  bar:
  borderRadius: 5
  experimental:
  color_threshold: true

---

Top right markdown dashboard card overview of 4 lowest prices:

{% set prices = state_attr('sensor.epex_spot_at_price', 'data') %}
{% if prices %}
{% set today = now().date() | string %}
{% set today_prices = prices | selectattr('start_time', 'search', today) | list %}

{% if today_prices %}
{% set sorted_prices = today_prices | sort(attribute='price_per_kwh') %}
{% set cheapest = sorted_prices[:4] %}

{% for entry in cheapest %}
{{ loop.index }}.nejlevnější hodina
⏳ {{ entry.start_time[11:16] }} - {{ entry.end_time[11:16] }}
💰 {{ (entry.price_per_kwh * 100) | round(2) }} ct/kWh

{% if not loop.last %}---{% endif %}
{% endfor %}
{% else %}
⚠️ No price data available for today.
{% endif %}

{% else %}
⚠️ No price data available.
{% endif %}

---

Bottom left APEXcharts line graph:

type: custom:apexcharts-card
header:
show: false
graph_span: 48h
span:
start: day
now:
show: true
label: Now
series:

• entity: sensor.epex_spot_at_price
  yaxis_id: uurprijs
  float_precision: 3
  type: line
  curve: stepline
  extend_to: end
  show:
  extremas: true
  data_generator: >
  return entity.attributes.data.map(entry => [new
  Date(entry.start_time).getTime(), entry.price_per_kwh]);
  color_threshold:
  • value: 0
    color: "#186ddc"
  • value: 0.1
    color: "#04822e"
  • value: 0.15
    color: "#C4D81D"
  • value: 0.2
    color: red
  • value: 0.3
    color: magenta
    yaxis:
• id: uurprijs
  decimals: 3
  min: -0.5
  max: 0.5
  apex_config:
  title:
  text: €/kWh
  tickAmount: 4
  labels:
  formatter: |
  EVAL:(value) => value.toFixed(3) + " €/kWh"
  apex_config:
  legend:
  show: false
  tooltip:
  x:
  show: true
  format: HH:00 - HH:59
  experimental:
  color_threshold: true

---

Bottom right APEXcharts line graph:

type: custom:apexcharts-card
header:
show: false
graph_span: 48h
span:
start: day
now:
show: true
label: Now
series:

• entity: sensor.epex_spot_at_price
  yaxis_id: uurprijs
  float_precision: 3
  type: line
  curve: stepline
  extend_to: end
  show:
  extremas: true
  data_generator: >
  return entity.attributes.data.map(entry => [new
  Date(entry.start_time).getTime(), entry.price_per_kwh]);
  color_threshold:
  • value: 0
    color: "#186ddc"
  • value: 0.1
    color: "#04822e"
  • value: 0.15
    color: "#C4D81D"
  • value: 0.2
    color: red
  • value: 0.3
    color: magenta
    yaxis:
• id: uurprijs
  decimals: 3
  apex_config:
  title:
  text: €/kWh
  tickAmount: 4
  labels:
  formatter: |
  EVAL:(value) => value.toFixed(3) + " €/kWh"
  apex_config:
  legend:
  show: false
  tooltip:
  x:
  show: true
  format: HH:00 - HH:59
  experimental:
  color_threshold: true

---

Sharing is caring, feel free to share and use.

And mainly, please, replace the slow shitty graphs with 4 data generators causing no data showing in dashboards, that are suggested in the docs.

Thanks

Marek