Collecting the hourly energy prices via a service in the EnergyZero or easyEnergy integration and using them in an ApexCharts card in your dashboard.

hourly_price_charts.yaml

- type: custom:apexcharts-card
  graph_span: 1d
  header:
    show: true
    title: Electriciteitsprijzen Vandaag (€/kwh)
  span:
    start: day
  now:
    show: true
    label: Now
  yaxis:
    - id: price
      decimals: 2
      apex_config:
        tickAmount: 5
  series:
    - entity: sensor.energy_prices_today
      name: Price this hour
      yaxis_id: price
      data_generator: |
        return entity.attributes.prices.map((entry) => {
          return [new Date(entry.timestamp).getTime(), entry.price];
        });
      type: column
      show:
        extremas: true
      opacity: 0.8
      float_precision: 2

price_template_sensors.yaml

---
# Today - Hourly energy prices
template:
  - trigger:
      - platform: homeassistant
        event: start
      - platform: time_pattern
        hours: "*"
    action:
      - service: energyzero.get_energy_prices
        response_variable: response
        data:
          config_entry: PUT_HERE_YOURS
          incl_vat: True
    sensor:
      - name: Energy prices - Today
        device_class: timestamp
        state: "{{ now() }}"
        attributes:
          prices: '{{ response.prices }}'

  # Tomorrow - Hourly energy prices
  - trigger:
      - platform: homeassistant
        event: start
      - platform: template
        value_template: "{{ now() > today_at('14:00') and now().minute == 0 }}"
    action:
      - service: energyzero.get_energy_prices
        response_variable: response
        data:
          config_entry: PUT_HERE_YOURS
          start: "{{ now() + timedelta(days=1) }}"
          end: "{{ now() + timedelta(days=1) }}"
          incl_vat: True
    sensor:
      - name: Energy prices - Tomorrow
        device_class: timestamp
        state: "{{ now() + timedelta(days=1) }}"
        attributes:
          prices: '{{ response.prices }}'

Would be great if these charts could be combined in one.

Why would you want to combine them? I don't really see an advantage/improvement in that.

Mainly cosmetics
Just one chart instead of 2
Learning how this needs to be done.

Hi
Not required anymore.
I managed to create it myself..

type: custom:apexcharts-card
graph_span: 48h
header:
  show: true
  title: Electriciteitsprijzen Vandaag en Morgen EnergyZero (€/kwh)
span:
  start: day
now:
  show: true
  label: Now
yaxis:
  - id: price
    decimals: 3
    min: -0.2
    max: 0.3
    apex_config:
      tickAmount: 10
series:
  - entity: sensor.energy_prices_today
    name: Price this hour
    yaxis_id: price
    data_generator: |
      return entity.attributes.prices.map((entry) => {
        return [new Date(entry.timestamp).getTime(), entry.price];
      });
    type: column
    show:
      extremas: true
    opacity: 0.8
    float_precision: 3
  - entity: sensor.energy_prices_tomorrow
    name: Price this hour
    yaxis_id: price
    data_generator: >-
      return entity.attributes.prices.map((entry) => { return [new
      Date(entry.timestamp).getTime(), entry.price]; });
    type: column
    show:
      extremas: true
    opacity: 0.8
    float_precision: 3

Thanks

Hi @klaasnicolaas I've run into some Yaml validation error when including the https://gist.github.com/klaasnicolaas/ccfd1cd3da62a13b3199ff378480bdbb#file-price_template_sensors-yaml file in configuration.yaml. As far as I can tell from looking at the official documentation, everything should work, but I keep getting the error "Invalid config for 'sensor' at configuration.yaml, line 12: required key 'platform' not provided"

The file is included on line 12, so that's logical, but I don't see how the platform key is missing, as it's clearly right there. I'm using your gist version almost literally (only the ID is filled in with my own). What could I be missing here?

I'll paste my file as-is anyway.

---
# Today - Hourly energy prices
template:
  - trigger:
      - platform: time_pattern
        minutes: 1
      - platform: homeassistant
        event: start
    action:
      - service: energyzero.get_energy_prices
        response_variable: response
        data:
          config_entry: 86c311fb791184eec3ee798d27997b3d
          incl_vat: True
    sensor:
      - name: Energy prices - Today
        device_class: timestamp
        state: "{{ now() }}"
        attributes:
          prices: '{{ response.prices }}'

  # Tomorrow - Hourly energy prices
  - trigger:
      - platform: time_pattern
        minutes: 1
      - platform: homeassistant
        event: start
    action:
      - service: energyzero.get_energy_prices
        response_variable: response
        data:
          config_entry: 86c311fb791184eec3ee798d27997b3d
          start: "{{ now() + timedelta(days=1) }}"
          end: "{{ now() + timedelta(days=1) }}"
          incl_vat: True
    sensor:
      - name: Energy prices - Tomorrow
        device_class: timestamp
        state: "{{ now() + timedelta(days=1) }}"
        attributes:
          prices: '{{ response.prices }}'

