How to use fillgradient?

There is no post about it and in the reference only the following appears

Another problem that I ended up solving myself, I found the solution in the following link and although it is in python I managed to transfer it to javascript since checking the same information but in javascript it does not have the same example of fillgradient as the python documentation, I leave the two links for comparison



Apparently the python documentation is better than javascript

The solution is the next

fill: 'tozeroy',
fillgradient: {
    type: 'vertical',
    colorscale: [[0,'rgba(31,119,180,0.5)'], [1,'rgba(31,119,180,0)']],
    start: this.range.y[1],
    stop: this.range.y[0]

And the result is the following


When you zoom or drag you have to update the start and stop values ​​to the current maximum and minimum of the axis to keep the gradient even, since if you don’t the gradient changes, to achieve this you have to check the plotly_relayout event to update both values. It would be interesting if in the future a “fill” property like “todomainx” and “todomainy” would be added to do this update automatically and well, finally, it would also be a great idea to add the gradient also in the shapes because in the javascript documentation It doesn’t mention anything about it (I haven’t checked the python documentation yet)