Graph showing future price for the energy of the next 24 hour

[Bach-Danielsson]

I´m looking for a card to add to my dashboard on my home assistant showing the price level for the energy of the next 24 hours.

[nelgi]

To get such a card (blue area = today, green line = tomorrow):

install: https://github.com/RomRider/apexcharts-card and use the following code - adjust to your needs (replace 'sensor.nordpool_kwh_ee_eur_3_095_02' with your sensor):

header:
  show: true
  title: nordpool
  show_states: true
  colorize_states: true
all_series_config:
  float_precision: 2
now:
  show: true
  color: '#ff0000'
graph_span: 24h
span:
  start: day
series:
  - entity: sensor.nordpool_kwh_ee_eur_3_095_02
    attribute: current_price
    color: red
    name: Current price
    group_by:
      duration: 1d
    show:
      in_chart: false
      legend_value: false
  - entity: sensor.nordpool_kwh_ee_eur_3_095_02
    type: area
    curve: stepline
    name: Today
    show:
      in_header: false
      extremas: true
      legend_value: false
    stroke_width: 0
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
  - entity: sensor.nordpool_kwh_ee_eur_3_095_02
    attribute: min
    color: green
    name: Today min
    group_by:
      duration: 1d
    show:
      in_chart: false
      legend_value: false
  - entity: sensor.nordpool_kwh_ee_eur_3_095_02
    attribute: max
    type: column
    color: violet
    name: Today max
    group_by:
      duration: 1d
    show:
      in_chart: false
      legend_value: false
  - entity: sensor.nordpool_kwh_ee_eur_3_095_02
    attribute: average
    color: white
    name: Today avg
    group_by:
      duration: 1d
    show:
      in_chart: false
      legend_value: false
  - entity: sensor.nordpool_kwh_ee_eur_3_095_02
    name: Tomorrow
    offset: +24h
    show:
      in_header: false
      extremas: true
      legend_value: false
    stroke_width: 2
    data_generator: |
      return entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
      });
yaxis:
  - min: 0
    decimals: 2

[raudraido]

Nice, I like to use columns instead of area and reduced area to 23h

[nelgi]

the problem with columns - they are visually 30 minutes too early, eg check 0:00, 3:00, 6:00, 9:00, ...etc on the screenshot, especially problematic is the dashed red line, that shows current time and gives visually wrong information, area does not have this issue.

Nice, I like to use columns instead of area and reduced area to 23h

[McNobody]

the problem with columns - they are visually 30 minutes too early, eg check 0:00, 3:00, 6:00, 9:00, ...etc on the screenshot, especially problematic is the dashed red line, that shows current time and gives visually wrong information, area does not have this issue.

This could be helped with manual offset to the start times. Add 1800000 ms to the start times and columns will be at the right place.

Only minus is tooltips has time 30 minutes too late, but it does not bother me.

The apexchart-card has also offset attribute for the entity. This could be used to move columns too, but then min/max extermas are not in the middle of the columns...

[dront242]

Great card! Thanks! BUT, for me it sets yaxis max based on yesterday's max value. Is that just the first day or how do I prevent this from happening?

[McNobody]

Great card! Thanks! BUT, for me it sets yaxis max based on yesterday's max value. Is that just the first day or how do I prevent this from happening?

Interesting note. I did not notice yaxis max different earlier, because it was so close every day.

Now I have auto yaxis for the today's columns and tomorrow's line.

The trick is have two yaxis. One for the columns and line. The second for the labels and hide it.

type: custom:apexcharts-card
apex_config:
  chart:
    height: auto
header:
  show: true
  title: Nord Pool
  show_states: true
  colorize_states: true
all_series_config:
  float_precision: 2
now:
  show: true
  color: '#ff0000'
graph_span: 24h
span:
  start: day
series:
  - entity: sensor.nordpool_kwh_fi_eur_2_10_024
    type: column
    color: rgb(140, 140, 210)
    name: Tänään
    show:
      in_header: false
      extremas: true
      legend_value: false
    stroke_width: 1
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime()+1800000, entity.attributes.raw_today[index]["value"]];
      });
    yaxis_id: default
  - entity: sensor.nordpool_kwh_fi_eur_2_10_024
    name: Huomenna
    color: rgb(46,204,113)
    offset: +24h
    show:
      in_header: false
      extremas: false
      legend_value: false
    stroke_width: 2
    data_generator: |
      return entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
      });
    yaxis_id: default
  - entity: sensor.nordpool_kwh_fi_eur_2_10_024
    attribute: current_price
    color: cyan
    name: Kuluva tunti
    group_by:
      duration: 1d
    show:
      in_chart: false
      legend_value: false
    yaxis_id: labels
  - entity: sensor.nordpool_kwh_fi_eur_2_10_024
    attribute: min
    color: lightgreen
    name: Tänään min.
    group_by:
      duration: 1d
    show:
      in_chart: false
      legend_value: false
    yaxis_id: labels
  - entity: sensor.nordpool_kwh_fi_eur_2_10_024
    attribute: max
    color: red
    name: Tänään maks.
    group_by:
      duration: 1d
    show:
      in_chart: false
      legend_value: false
    yaxis_id: labels
  - entity: sensor.nordpool_kwh_fi_eur_2_10_024
    attribute: average
    color: gray
    name: Tänään keskim.
    group_by:
      duration: 1d
    show:
      in_chart: false
      legend_value: false
    yaxis_id: labels
yaxis:
  - id: default
    min: 0
    decimals: 2
  - id: labels
    show: false

[heebo1974]

Nice one! Would it be possible to have 2 different charts ? I would like to have tomorrow chart like today chart with columns and all those min, max and average infos.

[McNobody]

Nice one! Would it be possible to have 2 different charts ? I would like to have tomorrow chart like today chart with columns and all those min, max and average infos.

Of course. You have use some extra code for the data_generators or helper or addiotional template sensor etc. to get min/max/avg for tomorrow. nordpool integration provides those only for today. And then add two custom:apexcharts-cards, one for today's columns and another for tomorrow's columns.

For example I have notification automation to send me notif when tomorrow's Nordpool data is available. It also prints the min. and max. times and prices for me.

alias: Nord Pool notifikaatio
description: >-
  Lähetetään notifikaatio siitä, että huomisen pörssisähkön hinnat on
  päivitetty.
trigger:
  - platform: state
    entity_id:
      - sensor.nordpool_kwh_fi_eur_2_10_024
    attribute: tomorrow_valid
    enabled: true
    to: true
condition: []
action:
  - service: notify.mobile_app_jukan_s21
    data:
      title: Pörssisähkö päivittynyt
      message: >-
        Huomisen pörssisähkön hinnat ovat päivittyneet\n
        {%- set min = state_attr('sensor.nordpool_kwh_fi_eur_2_10_024','raw_tomorrow')|min(attribute='value') -%}
        {%- set max = state_attr('sensor.nordpool_kwh_fi_eur_2_10_024','raw_tomorrow')|max(attribute='value') -%}
        Min: {{ min['start'].strftime("%H:00 ") + '%5.2f'|format(min['value']) + ' c/kWh, ' }}
        Max: {{ max['start'].strftime("%H:00 ") + '%5.2f'|format(max['value']) + 'c/kWh\n' }}
      data:
        clickAction: /nord-pool/
mode: single

And the notification looks like this: