Octopus Agile prices from now

[borpin]

I've generated a simple Plotly chart to display Octopus Agile half-hour prices from now in Home Assistant. I use this chart on a wall tablet to let others know what the current and future prices will be for electricity.

This uses the event sensors from BottleapDave's Octopus HA integration (https://github.com/BottlecapDave/HomeAssistant-OctopusEnergy). You just need to add the right sensors to use it.

I've not solved the issue of shifting the bars so they center on the half-hour period rather than the centered on the start time (I tried xperiodalignment but it hasn't had the desired effect). Sorted with offset: 0

[edit - 8/1/25]
Added some annotations to the top.

type: custom:plotly-graph
title: Prices Today (p/kWh)
entities:
  - entity: ""
    name: Agile Prices
    filters:
      - fn: |-
          ({hass}) => ({
            xs: hass.states['event.octopus_energy_electricity_xxx_current_day_rates'].attributes.rates.map(({ start }) => (new Date(start))).concat(hass.states['event.octopus_energy_electricity_xxx_next_day_rates'].attributes.rates.map(({ start }) => (new Date(start)))),
            ys: hass.states['event.octopus_energy_electricity_xxx_current_day_rates'].attributes.rates.map(({ value_inc_vat }) => value_inc_vat*100).concat(hass.states['event.octopus_energy_electricity_xxx_next_day_rates'].attributes.rates.map(({ value_inc_vat }) => value_inc_vat*100)),
          })
    type: bar
    xperiodalignment: start
    offset: 0
    marker:
      color: |-
        $ex { 
          let colors = [];
          for (let y of ys) {
            if (y < 0) {
                colors.push("cyan");
            } else if (y < 20) {
                colors.push("green");
            } else if (y < 28) {
                colors.push("orange");
            } else if (y < 40) {
                colors.push("red");
            } else {
                colors.push("purple");
            }
          }
          return colors;
        }
hours_to_show: 18h
time_offset: 18h
refresh_interval: 1min
layout:
  showlegend: false
  xaxis:
    nticks: 8
    tickformat: "%-H:%M"
    showgrid: false
  height: 410
  margin:
    t: 60
  annotations:
    - text: |-
        $fn ({hass}) =>
          "<span style='font-size: 24px;'><span style='color: rgb(255, 155, 48'>"
          + Number(hass.states['sensor.octopus_min_rate'].state).toFixed(1) + "</span></span>kWh<br>"
          +  "</span><span style=''>Min</span><br>"
      xref: paper
      yref: paper
      xanchor: center
      yanchor: center
      x: 0.05
      "y": 1.2
      showarrow: false
    - text: |-
        $fn ({hass}) =>
          "<span style='font-size: 24px;'><span style='color: rgb(151, 90, 182)'>"
          + Number(hass.states['sensor.octopus_current_rate'].state).toFixed(1) + "</span></span>kWh<br>"
          +  "</span><span style=''>Current</span><br>"
      xref: paper
      yref: paper
      xanchor: center
      yanchor: center
      x: 0.5
      "y": 1.2
      showarrow: false
    - text: |-
        $fn ({hass}) =>
          "<span style='font-size: 24px;'><span style='color: rgb(84, 144, 194)'>"
          + Number(hass.states['sensor.octopus_next_rate'].state).toFixed(1) + "</span></span>kWh<br>"
          +  "</span><span style=''>Next</span><br>"
      xref: paper
      yref: paper
      xanchor: center
      yanchor: centre
      x: 0.9
      "y": 1.2
      showarrow: false

[deltamelter]

Start bars on hour or half hour by setting offset: 0
Any offset starts in relation to the left edge. No offset just centres the bar.
also note: Bar width is in milliseconds.

[deltamelter]

offset is also in milliseconds so you can start on the previous hour (if you needed to ;) ) or anywhere you want in relation to the x tick values
eg 15*60*1000 = bar starts 15mins after tick, negative would be 15 mins before the tick.

[dbuezas]

Trick: $ex 15*60*1000

[borpin]

Hi, thanks, but I can't see where to put either of those suggestions?

[deltamelter]

add offset: 0 to the entity, same indentation as type: or marker: etc