Have a time beam view of Tibber "Price level" attribute

Configuration Frontend
1

Hi, I’m reading for quite a while now but i have one simple question which I seemingly can not answer by searching this wonderful community by myself.
So maybe I just need a small bump to the right direction, I don’t know.
All I want to achieve is a small card on which I can see the value of the “Price level” attribute from my Tibber integration in a time beam format.
So a simple time beam for the last 24 hours of the states very_high to very_low and all states in between in different colors.
There is such a time beam view of the “sun” as a suggestions, which got me to think about an equivalent for the “Price level” attribute. But all I found out is that it won’t work with attributes and that I have to use Apexcharts. Which is no problem after all, but I simply can not find a simple guide on how to use Apexcharts as a “time beam” and not as a graph since graphs don’t work with string type values i think.
Bildschirmfoto vom 2023-11-23 09-56-34

2

I have no idea what you mean by this:

Can you show an example?

You can drag and drop pictures into your post.

3

I’ve added the card of the “Sun state” which I took as a inspiration.

4

Ah! Ok, just the core history strip chart.

For that you will have to create a template sensor from your attribute. Something like this:

configuration.yaml

template:
  - sensor:
      - name: Price Level
        state: "{{ state_attr('sensor.your_sensor_here','your_attribute_here') }}"

Do a config check and restart if it passes.

You can then add this sensor to a history graph.

5

Ah, okay. I remember that I read something like that but i did not follow this because I had a problem editing my configuration.yaml because my instance is running on a Docker container and I’m not able to install VSCode addon. Didn’t want to fiddle with my configuration.yaml in CLI so I had this as a backup plan since I could not imagine that this is the only “easy” and GUI only way to accomplish this.
But now, hearing of this solution a second time I’ll definitely try it.

EDIT: So since I don’t want to double post, I just want to mention that after i added everything correctly the new card just tells me “unknown” as the state. But i think I just have to wait until state changes first time since there is no historical data. Am i right?