Horizontal Lines / Thresholds in Line charts

[Steph-74]

Hi David, All,
I got again some time to play asround with HA and trying to make some nice charts, but I am struggeling in some areas.

Background: My energy price changes from hour to hour and try to make the best out of it for charging the car or oprimising own consumption for the PV. Therefore I would like to see some thresholds in the chart, where the data is coming from other sensors in Home Assistant.

The chart shall look like this:

Which information shall be obtained from the chart at a glance:

• When the energy price is below the threshold "Wallbox", the car will be charged
• When the energy price is below the threshold "Heimspeicher", energy will be consumed from the grid. The energy in the "Heimspeicher" is used when the grid price is above the threshold

But I have following challanges and dunno, if this can be achived at all:

• The thresholds shall go not only to the now-line, but through the whole chart to the right
• The value for the threshold shall be the c u r r e n t value of the sensor. In the screeenshot, the value from the beginning of the chart considering "hours_to_show" is shown

To came that far at all I looked up this post from the discussion, but unfortunately, this did not bring me any further.

type: custom:plotly-graph
time_offset: 2d
hours_to_show: 50
config:
  staticPlot: false
  displayModeBar: false
layout:
  xaxis:
    rangeselector:
      "y": 1
      x: -0.125
      buttons:
        - count: 7
          step: day
  yaxis:
    tickformat: .2f
    fixedrange: true
    title: €/kWh
  yaxis9:
    visible: false
    fixedrange: true
round: 3
default: null
entities:
  - entity: sensor.electricity_price
    name: Zukünftige Preise
    yaxis: y1
    showlegend: false
    line:
      color: rgba(0, 0, 0, 1)
      width: 2
    filters:
      - store_var: electricity_price
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.electricity_price.xs.slice(-1)[0],...meta.future.map(({ startsAt }) => new Date(startsAt))],
            ys: [vars.electricity_price.ys.slice(-1)[0],...meta.future.map(({ total }) => total)],
          })
    texttemplate: " %{y:.3f} €/kWh"
    hovertemplate: |
      <i>%{x}</i><br>
      <b>%{y:.3f} €/kWh</b>
      <extra></extra>
  - entity: sensor.electricity_price_am_brundl
    name: Preis (Historie)
    yaxis: y1
    showlegend: false
    line:
      color: rgba(255, 0, 0, .5)
      width: 2
    show_value: true
    texttemplate: <b> %{y:.3f} €/kWh </b>
    hovertemplate: |
      <i>%{x}</i><br>
      <b>%{y:.3f} €/kWh</b>
      <extra></extra>
  - entity: input_number.pv_strompreisoptimierung
    name: Schwellwert Heimspeicherbetrieb
    yaxis: y1
    line:
      width: 3
    x: $ex [0, Date.now()]
  - entity: number.evcc_garage_smart_cost_limit
    name: Schwellwert Wallbox
    yaxis: y1
    line:
      width: 3
    x: $ex [0, Date.now()]
  - entity: ""
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $fn () => [Date.now(), Date.now()]
    "y": $fn () => [0,1]

[dbuezas]

For the thresholds, I see two options:

1. Use get('visible_range') instead of [0,now].
2. Use shapes instead. See this example: How to add background colors (gradient or areas) or colorize specific grid lines? #45 (comment)

To use the current value of the sensor, you can set the y1 of the shape to $ex hass.states['sensor.xxx'].state

Wish you luck!