Problem with area colors about plotly.js

[mdtusz]

Yes, the default behaviour for 'tonexty' seems to be to fill to the x-axis for the first dataset (although I'm new so I could be mistaken!). It you would like that fill to be "empty", you can set fill: 'none', and only the curve will be drawn.

'tozeroy' will always fill between the curve and the x-axis. It becomes a challenge of presentation because the "bottom" dataset will become obscured if any "layers" on top have values greater (or less than, in the case of negative values). The reason for having the overlaid fills is so as to preserve visibility of all the data. If you would like to get rid of the overlaid colours, you can set fillcolor using a string containing a hex code, or a rgb/rgba string such as 'rgba(241,111,203,1)'. By setting a full opacity of 1 however, any dataset value less than a successive dataset value (at an equivalent x-value) will be hidden.

[mdtusz]

I believe that this is the expected behaviour - the data is plotted in order it is placed in the array, so in your first example, the dataset with larger y-values (Query 2) is plotted in blue, then the next dataset is plotted in orange, and the area is filled (to the next y). When using fill: 'tonexty' you can think of the filled areas between data sets as the area between two successive curves, so their order will determine the fill areas. In your second example, you will see where orange plot dips below the x axis, the fill colour is the combined blue/orange.

[prog8]

I think now I get it but why blue area on the first chart is touching Y=0, only because there is no "next Y"?

BTW It seems I should use tozeroy instead of tonexty?

[prog8]

I tried tozeroy as well and it doesn't work good - it looks quite bad. From what I understand tonexty should work fine but only when I manually sort data series that the one with higher values is added first. Unfortunately this is not always so obvious because values can be sometimes higher and sometimes lower.

[alexcjohnson]

@mdtusz spot on - 'tonexty' behaves identically to 'tozeroy' for the first trace. This is driven by the use case of filled area charts, where you always want to fill the first trace to zero and all the others to the adjacent trace - set set all the traces to the same fill mode 'tonexty' and this is what you get.