Electricity prices for today and tomorrow with Nordpool

[machadolucas]

I was previously using ApexCharts and getting annoyed by bugs and performance issues, so I have decided to migrate to Plotly and I am very satisfied with how these came out.

I use Nordpool integration to obtain hourly electricity prices for today and tomorrow. I have two entities: one with buying prices (in which I add distribution fees, etc) and another with selling prices (basically the nordpool price minus a margin I pay to sell). I also wanted to plot the forecasted solar production during those days (which I obtain with a REST template sensor and Solar Forecast API).

My requirements for the graph were:

• Different colors to highlight prices during the different periods
• Both graphs for today and tomorrow prices use the same scale in the y axis so they would be better comparable
• The ticks of the x axis should start at the beginning of the bar, so that the bar effectively represents the period from one tick to another

Obs: the solar forecast is barely visible in the image since it is now November in Finland 😅 . I wanted to keep the y scale fixed to the maximum capacity of my solar panels system.

The prices for the following day (tomorrow) are usually published only in the afternoon of the current day, so I have a visibility condition to hide tomorrow's card until the prices become available.

Here are the yamls:

Today's prices yaml

type: custom:plotly-graph
entities:
  - entity: sensor.nordpool_kwh_fi_eur_3_095_024
    name: Buying
    yaxis: y1
    type: bar
    filters:
      - fn: |-
          ({ meta }) => ({
            xs: meta.raw_today.map(({ start }) => new Date(start)),
            ys: meta.raw_today.map(({ value }, i) => value),
          })
    offset: |-
      $ex {
       let result = [];
       for (let x of xs) {
         result.push(0);
       }
       return result
      }
    text: |-
      $ex {
       let result = [];
       for (let y of ys) {
         result.push(y);
       }
       return result
      }
    fn: |-
      $ex {
       vars.current = states
       vars.max = Math.ceil(Math.max(20, ...meta.raw_today.map(o => o.value), ...(meta.raw_tomorrow || []).map(o => o.value))/ 10) * 10;
       vars.min = Math.floor(Math.min(0, ...meta.raw_today.map(o => o.value), ...(meta.raw_tomorrow || []).map(o => o.value))/ 10) * 10;
      }
    texttemplate: "%{y:.1f}"
    textangle: 270
    constraintext: none
    textfont:
      color: white
      weight: 400
      shadow: 0 0 5px black, 1px 1px 1px black
      size: 13
    marker:
      color: |-
        $ex { 
          let colors = [];
          for (let y of ys) {
            if (y < -25) {
                colors.push("rgb(0, 135, 189)");
            } else if (y < 0) {
                colors.push("rgb(28, 123, 173)");
            } else if (y < 4) {
                colors.push("rgb(56, 142, 60)");
            } else if (y < 8) {
                colors.push("rgb(105, 178, 63)");
            } else if (y < 12) {
                colors.push("rgb(255, 193, 7)");
            } else if (y < 16) {
                colors.push("rgb(255, 160, 0)");
            } else if (y < 20) {
                colors.push("rgb(255, 112, 67)");
            } else if (y < 25) {
                colors.push("rgb(255, 87, 34)");
            } else if (y < 30) {
                colors.push("rgb(211, 47, 47)");
            } else {
                colors.push("rgb(183, 28, 28)");
            }
          }
          return colors;
        }
  - entity: sensor.nordpool_kwh_fi_eur_production
    name: Selling
    yaxis: y1
    opacity: 0.85
    line:
      width: 2
      dash: solid
      color: lightgray
    filters:
      - fn: |-
          ({ meta }) => {
            let xs = meta.raw_today.map(({ start }) => new Date(start));
            let ys = meta.raw_today.map(({ value }) => value);
            xs.push(new Date(xs.at(-1)).setHours(xs.at(-1).getHours() + 1));
            ys.push(ys.at(-1));
            return { xs, ys };
          }
  - entity: sensor.forecast_solar_data
    name: Solar Forecast
    yaxis: y2
    opacity: 0.85
    line:
      width: 0
      color: gold
      shape: spline
    fill: tozeroy
    filters:
      - fn: |-
          ({ meta }) => {
            let xs = Object.keys(meta.watts).map((i) => new Date(i));
            let ys = Object.values(meta.watts).map((i) => i);
            return { xs, ys };
          }
  - entity: ""
    name: Now
    yaxis: y9
    opacity: 0.65
    line:
      width: 1
      dash: solid
      color: white
    x: $ex [Date.now(), Date.now()]
    "y":
      - 0
      - 1
layout:
  title:
    text: Prices today (c/kWh)
    xanchor: left
    yanchor: bottom
    x: 0.03
    "y": 0.95
  showlegend: false
  paper_bgcolor: rgba(0,0,0,0.3)
  plot_bgcolor: transparent
  xaxis:
    nticks: 8
    tickformat: "%-H:%M"
    showgrid: false
    fixedrange: true
    range: |-
      $ex {
        let start = new Date().setHours(0, 0, 0);
        return [start, start + 86400000 - 1];
      }
  yaxis:
    nticks: 10
    fixedrange: true
    range: $ex [vars.min, vars.max]
    griddash: dot
  yaxis2:
    visible: true
    tickformat: ~s
    fixedrange: true
    range: $ex [0, 7000]
  yaxis9:
    visible: false
    fixedrange: true
    autorangeoptions:
      clipmax: 1
      clipmin: 0
  barcornerradius: 3
  bargap: 0.02
  height: 240
  margin:
    t: 30
    r: 27
    l: 30
    b: 35
  annotations:
    - x: $ex { return new Date() - 1500000 }
      yref: paper
      "y": 1
      text: Now
      textangle: 270
      showarrow: false
      opacity: 0.65
      font:
        color: white
    - x: $ex { return new Date().setHours(23, 59, 59) }
      xanchor: right
      yref: paper
      yanchor: bottom
      "y": 1.07
      text: $ex 'Now '+parseFloat(vars.current[1].state).toFixed(1)+'c'
      showarrow: false
      opacity: 1
      font:
        color: white
        size: 13
        weight: 600
config:
  displayModeBar: false
  scrollZoom: false
  responsive: true

Tomorrow's prices yaml

type: custom:plotly-graph
entities:
  - entity: sensor.nordpool_kwh_fi_eur_3_095_024
    name: Buying
    yaxis: y1
    type: bar
    filters:
      - fn: |-
          ({ meta }) => ({
            xs: meta.raw_tomorrow.map(({ start }) => new Date(start)),
            ys: meta.raw_tomorrow.map(({ value }, i) => value),
          })
    offset: |-
      $ex {
       let result = [];
       for (let x of xs) {
         result.push(0);
       }
       return result
      }
    text: |-
      $ex {
       let result = [];
       for (let y of ys) {
         result.push(y);
       }
       return result
      }
    fn: |-
      $ex {
       vars.current = states
       vars.max = Math.ceil(Math.max(20, ...meta.raw_today.map(o => o.value), ...(meta.raw_tomorrow || []).map(o => o.value))/ 10) * 10;
       vars.min = Math.floor(Math.min(0, ...meta.raw_today.map(o => o.value), ...(meta.raw_tomorrow || []).map(o => o.value))/ 10) * 10;
      }
    texttemplate: "%{y:.1f}"
    textangle: 270
    constraintext: none
    textfont:
      color: white
      weight: 400
      shadow: 0 0 5px black, 1px 1px 1px black
      size: 13
    marker:
      color: |-
        $ex { 
          let colors = [];
          for (let y of ys) {
            if (y < -25) {
                colors.push("rgb(0, 135, 189)");
            } else if (y < 0) {
                colors.push("rgb(28, 123, 173)");
            } else if (y < 4) {
                colors.push("rgb(56, 142, 60)");
            } else if (y < 8) {
                colors.push("rgb(105, 178, 63)");
            } else if (y < 12) {
                colors.push("rgb(255, 193, 7)");
            } else if (y < 16) {
                colors.push("rgb(255, 160, 0)");
            } else if (y < 20) {
                colors.push("rgb(255, 112, 67)");
            } else if (y < 25) {
                colors.push("rgb(255, 87, 34)");
            } else if (y < 30) {
                colors.push("rgb(211, 47, 47)");
            } else {
                colors.push("rgb(183, 28, 28)");
            }
          }
          return colors;
        }
  - entity: sensor.nordpool_kwh_fi_eur_production
    name: Selling
    yaxis: y1
    opacity: 0.85
    line:
      width: 2
      dash: solid
      color: lightgray
    filters:
      - fn: |-
          ({ meta }) => {
            let xs = meta.raw_tomorrow.map(({ start }) => new Date(start));
            let ys = meta.raw_tomorrow.map(({ value }) => value);
            if(xs.lenght > 0){
              xs.push(new Date(xs.at(-1)).setHours(xs.at(-1).getHours() + 1));
              ys.push(ys.at(-1));
            }
            return { xs, ys };
          }
  - entity: sensor.forecast_solar_data
    name: Solar Forecast
    yaxis: y2
    opacity: 0.85
    line:
      width: 0
      color: gold
      shape: spline
    fill: tozeroy
    filters:
      - fn: |-
          ({ meta }) => {
            let xs = Object.keys(meta.watts).map((i) => new Date(i));
            let ys = Object.values(meta.watts).map((i) => i);
            return { xs, ys };
          }
layout:
  title:
    text: Prices tomorrow (c/kWh)
    xanchor: left
    yanchor: bottom
    x: 0.03
    "y": 0.95
  showlegend: false
  paper_bgcolor: rgba(0,0,0,0.3)
  plot_bgcolor: transparent
  xaxis:
    nticks: 8
    tickformat: "%-H:%M"
    showgrid: false
    fixedrange: true
    range: |-
      $ex {
        let start = new Date().setHours(0, 0, 0);
        return [start + 86400000, start + 172800000 - 1];
      }
  yaxis:
    nticks: 10
    fixedrange: true
    range: $ex [vars.min, vars.max]
    griddash: dot
  yaxis2:
    visible: true
    tickformat: ~s
    fixedrange: true
    range: $ex [0, 7000]
  yaxis9:
    visible: false
    fixedrange: true
    autorangeoptions:
      clipmax: 1
      clipmin: 0
  barcornerradius: 3
  bargap: 0.02
  height: 240
  margin:
    t: 30
    r: 27
    l: 30
    b: 35
config:
  displayModeBar: false
  scrollZoom: false
  responsive: true

For anyone wanting to integrate Solar Forecast in a graph and curious about how I integrated with the API, here's the REST template sensor configuration:

REST template sensor yaml

# Forecast.Solar API Data
- resource: https://api.forecast.solar/<TOKEN>/estimate/<COORDS>/<COORDS>/<SEE_DOCS>/<SEE_DOCS>/<SEE_DOCS>
  params:
    resolution: "30"
    damping: "0.7,0.8"
    horizon: "<SEE_DOCS>"
  method: GET
  scan_interval: 900 # Update every 15 minutes
  sensor:
    - name: Forecast Solar Data
      unique_id: forecast_solar_data
      availability: >
        {{ value_json.message.code == 0 and value_json.message.type == 'success' }}
      value_template: "{{ value_json.message.type }}"
      json_attributes_path: "$.result"
      json_attributes:
        - watts
        - watt_hours_period
        - watt_hours
        - watt_hours_day

[dbuezas]

Thanks for sharing!
I really like the way you've styled the plot, and the code is clean.

Let me only suggest using math instead of big ms numbers. It's easier to read if you ever need to tweak it:

• 86400000 => 1000*60*60*24
• 1500000 => 1000*60*25

