Showing future electricity pricing timeseries in a chart in lovelace (or any other timeseries, like forecasts)

[WiiiLDFARMER]

Want to show your dynamic pricing from Tibber in your lovelace, but annoyed by the lack of documentation on how to set it up? Continue reading to get the card as below!

Approach

We will use the tibber.get_prices response data to fill an attribute of templated sensor, which we in turn will use to fill an apex chart on lovelace.

Prerequisites

• Tibber integration set up
• apexcharts-card set up

This method works generally with other timeseries, but in that case you have to take care of saving the timeseries to a state attribute yourself.

Step by step instructions

Checking the Tibber action

• From developer tools, run tibber.get_prices and check if you get a proper response. Note down the name of the adres you are interested in, e.g. Amstel 1A. If this does not work, check your Tibber integration.

Templating the sensor

• In your configuration.yaml, add the following (adjust Amstel 1 A to your address):

template:
  - trigger:
      - platform: time_pattern
        hours: "/1"
    action:
      - service: tibber.get_prices
        response_variable: price_data
    sensor:
      - name: "Energy prices hourly"
        state: "{{states('sensor.electricity_price_Amstel_1_A')}}" # optional, can also be set to 0
        attributes:
          prices: >
            {% set list_of_dicts = price_data['prices']['Amstel 1 A'] %}
            {{ list_of_dicts | map(attribute='price') | list | tojson }}
          datetimes: >
            {% set list_of_dicts = price_data['prices']['Amstel 1 A'] %}
            {% set start_times = list_of_dicts | map(attribute='start_time') | list %}
            {{ start_times | map('as_timestamp') | map('timestamp_custom', '%Y-%m-%dT%H:%M:%S%z') | list | tojson }}
          levels: >
            {% set list_of_dicts = price_data['prices']['Amstel 1 A'] %}
            {{ list_of_dicts | map(attribute='level') | list | tojson }} 

• And then reload you TEMPLATE ENTITIES in the Developer tools
• Check if the state attributes are shown as lists in the developer tools, example below:
  
  

Making the card

• In lovelace, add an apexcharts card
• In the card config, add the following:

type: custom:apexcharts-card
graph_span: 24h
update_interval: 15m
span:
  start: day
now:
  show: true
  label: Nu
  color: gray
header:
  title: Electriciteitskosten
  standard_format: true
show:
  loading: true
yaxis:
  - decimals: 2
    apex_config:
      tickAmount: 4
series:
  - entity: sensor.energy_prices_hourly
    stroke_width: 3
    name: Electriciteitsprijs
    color: '#00A1FF'
    curve: stepline
    float_precision: 2
    unit: €
    data_generator: >
      // Extract datetime and prices attributes from the entity

      const datetimes = entity.attributes.datetimes; // This is the list of
      datetime strings

      const prices = entity.attributes.prices; // This is the list of price
      values


      // Combine datetime and prices into a series of [timestamp, price] pairs

      return datetimes.map((dt, index) => {
        return [new Date(dt).getTime(), parseFloat(prices[index])];
      });
    show:
      in_header: true
      legend_value: true
      extremas: true

• That’s it, you now should have the card as in the image:
  

Enjoy!