ApexChart for Octopus Agile (etc) prices

Share your Projects! Dashboards & Frontend
1

Continuing the discussion from ApexCharts card - A highly customizable graph card:

Went through the linked thread looking for this. Eventually found the contribution above

Thought I’d break it out so it might be more easily found for others. This is for a chart for Octopus Agile (etc) prices using the Octopus HACS integration.

Thanks @ppmt for the pointer. It was tricky to find! I adjusted it to suit what I wanted, but that is easy enough with this card!

type: custom:apexcharts-card
experimental:
  color_threshold: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Today's Agile Rates
stacked: false
graph_span: 24h
span:
  start: hour
now:
  show: true
  label: Now
  color: black
yaxis:
  - min: ~0
    max: ~35
    decimals: 1
series:
  - entity: sensor.octopus_energy_electricity_xxxxxxxxxx_current_rate
    type: column
    name: price
    color: gray
    opacity: 1
    stroke_width: 0
    unit: p/Kw
    show:
      in_header: false
      legend_value: false
      header_color_threshold: true
    color_threshold:
      - value: -100
        color: cyan
      - value: 0
        color: green
      - value: 20
        color: orange
      - value: 30
        color: red
      - value: 40
        color: purple
    data_generator: |
      return entity.attributes.all_rates.map((entry) => {
         return [new Date(entry.valid_from), entry.value_inc_vat];
       });

image

2 Likes
2

Of course that will break with the updated Agile integration which changes where the values are stored.
If you use the newly updated code, duplicate the series filed with the next day rates and then you will get the full 24 hours.

type: custom:apexcharts-card
header:
  show: true
  title: Electricity Future Price
series:
  - entity: >-
      event.octopus_energy_electricity_METER_current_day_rates
    offset: '-15m'
    type: column
    unit: p/kWh
    float_precision: 3
    stroke_width: -4
    extend_to: end
    name: Import Price
    color_threshold:
      - value: 0
        color: lightblue
      - value: 0.1
        color: lightgreen
      - value: 10
        color: green
      - value: 25
        color: yellow
      - value: 40
        color: red
      - value: 60
        color: pink
    data_generator: |
      return entity.attributes.rates.map((entry) => {
        return [new Date(entry.start), entry.value_inc_vat*100];
      });
  - entity: event.octopus_energy_electricity_METER_next_day_rates
    offset: '-15m'
    type: column
    unit: p/kWh
    float_precision: 3
    stroke_width: -4
    extend_to: end
    name: Import Price
    color_threshold:
      - value: 0
        color: lightblue
      - value: 0.1
        color: lightgreen
      - value: 10
        color: green
      - value: 25
        color: yellow
      - value: 40
        color: red
      - value: 60
        color: pink
    data_generator: |
      return entity.attributes.rates.map((entry) => {
        return [new Date(entry.start), entry.value_inc_vat*100];
      });      
now:
  show: true
  label: now
yaxis:
  - min: ~0
    max: ~40
    decimals: 0
    align_to: 5
graph_span: 14h
span:
  start: minute
  offset: '-1h'
experimental:
  color_threshold: true
3

Yes, I noticed that so didn’t upgrade the integration!

I’ll update the post once I update both which will be easier with that, so many thanks :smile:

4

Im new to HA but am struggling with both examples above.

In example 1 I swap out the sensor for my own but the graph doesnt get populated.

In example 2 I see that its using events but I dont have an event set up, could you perhaps elaborate on how to do this?

1 Like
5

This is great - saved me loads of effort!

Worth noting, that all the duplication can be removed by use of “all_series_config”:

type: custom:apexcharts-card
header:
  show: true
  title: Electricity Future Price
series:
  - entity: >-
      event.octopus_energy_electricity_METER_current_day_rates
  - entity: event.octopus_energy_electricity_METER_next_day_rates
now:
  show: true
  label: now
yaxis:
  - min: ~0
    max: ~40
    decimals: 0
    align_to: 5
graph_span: 14h
span:
  start: minute
  offset: '-1h'
experimental:
  color_threshold: true
all_series_config:
  offset: '-15m'
  type: column
  unit: p/kWh
  float_precision: 3
  stroke_width: -4
  extend_to: end
  name: Import Price
  color_threshold:
    - value: 0
      color: lightblue
    - value: 0.1
      color: lightgreen
    - value: 10
      color: green
    - value: 15
      color: yellow
    - value: 20
      color: red
    - value: 50
      color: pink
  data_generator: |
    return entity.attributes.rates.map((entry) => {
      return [new Date(entry.start), entry.value_inc_vat*100];
    });
1 Like
6

Just s note to say, updating to the latest Apex Card has broken the color_threshold. Not sure why :frowning: