How to use fillgradient?

plotly.js
1

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

2

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

image
image1827×1080 112 KB

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)

3

Hello @Saratoga

I am interested in how you build the trading chart you showed. Could you post more of the code or an MRE?