[marc965]

Hi.
This is a very beautiful graph.
Unfortunately, I can't manage to generate this graph with my data. Is it even possible?"
Here ist my data structure:

{
	"data": [
		{
			"time": "2025-02-09T00:00:00.000+01:00",
			"total": 0.3726,
			"category": "high"
		},
		{
			"time": "2025-02-09T01:00:00.000+01:00",
			"total": 0.372,
			"category": "high"
		},
		{
			"time": "2025-02-09T02:00:00.000+01:00",
			"total": 0.3668,
			"category": "normal"
		},
		{
			"time": "2025-02-09T03:00:00.000+01:00",
			"total": 0.3539,
			"category": "normal"
		},
		{
			"time": "2025-02-09T04:00:00.000+01:00",
			"total": 0.3509,
			"category": "normal"
		},
		{
			"time": "2025-02-09T05:00:00.000+01:00",
			"total": 0.3511,
			"category": "normal"
		},
		{
			"time": "2025-02-09T06:00:00.000+01:00",
			"total": 0.3511,
			"category": "normal"
		},
		{
			"time": "2025-02-09T07:00:00.000+01:00",
			"total": 0.3707,
			"category": "normal"
		},
		{
			"time": "2025-02-09T08:00:00.000+01:00",
			"total": 0.3747,
			"category": "high"
		},
		{
			"time": "2025-02-09T09:00:00.000+01:00",
			"total": 0.3594,
			"category": "normal"
		},
		{
			"time": "2025-02-09T10:00:00.000+01:00",
			"total": 0.3485,
			"category": "normal"
		},
		{
			"time": "2025-02-09T11:00:00.000+01:00",
			"total": 0.3376,
			"category": "normal"
		},
		{
			"time": "2025-02-09T12:00:00.000+01:00",
			"total": 0.3294,
			"category": "low"
		},
		{
			"time": "2025-02-09T13:00:00.000+01:00",
			"total": 0.3256,
			"category": "low"
		},
		{
			"time": "2025-02-09T14:00:00.000+01:00",
			"total": 0.3427,
			"category": "normal"
		},
		{
			"time": "2025-02-09T15:00:00.000+01:00",
			"total": 0.3552,
			"category": "normal"
		},
		{
			"time": "2025-02-09T16:00:00.000+01:00",
			"total": 0.3808,
			"category": "high"
		},
		{
			"time": "2025-02-09T17:00:00.000+01:00",
			"total": 0.3887,
			"category": "high"
		},
		{
			"time": "2025-02-09T18:00:00.000+01:00",
			"total": 0.4046,
			"category": "high"
		},
		{
			"time": "2025-02-09T19:00:00.000+01:00",
			"total": 0.3977,
			"category": "high"
		},
		{
			"time": "2025-02-09T20:00:00.000+01:00",
			"total": 0.3912,
			"category": "high"
		},
		{
			"time": "2025-02-09T21:00:00.000+01:00",
			"total": 0.382,
			"category": "high"
		},
		{
			"time": "2025-02-09T22:00:00.000+01:00",
			"total": 0.3821,
			"category": "high"
		},
		{
			"time": "2025-02-09T23:00:00.000+01:00",
			"total": 0.3642,
			"category": "normal"
		}
	]
}

The data ist correctly transmitted to home assistant.

In home assistant the sensor state has the value of hour 00
and the attributes named data:
data:

• time: '2025-02-09T00:00:00.000+01:00'
  total: 0.3726
  category: high

any chance to manage this or can i change the data to achive this?

[machadolucas]

Hi,

It seems that it should work with your data as well. You just have different variable names, so for example here:

({ meta }) => ({
            xs: meta.raw_tomorrow.map(({ start }) => new Date(start)),
            ys: meta.raw_tomorrow.map(({ value }, i) => value),
          })

you should use something like:

({ meta }) => ({
            xs: meta.data.map(({ time }) => new Date(time)),
            ys: meta.data.map(({ total }, i) => total),
          })

