A card that display today's electricity prices, as well as tomorrow's, but only when they are available.

[AkshayRao27]

Credit & Disclaimer

The vast majority, no the entire back-bone, of the code that I am using for this card is from @webwude's posts on the Home Assistant Community Thread for this Integration. I have implemented certain details just a tiny bit differently and am using very marginally different labels and a very marginally different card setup.

I'm not a programmer by stretch of the imagination, and this post is a mix of documentation & instruction, so that when I inevitablity forget how any of this works about 2½ weeks from now, future me has something to fall back on. If you need any kind of technical help with any of stuff below, I don't know how much I will be able to contribute ¯\_(ツ)_/¯

What this card does

• It displays the net electricity price (i.e. the price including surcharges & taxes) for the current hour in ct/kWh.
• It displays the hourly net electricity prices for the entire present day.
• On the graph for the present day, it labels the highest & lowest prices.
• On the graph for the present day, it displays the current time.
• On the graph for the present day, it colours bars differently based on the electricity price.
• Only from 5 pm onwards, it a second card with the hourly net electricity prices for the entire next day, but in grey to visually distinguish them from prices for the present day.

The Card(s)

12 am to 5 pm:

5 pm to 12 am:

Prerequisites

This card is based on ApexCharts, so if you don't already have that installed, get it via HACS.

For the auto-hide part to work, you need to create a binary sensor that changes state depending on when your provider publishes data for the following day's pricing. You can usually find this information on your provider's website. For example, smartENERGY.at, the provider I am using, say on their API page that they publish data for the following day from 17:00 onwards.

Once you know when the data is available, create a Template Sensor by going to Settings → Devices & Services → Helpers → Create Helper → Template → Template a sensor. Give it a reasonable name (I called mine "Display Tomorrow's Energy Graph (between 17:00 & 00:00)", with the entity name being sensor.display_tomorrow_s_energy_graph_between_17_00_00_00). In the State Template field, put in

{% set CurrentTime = now().hour + now().minute/60 + now().second/3600 %}
{{ 17 <= CurrentTime <= 23 }}
#Change the `17` to the hour at which your provider publishes data for the next day.

This code returns the current time as a decimal number, and returns true if that number is between 17 & 23. We use this value to ensure that the card with tomorrow's pricing is only displayed between 5 pm and 11 pm.

Code

In your dashboard, add a "Vertical Stack", select "Show Code Editor" and paste in:

type: vertical-stack
cards:
  - type: custom:apexcharts-card
    graph_span: 24h
    experimental:
      color_threshold: true
    header:
      title: Energy Price (Today)
      show: true
      show_states: true
    span:
      start: day
    now:
      show: true
      label: now
      color: darkblue
    series:
      - entity: sensor.epex_spot_data_net_price
        type: column
        extend_to: end
        unit: ct/kWh
        float_precision: 3
        yaxis_id: Price
        show:
          in_header: before_now
          extremas: true
          header_color_threshold: true
        color_threshold:
          - value: 2
            color: 00ed01
          - value: 4
            color: 3af901
          - value: 6
            color: 87fa00
          - value: 8
            color: cefb02
          - value: 10
            color: eeff00
          - value: 12
            color: ffde1a
          - value: 14
            color: ffa700
          - value: 16
            color: ff8d00
          - value: 18
            color: ff7400
          - value: 20
            color: ff4d00
          - value: 22
            color: ff4d00
          - value: 24
            color: ff0000
          - value: 26
            color: e60000
          - value: 28
            color: cc0000
          - value: 30
            color: b30000
          - value: 32
            color: '990000'
          - value: 34
            color: '800000'
          - value: 36
            color: '660000'
          - value: 38
            color: 4d0000
          - value: 40
            color: '330000'
        data_generator: |
          return entity.attributes.data.map((entry) => {
            return [new Date(entry.start_time), entry.price_ct_per_kwh];
          });
        group_by:
          func: avg
          duration: 1h
    yaxis:
      - id: Price
        decimals: 0
        apex_config:
          title:
            text: ct/kWh
          tickAmount: 5
    apex_config:
      legend:
        show: false
      tooltip:
        x:
          show: true
          format: HH:00 - HH:59
  - type: conditional
    conditions:
      - entity: sensor.display_tomorrow_s_energy_graph_between_17_00_00_00
        state: 'True'
    card:
      type: custom:apexcharts-card
      graph_span: 24h
      header:
        title: Energy Price (Tomorrow)
        show: true
        show_states: false
      span:
        start: day
        offset: +1day
      series:
        - entity: sensor.epex_spot_data_net_price
          type: column
          extend_to: end
          unit: ct/kWh
          float_precision: 3
          yaxis_id: Price
          group_by:
            func: avg
            duration: 1h
          color: grey
          show:
            in_header: before_now
            extremas: true
          data_generator: |
            return entity.attributes.data.map((entry) => {
              return [new Date(entry.start_time), entry.price_ct_per_kwh];
            });
      yaxis:
        - id: Price
          decimals: 0
          apex_config:
            title:
              text: ct/kWh
            tickAmount: 5
      apex_config:
        legend:
          show: false
        tooltip:
          x:
            show: true
            format: HH:00 - HH:59

