Home Assistant – Electrisity Price Graph

I wanted to see my Power Consumption tougher with Electricity Price on a nice graphical representation.

For that I used Apxechard-Card: https://github.com/RomRider/apexcharts-card

I downloaded some code from Home Assistant forum and Facebook group and added some tweaks of my own.

The result is as shown on the image and the code can be downloaded here:

 

type: custom:apexcharts-card
header:
  show: true
  title: Power Usage Hourly vs Electricity Price
  show_states: true
  colorize_states: true
now:
  show: true
  label: Now
graph_span: 74h
span:
  start: day
  offset: '-25h'
apex_config:
  xaxis:
    labels:
      format: ddd.MM
  chart:
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: true
        zoomin: false
        zoomout: false
        pan: false
        reset: true
  tooltip:
    fixed:
      enabled: true
      position: bottomLeft
yaxis:
  - id: first
    apex_config:
      min: 0
      opposite: true
      forceNiceScale: true
      decimalsInFloat: 2
      labels:
        show: true
  - id: second
    apex_config:
      opposite: false
      forceNiceScale: true
      decimalsInFloat: 1
      labels:
        show: true
all_series_config:
  stroke_width: 4
series:
  - entity: sensor.nordpool_kwh_oslo_nok_3_10_025
    yaxis_id: first
    name: Yesterday
    type: area
    curve: stepline
    extend_to_end: false
    float_precision: 2
    stroke_width: 2
    opacity: 0.05
    show:
      in_header: false
      legend_value: false
      in_chart: true
    color: '#00FF00'
  - entity: sensor.nordpool_kwh_oslo_nok_3_10_025
    yaxis_id: first
    name: Today
    type: area
    curve: stepline
    extend_to_end: false
    float_precision: 2
    stroke_width: 2
    opacity: 0.5
    show:
      in_header: false
      legend_value: false
    color: '#0080FF'
    data_generator: |
      return entity.attributes.raw_today.map((p) => {
        return [new Date(p.start), p.value];
      });
  - entity: sensor.nordpool_kwh_oslo_nok_3_10_025
    yaxis_id: first
    name: Tomorrow
    type: area
    curve: stepline
    extend_to_end: false
    float_precision: 2
    stroke_width: 2
    opacity: 0.2
    show:
      in_header: false
      legend_value: false
      extremas: true
    color: '#FF7F00'
    data_generator: |
      return entity.attributes.raw_tomorrow.map((p) => {
        return [new Date(p.start), p.value];
      });
  - entity: sensor.accumulated_consumption_current_house
    yaxis_id: second
    name: Power Usage
    type: line
    extend_to_end: false
    float_precision: 2
    stroke_width: 2
    opacity: 1
    color: '#FF0000'
    show:
      in_header: true
      legend_value: false
    group_by:
      func: max
  - entity: sensor.nordpool_kwh_oslo_nok_3_10_025
    yaxis_id: first
    name: Price Now
    type: area
    curve: stepline
    extend_to_end: false
    float_precision: 2
    stroke_width: 0
    opacity: 0.1
    show:
      in_header: true
      legend_value: false
      in_chart: true
    color: '#0080FF'

Below is a Light Mode screenshot from my phone.

Leave a Reply

Your email address will not be published.

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.