If you can share your yaml configuration we can perhaps help better.

[marc965]

Hello.

Thank you for the reply.
Where did you get this information that allows you to create these formulations:

({ meta }) => ({
            xs: meta.data.map(({ time }) => new Date(time)),
            ys: meta.data.map(({ total }, i) => total),
          })

I have not found any suitable information in the Plotly Graph Card on GitHub "dbuezas/lovelace-plotly-graph-card". I want to be able to do that too.

Unfortunately, my project is somewhat more complex as previously described. I control my Victron inverters via Node-RED. Among other things, I also use the Tibber data from the last few weeks. These processed Tibber data are then combined with the solar forecasts, which then lead to certain automatic control commands.

I then prepare the Node-RED data separately for Home Assistant to then transfer them to Home Assistant via an "HTTP in" node.
This works quite well - here are the sources.

node-red function node:

let tibberData = flow.get('tibber.tibberData') || [];
let today = new Date().toISOString().split('T')[0];

let todayData = tibberData
    .filter(item => item.day === today)
    .map(item => ({
        time: item.time,
        total: item.total,
        category: item.category
    }));

msg.payload = {
    data: todayData
};

//msg.payload = todayData;

msg.headers = {
    'Content-Type': 'application/json'
};

return msg;

home assistant tibber.yaml:

sensor:
  - platform: rest
    name: Tibber Sensor
    resource: http://192.168.133.35:1880/tibber-sensor
    method: GET
    headers:
      Content-Type: application/json    
    json_attributes:
      - data
    value_template: '{{ value_json.data[0].total }}'
    scan_interval: 3600

The "state" is unimportant, the important things are the attributes, "total", "time" and "category" which should influence the color of the "bar graph".

I am now faced with the task of making this data accessible for the Plotly graph, which I am unable to do. This is partly due to the lack of documentation and I can't really interpret the numerous examples.

To be honest, I don't really want a ready-made solution presented here - I want to understand how it works and how I can do things more easily and efficiently.

Several small hints on how to achieve the graph would be very useful. If it's not a problem, we can stay in touch here and exchange ideas, if that's okay.

Thank you for the support and best regards from Germany
Marc

[machadolucas]

Sorry for the delay in replying.

I agree that the documentation is not that clear and I struggled myself a bit when doing the code for my graph.
The key here is that under the fn attribute of the plot configuration, we have a few variables available, as per the documentation here:

        - fn: |- # arbitrary function. Only the keys that are returned are replaced. Returning null or undefined, leaves the data unchanged (useful )
          ({xs, ys, vars, meta, states, statistics, hass}) => {
            # either statistics or states will be available, depending on if "statistics" are fetched or not
            # attributes will be available inside states only if an attribute is picked in the trace
            return {
              ys: states.map(state => +state?.attributes?.current_temperature - state?.attributes?.target_temperature + hass.states["sensor.temperature"].state,
              meta: { unit_of_measurement: "delta" }
            };
          },

So effectively I'm applying a function filter (fn inside filters) to overwrite/define what are my data points in axis x and y (return variables xs and ys), and for that I'm using the meta variable which according to this documentation returns the attributes of the sensor (which was specified in entities:entity:).

Since my sensor exposes a list of values in the attributes raw_today and raw_tomorrow like this:

- start: '2025-02-17T00:00:00+02:00' end: '2025-02-17T01:00:00+02:00' value: 16.594
- start: '2025-02-17T01:00:00+02:00' end: '2025-02-17T02:00:00+02:00' value: 19.003
- start: '2025-02-17T02:00:00+02:00' end: '2025-02-17T03:00:00+02:00' value: 17.571

Then my code just maps those values to xs and ys (xs has to be converted to type Date):

({ meta }) => ({
            xs: meta.raw_tomorrow.map(({ start }) => new Date(start)),
            ys: meta.raw_tomorrow.map(({ value }, i) => value),
          })