@MariellevDijk my suspicion is that you did something wrong with your include in configuration.yaml 🤷‍♂️

Hi @klaasnicolaas I've run into some Yaml validation error when including the https://gist.github.com/klaasnicolaas/ccfd1cd3da62a13b3199ff378480bdbb#file-price_template_sensors-yaml file in configuration.yaml. As far as I can tell from looking at the official documentation, everything should work, but I keep getting the error "Invalid config for 'sensor' at configuration.yaml, line 12: required key 'platform' not provided"

The file is included on line 12, so that's logical, but I don't see how the platform key is missing, as it's clearly right there. I'm using your gist version almost literally (only the ID is filled in with my own). What could I be missing here?

I'll paste my file as-is anyway.

---
# Today - Hourly energy prices
template:
  - trigger:
      - platform: time_pattern
        minutes: 1
      - platform: homeassistant
        event: start

For sure it makes no sense to request the prices each minute. EnergyZero made a statement that when exceeding more than 20 requests per hour they will block the requests.

@mhoeneveld The provided trigger:

- platform: time_pattern
  minutes: 1

Matches every hour one minute past whole.

See https://www.home-assistant.io/docs/automation/trigger/#time-pattern-trigger for more information.

Hello i am beginner with home assistant and wanted to get this work.
but keep getting stuck i have energyzero installed and apexchart.
when trying like to change sensor when copying a yaml from above.
it get stuck with Loading. i only changed a one yaml i copied from Maartendrenth.
but it says missng
apexcharts-card
Entity not available: sensor.energy_prices_today <---- where to get this and the one under i tried change it to
energyzero_today_energy_current_hour_price.

this one is also missing
Entity not available: sensor.energy_prices_tomorrow

type: custom:apexcharts-card
graph_span: 48h
header:
  show: true
  title: Electriciteitsprijzen Vandaag en Morgen EnergyZero (€/kwh)
span:
  start: day
now:
  show: true
  label: Now
yaxis:
  - id: price
    decimals: 3
    min: -0.2
    max: 0.3
    apex_config:
      tickAmount: 10
series:
  - entity: sensor.energy_prices_today
    name: Price this hour
    yaxis_id: price
    data_generator: |
      return entity.attributes.prices.map((entry) => {
        return [new Date(entry.timestamp).getTime(), entry.price];
      });
    type: column
    show:
      extremas: true
    opacity: 0.8
    float_precision: 3
  - entity: sensor.energy_prices_tomorrow
    name: Price this hour
    yaxis_id: price
    data_generator: >-
      return entity.attributes.prices.map((entry) => { return [new
      Date(entry.timestamp).getTime(), entry.price]; });
    type: column
    show:
      extremas: true
    opacity: 0.8
    float_precision: 3

@GofranAy You have only copied the apexcharts code, but without the template sensors (which retrieve the data) you will not get the correct entities.

./Klaas

@klaasnicolaas can you please share where to go add that entities i have anwb for energy.
I live in holland/dutch/netherland

@GofranAy in your configuration.yaml?

@klaasnicolaas i am sorry do you mean i need to add.
hourly_price_charts.yaml and price_template_sensors.yaml

So just copy paste in to configuration.yaml.

Only the YAML of price_template_sensors.yaml to get the 2 trigger template sensors in Home Assistant. You use the apex code snippet where you created your dashboard in YAML.

Side note: everyone uses YAML differently in their Home Assistant instance, without context (how you organize your config) it's impossible to give advice on where to put the code snippets and I assume that people know where you should place these.

Didn't work: defining the template sensor under Settings > Devices & Services > Helpers
Keep getting error "response is undefined"

What works: copy/pasting the template sensor code into configuration.yaml

@klaasnicolaas how did you manage to get the apexchart with the additional colors?
I tried to accomplish it, but as the prices fluctuate, how is one able to define a threshold for other colors?

@ikke-zelf For this you use the color_treshold from Apexcharts.

color_threshold:
      - value: 0
        color: "#186ddc"
      - value: 0.155
        color: "#04822e"
      - value: 0.2
        color: "#12A141"
      - value: 0.25
        color: "#79B92C"
      - value: 0.3
        color: "#C4D81D"
      - value: 0.35
        color: "#F3DC0C"
      - value: 0.4
        color: "red"
      - value: 0.5
        color: "magenta"

Thanks for sharing your example and code for the custom-sensor.

I have been playing around (after new BlackFriday gear) with my HA setup for connecting P1-meter etc. I was looking into a nice energy price overview (better then the energy supplier) and made this, see screenshot.

