Fillgradient in scatter graphs

[wrowlands3]

Describe the solution you'd like Scatter fillgradient defaults to fillcolor when used in home assistant, could support for this be added in a future release or am I missing something? It would be great to use colorscale in the fillgradient.

How would it be defined in yaml?

type: custom:plotly-graph
entities:
  - entity: ''
    y: 1
    x: $ex [new Date(Date.now()).setHours(-24), new Date(Date.now()).setHours(-23), new Date(Date.now()).setHours(24)]
    fill: tozeroy
    fillgradient:
      colorscale:
        - 0, red
        - 1, blue
      start: 0
      stop: 1
      type: vertical
hours_to_show: 24

Scribble Currently looks like this, Should like more like this

Additional context https://plotly.com/python/reference/scatter/#scatter-fillgradient Colorscales detailed here: https://plotly.com/python/colorscales/

[dbuezas]

I didn't know about fill gradients. I suggest you try using this in plain plotlyjs, I don't think this card changes anything about it. You can start with this codepen: https://codepen.io/chris3edwards3/pen/BaNxxwY and test it in the browser

[SNoof85]

Managed to make it work on codepen : https://codepen.io/SNoof/pen/JjQEZmP

The fillgradient for scatter graphs is only from 2.30.0, this is why it doesn't work with that card. See : https://github.com/plotly/plotly.js/releases/tag/v2.30.0

[SNoof85]

https://github.com/SNoof85/lovelace-plotly-graph-card/releases/tag/3.3.6 here you will find with updated plotly.js to 2.34.0 and works fine with :

    fill: tozeroy
    fillgradient:
      colorscale:
        - - 0
          - red
        - - 1
          - green
      type: vertical

[locussss]

@SNoof85 Tested your repo and gradient works. Also barcornerradius works, maybe more.

But the transparency is gone

[SNoof85]

@locussss What transparency are you talking about ? My repo was just about to give it a try, not meant to be used in production as only change was bumping the plotlyjs version without any further test :)

@dbuezas : Maybe any thought about updating plotlyjs version ?

[locussss]

Like the transparancy in the top diagram in the screenshot below, top is original plotly without gradient, bottom is with your repo.

I did not mean to be offensive or rude, I liked to try out...

[SNoof85]

You need to set the colors from the gradient to rgba values.

fillgradient:
  start: 0
  stop: 600
  colorscale:
    - - 0
      - rgba(255, 0, 0, 0.8);
    - - 0.5
      - rgba(255, 165, 0, 0.8)
    - - 1
      - rgba(0, 128, 0, 0.8)
  type: vertical

And there is no problem, I did not took anything wrong here 😄 Just saying that some things might break with my repo !

[dbuezas]

@SNoof85 open a PR :)

[SNoof85]

Will do some tests before then.

[locussss]

@SNoof85

You were right! Looks very nice now. And as I said earlier, barcornerradius also works.

So, I hope the adjustments you made, will also make it in @dbuezas repo.

Both @SNoof85 and @dbuezas, thanks very much!