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 }}'

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"

Thanks all for sharing.

@mkrkpr could you also share your yaml config to store the data for today and tomorrrow combined in energy_prices_today_and_tomorrow? That seems to missing on this page.

I also tried the chart example from @abij and earlier versions from this page but that for me shows only the data for tomorrow.

I figured out that it's just a matter of changing the start property for the energyzero.get_energy_prices service.

Changing that from start: "{{ now() + timedelta(days=1) }}" to start: "{{ now() }}"

configuration.yml

  - 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: 066b09b87ec5973cea250deee361f308
          start: "{{ now() }}"
          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 }}'

Hoi,
I am new to all of this, I set up a P1monitor years ago and I would update it every time I got a new provider. Now I am about to go to a dynamic contract and I want to charge the car when the sun shines... or whn its cheapest. What I cant figure out is where the pricing is coming from I mean... When i goto the website is hase vastly different prices compaaired to what i see in HA. What am I doing wrong?

These prices are way higher that what I see in Home Assistant....
https://consumenten.energyzero.nl/actuele-tarieven

@BeekeeperNL The 'Toon all-in prijs' toggle is about taxes being included. In HA only VAT is optionally taken into account, not the energy tax.

Hey Klaas, I noticed the precision of the template sensor to grab today's and tomorrow's dynamic prices has a precision of 2 digits. All other providers, I've found, use 3 digit precision. Leading to some rounding issues. Is there any way to raise the precision for the template sensor? I've given it a unique_id and fiddled with the template and checked the python code, but I'm lost :)

Here's an example of how this looks, all other providers are on the same line :

The problem is that if you request the energy data including VAT, you get prices with 2 decimal places, if you request the prices excluding VAT, you get them with 5 decimal places.

./Klaas

That's perfect, thanks!

Thx for this awesom chart...

But how do set this chart up if I want to include costs and taxes per kWh?
I have allready setup 2 extra sensors, one for additional costs and one for taxes.

Please advise...

You can add the costs and taxes in the data_generator:

      data_generator: >
        return entity.attributes.prices.map((entry) => [new
        Date(entry.timestamp), ((entry.price*1.21) + 0.15674)]);      

My taxes are 21% and the added costs (€0.15674) already have the tax included, otherwise you'd configure it like this : (entry.price+costs)*taxes.

Thx man! My taxes ar also 21% but I pay a little less at ANWB Energy!

But this worked for me...