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)
data=[trace1,trace2,trace3,trace4,trace5,trace6,trace7,trace0]
figure= go.Figure(data=data,layout=layout)
pyo.plot(figure)
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'
figure.add_shape(type='path',
path=path_commands,
fillcolor='black',#colors[0].hex,
line=dict(color='black'),#color=colors[0].hex),
opacity=0.5,
xref='x',
yref='y')