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
Python
Javascript
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
Observations:
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)
Hello @Saratoga
I am interested in how you build the trading chart you showed. Could you post more of the code or an MRE?