Assumptions

This code assumes that:

• You are using smartENERGY.at as your provider, and that the entity name of the price you are trying to plot is sensor.epex_spot_data_net_price.
  • It is possible that when using a different provider, the sensor may be named differently. I have not tested this. If you are using a different provider, make sure that you are using the sensor everywhere that entity is mentioned.
• You want to view the prices in ct/kWh and your provider's API reports these values.
  • If you are using a different provider, make sure that the attributes of the sensor that you mention as the entity actually has the information you are trying to display, and update the entry in each data_generator accordingly. In my case, the part of sensor.epex_spot_data_net_price that displays an attribute called price_ct_per_kwh.

[lask456]

Hello, thank you very much for the detailed instructions! Would it be possible to adjust the color of the bars so that the highest value is red and the lowest value is green all other values should result in a color gradient between red and green? Currently, a separate color is hardcoded for each ct/kWh. I hope you understand what I mean.

[AkshayRao27]

I don't know if this is possible with Apex Charts, to be honest (and if it is, it is currently beyond my skill level). Apex Charts has some documentation about how colour gradients work, but after quickly browsing through that section, it does not look like you can tell it "max is red, min is green, mid is yellow, gib gradient thx".

The way it's written makes me think that you really need to tell it which values have which colours, and then it will try to do a gradient for the missing ones, but I could be wrong. It also looks like if you set, for example. red for 15 and green for 1, and the price range goes 65-85 because of an extremely unlikely and random event like a war starting which will obviously never happen then all your price bars will still be stuck at red instead of the 85 bar being red and the 65 one being green.

[killtux]

what has to be changed in the current code to work with the 3.0.0 update? (€ values instead of cents)

[AkshayRao27]

I haven't changed anything since I posted this and my cards are still working as intended (except for the annoying N/A price at midnight, but I'm not motivated enough to fix that right now lol

[killtux]

for me i had to change:
data_generator: |
return entity.attributes.data.map((entry) => {
return [new Date(entry.start_time), entry.price_ct_per_kwh];
});

to:
data_generator: |
return entity.attributes.data.map((entry) => {
return [new Date(entry.start_time), entry.price_per_kwh];
});

but also the color threshold has to be adjusted since its now 0,xx (€/kwh) instead of xx,0 (ct/kwh) and every bar is fully green.

[killtux]

ok this fixed it:

data_generator: |
  return entity.attributes.data.map((entry) => {
    return [new Date(entry.start_time), entry.price_per_kwh * 100];
  });

[Oinq]

I installed it yesterday for the first time, but the tomorrow prices aren't show. My understanding is that it should come in a second chart under the today's prices?