go.Candlestick plots behind other traces, no matter where in data[] order

I am using plotly to draw a candlestick chart. On the chart are also ‘zones’ (its like a fill between two MA lines) and finally a moving average line.

All the traces I apply, draw on top of the candlesticks. What I am looking to do is have the candlesticks on top of all other traces.

What I have tried:

  • add_trace without any fillcolor identified. This works, but the colors are random. They are translucent enough that I can see the candlesticks. But when I enter a fillcolor, then I cannot see the candlesticks. The fill is opaque.
  • With the first attempt, I entered opacity = 0.1 after the fillcolor=‘red’. It does not seem to have any affect.
  • I started with the candlestick trace at the beginning of the data list and at the end of the list.
  • I tried a subplots with candlesticks in one col 2 and other traces in col 1. It worked but made 2 charts side by side.
  • Drawing an rectangle shape for each data point on the x axis connecting between the two ‘ma’-like lines to ‘fill’ between the top and bottom zone lines. But this is a lot to render and most of the time is too much for the computer.
  • I tried drawing a ‘path’ shape. But my code, I don’t think is correct (at bottom), and there is not any tutorials on doing this.

My objective is to have the ‘zones’, moving average, and candlesticks on one chart. I need to be able to see all 3 elements. I will then be using this plotly chart in a dash application in case that matters. I am open to any solution that works (i.e. doing a path shape, traces, etc.)

Here is a sample of the data:

`|Date_Time |||||||| |Open | High |Low |Close |Zone_Bottom |Zone_Top |21MA|

|2021-01-03 22:01:00 |1.77089 |1.77126 |1.77089 |1.77126 |1.772410 |1.772686 |1.773578|
|2021-01-03 22:02:00 |1.77141 |1.77141 |1.77126 |1.77126 |1.772329 |1.772704 |1.773459|
|2021-01-03 22:03:00 |1.77112 |1.77146 |1.77112 |1.77136 |1.772249 |1.772726 |1.773358|
|2021-01-03 22:04:00 |1.77121 |1.77277 |1.77114 |1.77127 |1.772214 |1.772747 |1.773255|
|2021-01-03 22:05:00 |1.77110 |1.77132 |1.77094 |1.77094 |1.772170 |1.772768 |1.773134|
|2021-01-03 22:06:00 |1.77117 |1.77117 |1.77052 |1.77052 |1.772121 |1.772784 |1.772985|
|2021-01-03 22:07:00 |1.77086 |1.77086 |1.77060 |1.77083 |1.772081 |1.772796 |1.772855|
|2021-01-03 22:08:00 |1.77088 |1.77088 |1.77086 |1.77086 |1.772049 |1.772811 |1.772724|
|2021-01-03 22:09:00 |1.77084 |1.77084 |1.77071 |1.77071 |1.772018 |1.772826 |1.772582|
|2021-01-03 22:10:00 |1.77070 |1.77084 |1.77064 |1.77064 |1.771988 |1.772839 |1.772444|`

Here is the code I am using:

import pandas as pd
import datetime as dt
import numpy as np
import plotly.graph_objects as go
import plotly.offline as pyo

trace1 = go.Candlestick(x=df.index, open=df['Open'],high=df['High'],low=df['Low'],close=df['Close'])
trace2 = go.Scatter(x=df.index, y=df['Zone_Bottom'], fill='tonexty', fillcolor='blue', opacity=0.1,line=dict(width=0))
trace3 = go.Scatter(x=df.index, y=df['Zone_Top'], fill='tonexty', fillcolor='white', opacity=0.1, line=dict(width=0))
trace4 = go.Scatter(x=df.index, y=df['21MA'], line=dict(color='black', width=1), name=f'1m-L1')

layout = go.Layout(xaxis_rangeslider_visible = False)
figure= go.Figure(data=data,layout=layout)


My attempt at plotting a path shape for the zone:

# create a path shape that follows the curve of the line
    path_commands = f'M{df.index[0],df['Zone_Top'][0]} '
    for i in range(1, len(df.index)):
        path_commands += f'L{df.index[i],df['Zone_Top'][i]} '
    for i in range(len(df.index)-1, -1, -1):
        path_commands += f'L{df.index[i],df['Zone_Bottom'][i]} '
    path_commands += f'Z'


HI @stearno!

You could try using a rgba string. Instead of




where the last float is the alpha channel (opacity)

Thank you Aimped! Genius. That does let me affect the opacity. So at least this gives me a working option.

I am still open to a solution where the color is not translucent as another option.

I fear, this will be the only option you have.

If I remember correctly, the trace order in plotly can not be altered due to an internal sorting which depends on the name of the trace type. There was a post from @nicolaskruchten but I can’t find it right now.

Maybe you could scan the search resluts:


Yes, I read the post before on requesting z-order, and the person said no because it would break other things.

But why do all traces actually fall in order of the order you put it in the data list, but candlesticks don’t care. This one trace will always be first?

Try adding a bar chart. I think the traces are ordered alphabetical, but I’m just guessing.

Thank you for your help! Very appreciated.