HA Price Timeline Card

A custom Home Assistant Lovelace card that visualizes hourly energy prices or 15-minutes energy prices on a timeline , circle or graph.
Prices are color-coded in relation to the daily average, so you can quickly spot cheap and expensive hours or slots.
Supports multiple languages and three different modes and dark&light theme or default theme colors of your current theme

---

🚀 Features

Inspired by Tibber, this custom card visualizes hourly energy prices on a timeline or circle.

• 📊 Timeline view , circle view or graph view of today's hourly or 15-minutes electricity prices
• 🎨 Color coding above/below daily average
• ⏰ Current time highlighted
• 🌍 Multi-language support
• ⚡ Simple configuration
• 🔄 toggle today / tomorrow

The card can highlight the cheapest times of the day if you want (you can activated it in configuration - see chapter parameters)

Timeline mode:

By default, the card shows a timeline view of today's electricity prices.
Each bar represents one hour of the day, colored turquoise if the price is below the daily average and orange if above. The current time is highlighted with a marker, while past hours are shown faded to provide a quick visual distinction between past and upcoming prices. A scale below the timeline shows the hours of the day. With the optional parameters (see below), you can enable either a time adjustment slider or a toggle switch to switch between today and tomorrow views.

• light

• dark

• with day toggler

• with day toggler and slider

• with time slider

Circle mode:

If view: circle is set, the card switches to a circle view.
The colored ring shows the current price in relation to the minimum and maximum of the day.
Inside the circle, the current price (in Cent/kWh) and its time range are displayed.

• light

• dark

• with time slider

• with day toggler

Graph mode:

If view: graph is set, the card switches to a graph view.
A maximum of two days is displayed (if corresponding data is available). Depending on the date/time and data availability, the graph will either show yesterday on the left and today on the right, or today on the left and tomorrow on the right. If data is available for only one day, the graph will display that single day accordingly. For each day, the minimum and maximum prices are visualized, along with the current time (“now”). The average price and the current hourly price are shown at the top. In graph mode you can only activate the slider option.

• today & tomorrow

• today & tomorrow with slider

Data not available:

When no data is available (or old data) - the no data screen will be shown.

---

⚙️ Installation

Dependencies

This card is using data from the EPEX Spot add-on:

• ha_epex_spot

You can choose between multiple sources:

• Awattar, SMARD.de, Tibber, ....

The price-timeline-card needs the average price and net price / price sensor.

Other integrations

You can also use other data sources/integrations when the data is available. The HA Epex Spot addon is then not required. Some integrations already tested successfully. For these we need additonal template sensors.

• Add new template sensor to your configuration.yaml
• Open your configuration.yaml
• Add the entry suitable for your integration (see following chapters) to your template section (if already exist, if not, add line template:- consider the correct indentation ):

The triggers are only examples and must be adapted accordingly if desired. Depending on the integration and API limits, a sensible update should be made here.

tibber integration (!optionally!)

Since the Tibber integration does not directly provide a sensor with hourly or quarter-hourly prices, but instead provides an action to get all prices, we can use this with a little extra effort. Following template sensor:

  - trigger:
      - trigger: time
        at: "14:00:00"
      - trigger: homeassistant
        event: start
    action:
      - action: tibber.get_prices
        data:
          end: "{{ (now() + timedelta(days=1)).strftime('%Y-%m-%d 23:59:59') }}"
        response_variable: tomorrow_price
    sensor:
      - name: tibber prices
        unique_id: tibber_prices
        state: >
              {% set key = tomorrow_price['prices'] | list | first %}
              {% set prices = tomorrow_price['prices'][key] | map(attribute='price') | list %}
              {{ (prices | sum / prices | count) | round(4) }}
        attributes:
          data: >
            {% set data = namespace(prices=[]) %}
            {% set key = tomorrow_price['prices'] | list | first %}
            {% for state in tomorrow_price['prices'][key] %}
              {% set data.prices = data.prices + [{'start_time': state.start_time, 'price_per_kwh': state.price}] %}
            {% endfor %}
            {{ data.prices }}

After that, the sensor sensor.tibber_prices exists (You can also rename this in the script if you like or if a entity already exists with this name)

After that you should have a sensor sensor.tibber_prices. The state of this sensor is the average price. The attributes of this sensor will also have a data array with all the 15-minutes prices for today and if available for tomorrow.

So you could simple use this card then with

price: sensor.tibber_prices
type: custom:price-timeline-card

nordpool integration (!optionally!)

You need to change config_entry, areas and currency according to your data:

- trigger:
      - platform: time_pattern
        minutes: "/10"
      - platform: homeassistant
        event: start

    action:
      - action: nordpool.get_prices_for_date
        data:
          config_entry: 01K6BFF0TVKT3M3RDYTQWVM38D
          date: "{{ now().date() }}"
          areas: SE3
          currency: SEK
        response_variable: today_price

      - action: nordpool.get_prices_for_date
        data:
          config_entry: 01K6BFF0TVKT3M3RDYTQWVM38D
          date: "{{ now().date() + timedelta(days=1) }}"
          areas: SE3
          currency: SEK
        response_variable: tomorrow_price

    sensor:
      - name: Combined Nordpool Prices
        unique_id: combined_nordpool_prices
        state: "{{ now().isoformat() }}"
        attributes:
          data: >
            {% set all = namespace(prices=[]) %}
            {% if today_price and today_price['SE3'] is defined %}
              {% for item in today_price['SE3'] %}
                {% set all.prices = all.prices + [{
                  'start_time': (item.start | as_datetime | as_local).isoformat(),
                  'end_time': (item.end | as_datetime | as_local).isoformat(),
                  'price_per_kwh': item.price / 1000
                }] %}
              {% endfor %}
            {% endif %}
            {% if tomorrow_price and tomorrow_price['SE3'] is defined %}
              {% for item in tomorrow_price['SE3'] %}
                {% set all.prices = all.prices + [{
                  'start_time': (item.start | as_datetime | as_local).isoformat(),
                  'end_time': (item.end | as_datetime | as_local).isoformat(),
                  'price_per_kwh': item.price / 1000
                }] %}
              {% endfor %}
            {% endif %}
            {{ all.prices | sort(attribute='start_time') }}

