Finally got the forecast :D ...

[Paul1865]

Maybe there is a better way, but I did this with the apexcharts card: https://github.com/RomRider/apexcharts-card
Colors are a little off, so feel free to change :) .
Instead of fixed values for the colors, it it better to check forcast.tariff_group (low | normal | high), but I don't know how to do it :p .

ATTRIBUTES

state_class: measurement
forecast: 
- electricity_price: 3433617
  tariff_group: low
  solar_percentage: 0
  solar_yield: 0
  datetime: '2023-01-20T20:00:00.000000Z'
  sustainability_score: 129
  carbon_footprint_in_grams: 3005

CODE

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
    min: 0
  grid:
    lines:
      show: true
    borderColor: '#333'
    strokeDashArray: 0
  xaxis:
    axisBorder:
      show: true
      color: '#333'
      offsetX: 0
      offsetY: 0
experimental:
  color_threshold: true
header:
  title: Zonneplan Forecast tariffs
  show: true
  show_states: true
  colorize_states: true
span:
  start: hour
yaxis:
  - id: both
    min: '|-0.01|'
    max: '|+0.01|'
    decimals: 2
series:
  - entity: sensor.zonneplan_current_electricity_tariff
    float_precision: 3
    show:
      in_chart: false
      name_in_header: true
  - entity: sensor.zonneplan_current_electricity_tariff
    type: column
    group_by:
      func: raw
    float_precision: 3
    color_threshold:
      - value: 0
        color: rgb(137,104,205);
      - value: 0.2
        color: rgb(102,153,204);
      - value: 0.25
        color: rgb(0,139,69);
      - value: 0.32
        color: rgb(189,183,107);
      - value: 0.37
        color: rgb(238, 118, 0);
    show:
      in_header: false
      name_in_header: false
      datalabels: false
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime), entry.electricity_price/10000000];
          });

[rinseringma]

Nice! Very cool! Just implemented it, works great!

[Paul1865]

Changed y-axis to

yaxis:
  - id: both
    min: '|-0.01|'
    max: '|+0.01|'
    decimals: 2

[hmmbob]

What does that do?

[Paul1865]

It changes the min and max values of the y-axis.
+0.01 added to the max measured value and the other way around :) . So no more fixed values on the y-axis.

[sniperxnl]

possible to add left top current price and right top cheapest prijs with time?

[Paul1865]

Current price added. Some UI-changes too, so I updated the whole code and screenshot. Cheapest price is a bit tricky. Don't know how yet, but I will keep you posted.

[hmmbob]

Have a look here for inspiration; I'm using a template sensor to obtain lowest and highest rates

https://github.com/hmmbob/HomeAssistantConfig/blob/master/packages/zonneplan.yaml

[Paul1865]

Ah nice 😊 !
Ik ga m jatten 😁😁 .
Was dus idd op zoek naar die sort(attribute='price') | first etc. maar kon zoiets nergens meer vinden.

[Paul1865]

After the last update, please change 'forcast' to 'forecast' in the data generator 🙂 .
Otherwise, the data is empty.

[joopdo]

Thank you for this, I'm happy I ran into your post!

[Paul1865]

I didn't get any data any more.
Attribute 'price' is gone, so changed to 'electricity_price'.

[fsaris]

See #63