✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Area Chart with multiple colors under a single trace

Hello! I’m trying to create an area chart where the area above an intersecting line is one color (green!) and below the intersecting line would be red. Is this something that is feasible or will I need to do some custom D3 here? I tried putting in an array of fillcolors but that failed. :slight_smile:

Thank you!


fillcolor doesn’t support arrays unfortunately.

There’s no easy way to accomplished what you’re trying to do at the moment unfortunately.

Though, you could find all the intersection points and construct layout.shapes with custom path values (see example here) and fill them.

Hi, has there been any developments for this? In particular I would like to have two colors in the area chart, regardless of whether more than 1 trace is required. Basically something that looks like this for example:


Any ideas? Thanks!


Has there been any developments for this?

I guess you only can split your trace into two traces as following,then assign different color to these two traces.
df_pos = df.where(df < 0, 0)
df_neg = df.where(df > 0, 0)

Another 18 months have passed and I’ve been given exactly the same problem to solve as @tsando asked for. i.e. a smoothed plot (spline) of data with a line slicing through (on some user specified y value in my case), and causing the plot to fill in one colour above and a different colour below. I’m using the JavaScript version of plotly with react-plotly. I’ve tried some experiments with multiple plots using tonexty fills and it sort of works, but the fills go all over the place with the curves of the spline and locations where points are a long way apart. Any help warmly received.