This will generate a sensor called sensor.combined_nordpool_prices. So you could simple use this card then with

price: sensor.combined_nordpool_prices
type: custom:price-timeline-card

HACS

Community Store

The card is available in HACS (Home Assistant Community Store).

Custom Repositories

1. Open HACS
2. Frontend → top right menu → Custom Repositories → Neisi/ha-price-timeline-card
3. Select type: Dashboard
4. Install

Manual Installation (without HACS)

1. Copy ha-price-timeline-card.js to /config/www/
2. Add it in Lovelace:

resources:
  - url: /local/ha-price-timeline-card.js
    type: module

🛠️ Parameters

Here are the available parameters for this Lovelace card.

🔒 Required Parameters

Name	Type	Description
price	string	Entity ID of the energy price sensor (must provide attributes.data with hourly or 15-minutes prices).

Note: The attributes.data of the price sensor must be an array of objects, each containing at least the following keys:

• start_time: ISO 8601 timestamp of the interval start
• price_per_kwh: price in €/kWh

Example:

data:
  - start_time: "2025-10-05T00:00:00.000+02:00"
    price_per_kwh: 0.209
  - start_time: "2025-10-05T00:15:00.000+02:00"
    price_per_kwh: 0.2087
  - start_time: "2025-10-05T00:30:00.000+02:00"

This format is automatically provided when using the Tibber script above or the ha_epex_spot addon.

Optional

Name	Type	Default	Description
average	string or number	undefined	A fix value for average (e.g. 0.25) you want to compare. Or you could pass a Entity ID of the sensor that provides the average price. If you don`t use this average parameter, the card calculates the average itself
view	string	timeline	Show timeline view (timeline) or circle view (circle) or graph view (graph).
theme	string	light	Visual theme. Possible values: light, dark, theme (uses Home Assistant theme variables).
slider	boolean	false	Show slider to change time for current day and view
day_switch	boolean	false	Show day toggler to change between today and tomorrow (for circle and timeline view only)
start_view	string	today	Determines which view is shown by default when the card loads. Possible values: today, tomorrow (for circle and timeline view only)
currency	object	{ name: "Cent", symbol: "¢" }	Defines how the unit for energy price is displayed. Use this to customize the currency subunit (e.g., "Cent", "Öre", ...). The name is shown as text label. The symbol field is currently optional and not yet displayed in all views, but it is recommended to set it since it may be used by future features or visualizations.
cheap_times	boolean	false	The card highlights the cheapest times of the day in graph and the phases are displayed in text form. Prices are analyzed per day, so each day is evaluated on its own. For each day, prices are normalized using a relative scale: relative price = (price - daily minimum) / (daily maximum - daily minimum). The lowest ~25% of all intervals for that day are considered cheap. Consecutive cheap intervals are grouped into longer time phases. Only future phases are shown, and only if they last at least 1 hour.
cheap_time_sources	array of strings	undefined	Optional and only available in yaml mode. If cheap_times: true is set, you can provide a list of sensors/entity IDs to define the cheap time periods manually instead of letting the card calculate them automatically. This is useful if you already use helpers from the ha_epex_spot_sensor add-on – you can pass those sensor IDs here to display their cheap periods directly.

---

Actions

Name	Type	Default	Description
tap_action	object	undefined	Optional action when tapping the card. See Home Assistant Actions. Supported actions: more-info, toggle, call-service, navigate, url, assist. Requires tap_target for entity-based actions.
tap_target	string	undefined	The entity ID that is the target of the tap_action. Required for entity-based actions (toggle, more-info, call-service). Not needed for navigation/url actions.

Examples:

Toggle an input boolean:

tap_action:
  action: toggle
tap_target: input_boolean.my_helper

Open more-info dialog:

tap_action:
  action: more-info
tap_target: sensor.tibber_prices

---

📘 Configuration

The card can be configured either with the code editor or with the visual editor.

Manual Configuration with Code Editor

timeline view and light theme (default):

type: custom:price-timeline-card
price: sensor.epex_price

circle view and dark theme:

type: custom:price-timeline-card
price: sensor.epex_price
theme: dark
view: circle

circle view with slider:

type: custom:price-timeline-card
price: sensor.tibber_prices
view: circle
slider: true

circle view with slider and custom currency:

type: custom:price-timeline-card
price: sensor.tibber_prices
view: circle
slider: true
currency:
  name: Öre
  symbol: öre

graph view with cheap time visualization:

type: custom:price-timeline-card
price: sensor.tibber_prices
view: graph
theme: dark
cheap_times: true

graph view with cheap time visualization with use of ha_epex_spot_sensors:

type: custom:price-timeline-card
price: sensor.tibber_prices
view: graph
cheap_times: true
cheap_time_sources:
  - binary_sensor.car_charge
  - binary_sensor.washing

Configuration with Visual Editor

The configuration can also be done using the built-in form editor (visual editor).