I mean the traces, the grid looks great!
If youāre referring to āGrow Light Stateā traces, intended as well.
cool, my design eye is as good as my french so donāt let my suggestion bother you, the plots look very nice
Really appreciated. Thanks
Hello again,
Is there a way for opposite y axes with different range values to always share the same lines, even when zoomed?
Thanks.
I think this is achieved with scaleanchor and scaleratio but havenāt tried it myself
See here: Layout.yaxis in JavaScript
And let me know how it goes, Iām curious
Will doā¦
So far Iāve managed to find a way to align the two yaxes by setting the yaxes defaults: rangemode: tozero and tyckmode: sync.
This seems to work to some extent at least. Once I zoom, scroll or pan they are out of sync.
Setting the autorange_after_scroll to true seems to be partialy doing the job to keep them in sync, because it only applies to the main yaxis entities. Additional yaxes seem to be ignored by this function.
type: custom:plotly-graph
entities:
- entity: sensor.gc131_aw_tree_pollen_0d
name: E1 (yaxis)
- entity: sensor.gc131_aw_ragweed_pollen_0d
name: E2 (yaxis)
- entity: sensor.gc131_aw_grass_pollen_0d
name: E3 (yaxis)
- entity: sensor.gc131_aw_mold_pollen_0d
name: E4 (yaxis2)
yaxis: y2
hours_to_show: 24
refresh_interval: 10
autorange_after_scroll: true
layout:
yaxis2:
tickfont:
color: red
defaults:
entity:
fill: tozeroy
yaxes:
rangemode: tozero
tickmode: sync
I found a way!
As you see, the ticks of y2 are forced to match those of y (even if they land on numbers like -0.069). And they stay in synch while zooming/scrolling
The trick is this:
layout:
yaxis2:
overlaying: y
zeroline: false
tickmode: sync
I based it from this example in the Plotly PR that adds tickmode: sync.
It does indeed, but only as long as autorange_after_scroll is set to false. If you set that to true, which you should if you want the plot to be rescaled so it could fit the graph when zoomed, the sync is gone, because as far I can see autorange_after_scroll only affects the main yaxis traces and ignores additional yaxes, causing the traces bound to the main yaxis to scale to fit, while secondary yaxes are ignored.
Iām trying to visualize when different types of lights turn on/off during the day. My idea was having a yellow and red line at the bottom at two different levels on the yaxis, representing the two lights when turned on. The question is, how can I have one of lines filled from 4 to 2 on the yaxis and not all the way to the bottom (0)? Here is my code:
- entity: input_boolean.evening_lights
showlegend: false
name: KvƤllslampor
line:
width: 0
fill: tozeroy
fillcolor: rgba(220, 230, 20, 1)
filters:
- map_y: 'y === "on" ? 2 : 0'
- resample: 1m
- entity: switch.shelly_altanen
showlegend: false
name: Julbelysning
line:
width: 0
fill: tonexty
fillcolor: rgba(220, 30, 30, 1)
filters:
- map_y: 'y === "on" ? 4 : 2'
- resample: 1m
Try removing the fill, setting a width, and mapping to null instead of zero when the light is off
1 Like
Wow thank you for quick reply. Removing fill and use line width worked like a charm! 
You can also use a third yaxis (yaxis3) and set the domain and range of that specific yaxis. This means the position of zero is not anymore dependant on your other entities
Iāll look into it. Iām not sure how this works, nor how to set it up.
But as far as Iāve seen, after zoom or pan, pressing the autoscale button seems to be doing the trick, by scaling the secondary yaxis accordingly, thus making the whole thing sort of feasible while allowing to keep the autorange set to true. The major inconvenience of that is that itās a manually triggered event. It wouldāve been much better if the autoscale couldāve been triggered automatically after each zoom or pan. Iāve done some research and saw that someone tried to implement that function in plotly python and actually succeeded, but I donāt donāt know how that could be adopted to HA.
autorange_after_scroll is what you want. Itās not perfect but it does what you want.
If you were to set up a third axis, you can also fix its range so it wonāt change while you zooom the plot. Just google plotlyjs multiple yaxes and plotlyjs fix yaxis range.
Hi,
First, thanks a lot for this great card. Itās wonderful.
Second, I have issues when trying to edit. The edition window moves a lot under Safari. Do you know if it is possible to fix that (except changing the browser 
)?
Thanks.
Thank! happy to hear you like it
Try setting refresh_interval to 0, removing it or setting it to auto. Updates while editing reset the whole plot.
If that is not the problem, then please change the browser open a bug ticket in the repo and Iāll take a look before the next release
1 Like
Unfortunately, that does not seem to work.
Here is a video to see how it behaves. Iāll open a ticket, sure.