It's based on your initial code. I was struggling a lot with understanding the configuration.yaml and nested/included "things" and pointers to other files etc. When people have issues, let me know so I can post my triggers setup, to clarify how it works.

I managed to combine today and tomorrow (when sensor is triggered >14:00 hourly) into single apexchart, using only the sensor.energy_prices_tomorrow:

If you like it, feel free to grap the chart config.

YAML of the custom:apexcharts-card

I have added some comments to explain the choices. Note that I did not see the chart behaviour during most hours of the day, yet.

type: custom:apexcharts-card
header:
  show: true
  title: Electriciteitsprijs (€/kwh)

# I want to see just last 5 hours, not 2 complete days (24h).
# Otherwise you can simply set 2d, and set span.start to 'day'
graph_span: 30h
span:
  start: minute
  offset: "-5h"

now:
  show: true
  label: Nu

# For my version it's required to allow color_threshold functionality:
experimental:
  color_threshold: true

color_list:
  - gray

# The current market price is low, soft limit to 40 cent, but auto-grows when higher.
# Start at 0, but when price is negative, it should also auto-grow negative.
yaxis:
  - id: price
    decimals: 2
    min: ~0
    max: ~0.4
    apex_config:
      tickAmount: 5

# I have just used a single series, this 'energy_prices_tomorrow' keeps history, so after tomorrow you have the prices for today.
# This only works after at least 1 day has passed by.
series:
  - entity: sensor.energy_prices_tomorrow
    name: Uurprijs
    unit: €/kwh
    yaxis_id: price
    data_generator: |
      return entity.attributes.prices.map((entry) => {
        return [new Date(entry.timestamp).getTime(), entry.price];
      });
    type: column
    show:
      extremas: true
    opacity: 0.8
    float_precision: 2

    # I set some fixed thresholds...
    # with some colors I used from a website: https://www.color-hex.com/color-palette/1046801
    color_threshold:
      - value: -999
        color: "#1b9fd5"   # some blue color indicating we are negative, then green, yellow , orange red colouring.
      - value: 0
        color: "#1aa000"
      - value: 0.15
        color: "#8ada61"
      - value: 0.2
        color: "#f5ff57"
      - value: 0.4
        color: "#ff7400"
      - value: 0.6
        color: "#f24949"

Hi,

Thanks voor het delen van jullie codes, heeft me enorm geholpen een mooie Apexchart te ontwikkelen met de prijzen van vandaag en van morgen, met een enkele sensor. Met wat knip- en plakwerk en dank aan AI heb ik nu deze code ontwikkeld die mij de perfecte chart geeft zoals ik hem graag zie. Wellicht heeft iemand er iets aan:

type: custom:apexcharts-card
header:
  show: true
  title: Electriciteitsprijs (€/kwh)
graph_span: 30h
span:
  start: minute
  offset: "-3h"
now:
  show: true
  label: Nu
experimental:
  color_threshold: true
color_list:
  - grey
yaxis:
  - id: price
    decimals: 2
    min: ~0
    max: ~0.30
    apex_config:
      tickAmount: 8
series:
  - entity: sensor.energy_prices_today_and_tomorrow
    name: Uurprijs
    unit: €/kwh
    yaxis_id: price
    data_generator: |
      const parsePrices = (prices) => {
        if (typeof prices === 'string') {
          try {
            prices = JSON.parse(prices);
          } catch (e) {
            console.error("Error parsing prices:", e);
            return [];
          }
        }
        if (!Array.isArray(prices)) {
          console.error("Prices is not an array:", prices);
          return [];
        }
        return prices;
      };

      const parsePrice = (price) => {
        if (typeof price === 'object' && price !== null) {
          return parseFloat(price.price) || null;
        }
        return parseFloat(price) || null;
      };

      const today = parsePrices(entity.attributes.today_prices).map((price, index) => {
        const parsedPrice = parsePrice(price);
        return [
          new Date().setHours(index, 0, 0, 0),
          parsedPrice
        ];
      });
      
      const tomorrow = parsePrices(entity.attributes.tomorrow_prices).map((price, index) => {
        const parsedPrice = parsePrice(price);
        return [
          new Date(new Date().setDate(new Date().getDate() + 1)).setHours(index, 0, 0, 0),
          parsedPrice
        ];
      });
      
      return today.concat(tomorrow);
    type: column
    show:
      extremas: true
    opacity: 0.8
    float_precision: 2
    color_threshold:
      - value: -999
        color: "#1b9fd5"
      - value: 0
        color: "#1aa000"
      - value: 0.12
        color: "#8ada61"
      - value: 0.2
        color: "#f5ff57"
      - value: 0.4
        color: "#ff7400"
      - value: 0.6
        color: "#f24949"