Displaying prices in Apexchart card - MTrab/stromligning GitHub Wiki

Prerequisites

It is required to have the custom apexchart card installed before this will work! Follow the instructions here: https://github.com/RomRider/apexcharts-card

Option 1 - Static colors

Lovelace card

Edit your dashboard and select Add Card. Scroll to the bottom and select Manual

Replace the code in the window with this:

type: custom:apexcharts-card
experimental:
  color_threshold: true
apex_config:
  chart:
    height: 200px
graph_span: 47h
span:
  end: day
  offset: +23h
header:
  show: true
  title: Elpriser pr. time (DKK/kWh)
  show_states: true
  colorize_states: true
now:
  label: Nu
  show: true
  color: black
yaxis:
  - min: "|-0.5|"
    max: "|+0.5|"
    apex_config:
      tickAmount: 4
      forceNiceScale: false
      decimalsInFloat: 1
series:
  - name: Låst pris
    entity: sensor.stromligning_current_price_vat
    type: column
    color_threshold:
      - value: 0
        color: green
      - value: 2.5
        color: orange
      - value: 3.5
        color: red
      - value: 5
        color: darkred
    extend_to: false
    show:
      in_header: false
      legend_value: false
    data_generator: >
      var data = entity.attributes.prices.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.prices[index]["price"]];
      });


      if (hass.states['binary_sensor.stromligning_tomorrow_available_vat'].state
      == "on") {
        var tomorrow = hass.states['binary_sensor.stromligning_tomorrow_available_vat'].attributes.prices.map((start, index) => {
          return [new Date(start["start"]).getTime(), hass.states['binary_sensor.stromligning_tomorrow_available_vat'].attributes.prices[index]["price"]];
        });
        data = data.concat(tomorrow)
      }


      return data

Option 2 - Dynamic background colors

This option requires config-template-card to be installed along side Apex chart.

Template sensors

Create these sensors:

sensor:
  - platform: statistics
    name: Average energy price last 30d mean
    entity_id: sensor.stromligning_current_price_vat
    state_characteristic: mean
    sampling_size: 760
    max_age:
      days: 30

  - platform: statistics
    name: Energy price last 30d (std)
    entity_id: sensor.stromligning_current_price_vat
    state_characteristic: standard_deviation
    sampling_size: 512
    max_age:
      days: 30

  - platform: statistics
    name: Energy price last 30d (mean)
    entity_id: sensor.stromligning_current_price_vat
    state_characteristic: mean
    sampling_size: 512
    max_age:
      days: 30

template:
  - sensor:
      - name: Historic Energy Price Percentiles
        unique_id: historic_energy_price_percentiles
        state: OK
        attributes:
          25th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * -0.63 }}"
          50th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 0 }}"
          75th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 0.57 }}"
          90th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 1.29 }}"
          95th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 1.65 }}"
          99th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 2.33 }}"
          100th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 3.9 }}"

Lovelace card

Edit your dashboard and select Add Card. Scroll to the bottom and select Manual

Replace the code in the window with this:

type: custom:config-template-card
entities:
  - sensor.historic_energy_price_percentiles
config_templates: default
variables:
  max_price_threshold: |
    () => {
      return states['sensor.historic_energy_price_percentiles'].attributes['99th']
    }
  get_yellow_threshold: |
    () => {
      return states['sensor.historic_energy_price_percentiles'].attributes['25th']
    }
  get_orange_threshold: |
    () => {
      return states['sensor.historic_energy_price_percentiles'].attributes['75th']
    }
  get_darkred_threshold: |
    () => {
      return states['sensor.historic_energy_price_percentiles'].attributes['95th']
    }
card:
  type: custom:apexcharts-card
  apex_config:
    chart:
      height: 200px
    annotations:
      position: back
      yaxis:
        - "y": 0
          y2: ${ get_yellow_threshold() }
          fillColor: rgb(76, 175, 80)
          strokeDashArray: 0
          borderColor: "#00000000"
        - "y": ${ get_yellow_threshold() }
          y2: ${ get_orange_threshold() }
          fillColor: rgb(255, 193, 7)
          strokeDashArray: 0
          borderColor: "#00000000"
        - "y": ${ get_orange_threshold() }
          y2: ${ get_darkred_threshold() }
          fillColor: rgb(255, 152, 0)
          strokeDashArray: 0
          borderColor: "#00000000"
        - "y": ${ get_darkred_threshold() }
          y2: ${ max_price_threshold() }
          fillColor: rgb(244, 67, 54)
          strokeDashArray: 0
          borderColor: "#00000000"
        - "y": ${ max_price_threshold() }
          y2: 100
          fillColor: rgb(255, 0, 0)
          strokeDashArray: 0
          borderColor: "#00000000"
  graph_span: 47h
  span:
    end: day
    offset: +23h
  header:
    show: true
    title: Elpriser pr. time (DKK/kWh)
    show_states: true
    colorize_states: true
  now:
    label: Nu
    show: true
    color: black
  yaxis:
    - min: "|-0.5|"
      max: "|+0.5|"
      apex_config:
        tickAmount: 4
        forceNiceScale: false
        decimalsInFloat: 1
  series:
    - name: Låst pris
      entity: sensor.stromligning_current_price_vat
      stroke_width: 3
      float_precision: 2
      type: line
      extend_to: false
      show:
        in_header: false
        legend_value: false
      data_generator: >
        var data = entity.attributes.prices.map((start, index) => {
          return [new Date(start["start"]).getTime(), entity.attributes.prices[index]["price"]];
        });


        if
        (hass.states['binary_sensor.stromligning_tomorrow_available_vat'].state
        == "on") {
          var tomorrow = hass.states['binary_sensor.stromligning_tomorrow_available_vat'].attributes.prices.map((start, index) => {
            return [new Date(start["start"]).getTime(), hass.states['binary_sensor.stromligning_tomorrow_available_vat'].attributes.prices[index]["price"]];
          });
          data = data.concat(tomorrow)
        }


        return data