How to add background colors (gradient or areas) or colorize specific grid lines?

[Photelegy]

Hi
(I know I asked many questions already. I really tried to find the solution at "plotly.js ..." but I'm really confused because I don't have experience with JavaScript.)

I really hope my questions here (with your amazing answers can help a lot of other people to make the plotly-graph-card more widely used in HomeAssistant!

1. Is there a way to make background color areas like in to following picture (made in "Grafana" PlugIn for HomeAssistant):
   It would be really helpful e.g. for a light sensor because many people don't know how many lux is bright. And with colors (dark blue to bright yellow) it's pretty easy to understand more or less.)
   

2. Is there a way to colorize specific grid lines (like the line at y=0 or always at midnight x=00:00)
   Like the two thick red lines in the following picture.
   

Thank you very much!

[dbuezas]

Oh, that's an interesting idea!
For that you need to use shapes.

Example

layout:
  shapes:
    - type: rect
      xref: paper # means that x0 and x1 are relative to the screen, not the value of the axis themselves. 
      yref: 'y' # means that y0 and y1 are relative to the first yaxis (if you have multiple yaxes, this can be y2, y3, etc)
      x0: 0 # 0 = start  (see xref)
      x1: 1 # 1 = end (see xref)
      y0: 0 # zero of the actual yaxis
      y1: 50 # in whatever units the axis shows
      fillcolor: green
      opacity: 0.2
      line:
        width: 0
    - type: rect
      xref: paper
      yref: 'y'
      x0: 0
      x1: 1
      y0: 50
      y1: 100
      fillcolor: yellow
      opacity: 0.2
      line:
        width: 0
    - type: rect
      xref: paper
      yref: 'y'
      x0: 0
      x1: 1
      y0: 100
      y1: 200
      fillcolor: red
      opacity: 0.2
      line:
        width: 0

More here

• https://plotly.com/javascript/shapes/#highlighting-time-series-regions-with-rectangle-shapes
• https://plotly.com/javascript/reference/layout/shapes/#layout-shapes

--
I appreciate that you googled first, don't worry about posting more questions :)

[dbuezas]

Looks really good!
👏👏👏
Thanks for the tip on layer

[Qhilm]

Follow-up question: is it possible to have plotly autorange based on the entity's values only and ignore the shapes?

Example: shapes are stacked from 0 to 100%, but cruve oscillate between 40 and 60% most of the time. I would like plotly to automatically zoom in on the range of y-values that are within the time range (x-axis) displayed.

[dbuezas]

I did this so long ago that I don't remember why it works (doesn't affect autoscale)

layout:
  margin:
    r: 40
  shapes:
    - type: rect
      xref: paper
      x0: 0
      x1: 1
      yref: 'y'
      yanchor: 50
      ysizemode: pixel
      y0: 0
      y1: -1000
      fillcolor: green
      opacity: 0.2
      line:
        width: 0
    - type: rect
      xref: paper
      yref: 'y'
      x0: 0
      x1: 1
      y0: 50
      y1: 100
      fillcolor: yellow
      opacity: 0.2
      line:
        width: 0
    - type: rect
      xref: paper
      x0: 0
      x1: 1
      yref: 'y'
      yanchor: 100
      ysizemode: pixel
      y0: 0
      y1: 1000
      fillcolor: red
      opacity: 0.2
      line:
        width: 0

[Qhilm]

Thanks, it's ysizemode: pixel which does this, but it also breaks the use case for me at the same time.

I want to have a shape that goes from y=0 to y=50. In ysizemode: pixel, y0, y1 and y coordinates within path are pixels relative to yanchor instead. Hence the shape is not valid anymore.

[dbuezas]

I suggest you try asking in a plotly forum, your question is not specific for this home assistant card and you may have better luck there (bigger community) :)