2

This is my plotly dash code:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go
from plotly.subplots import make_subplots
import pandas as pd

data = pd.read_csv('https://raw.githubusercontent.com/AmirForooghi/stocks_csv/master/stocks_sample.csv')

df_1 = data.loc[data.sym == 'f']
df_2 = data.loc[data.sym == 'i']
df_3 = data.loc[data.sym == 'c']

fig = make_subplots(rows=2, cols=3, row_heights=[0.8, 0.2], vertical_spacing=0,
                    horizontal_spacing=0.05, shared_xaxes=True, shared_yaxes=False)

fig.add_trace(go.Candlestick(open=df_1['open'], high=df_1['high'], low=df_1['low'],
                             close=df_1['close'],
                             increasing_line_color='#0384fc', decreasing_line_color='#e8482c'
                             ), row=1, col=1)

fig.add_trace(go.Scatter(x=list(range(40)), y=df_1['pct'], line_color='#fae823', hovertemplate=[]),
              row=2, col=1)

fig.add_trace(go.Candlestick(open=df_2['open'], high=df_2['high'], low=df_2['low'],
                             close=df_2['close'],
                             increasing_line_color='#0384fc', decreasing_line_color='#e8482c'
                             ), row=1, col=2)

fig.add_trace(go.Scatter(x=list(range(40)), y=df_2['pct'], line_color='#fae823', hovertemplate=[]),
              row=2, col=2)

fig.add_trace(go.Candlestick(open=df_3['open'], high=df_3['high'], low=df_3['low'],
                             close=df_3['close'],
                             increasing_line_color='#0384fc', decreasing_line_color='#e8482c'
                             ), row=1, col=3)

fig.add_trace(go.Scatter(x=list(range(40)), y=df_3['pct'], line_color='#fae823', hovertemplate=[]),
              row=2, col=3)

fig.update_layout({'plot_bgcolor': "#21201f", 'paper_bgcolor': "#21201f", 'legend_orientation': "h"},
                  legend=dict(y=1, x=0),
                  font=dict(color='#dedddc'), dragmode='pan', hovermode='x unified', showlegend=False,
                  margin=dict(b=20, t=0, l=0, r=40))

fig.update_xaxes(showgrid=False, zeroline=False, rangeslider_visible=False, showticklabels=False, showline=True,
                 linecolor='#969799', showspikes=True, spikemode='across', spikesnap='data',
                 spikedash='dash', spikecolor='#ebeae8', spikethickness=0.5)

fig.update_yaxes(showgrid=False, zeroline=False, showticklabels=True, showline=False)

fig.update_traces(hoverinfo='skip', xaxis='x1', col=1)
fig.update_traces(hoverinfo='skip', xaxis='x2', col=2)
fig.update_traces(hoverinfo='skip', xaxis='x3', col=3)

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    dcc.Graph(figure=fig, id='chart', config={'displayModeBar': False}),
])
if __name__ == '__main__':
    app.run_server(debug=True, dev_tools_ui=False, dev_tools_props_check=False)

My problem with this figure is that the ticklabels for y axis are not correct. enter image description here As you can see, for the second and third columns, it is removed and for the first column it is overlapping. I tried the approach of this solution but if I remove those fig.update_traces the spikes that are present will change(refer to update 1 below for more information). What I mean by spikes, is illustrated below: enter image description here As can be seen when the cursor is on the scatterplots, It draws a line across the whole column.

I want to keep these spikes completely in tact as the way they are now. How can I fix the ticklabels problem now?

UPDATE 1:

If I remove the three fig.update_traces at the end of the code, the spikes are present but they are not what I want. It is illustrated by these two screenshots. The first one is the spikes that are in my original code and and the second one is the spikes without fig.update_traces: enter image description here enter image description here

The main difference is that spikes in the figure above are across the whole column and are only present when the cursor is on the scatterplot. I NEED it this way. It is not for better looks! They should stay exactly like the above figure.

Amir
  • 978
  • 1
  • 9
  • 26
  • 1
    Is what you're really aiming for to get that cross on hover without that hoverinfo again? But this time for multiple subplots? – vestland May 28 '20 at 13:49
  • 1
    If that is the case, then "how to apply crosshairs for multiple candlestick figures" is the real question here. And the ticklabels are really just a side-effect of reaching that goal. – vestland May 28 '20 at 14:07
  • 1
    @vestland I have already "applied crosshair for multiple candlesticks". If you run my code, you can see that for all three columns crosshair is working fine. I think the real problem is fixing the ticklabels problem while maintaining the crosshair with the style that I want. Crosshair is not a problem anymore. We solved that issue together with 99% percent of your help :) – Amir May 28 '20 at 14:33
  • 1
    I see... Just had me confused there since your snippet only produces a vertical and not horizontal spikeline. I'll take another look. – vestland May 28 '20 at 14:47
  • @vestland I understand. I want this style for three column charts. – Amir May 28 '20 at 14:57

1 Answers1

2

This is an answer in progress...

I removed:

 fig.update_traces(hoverinfo='skip', xaxis='x1', col=1)
 fig.update_traces(hoverinfo='skip', xaxis='x2', col=2)
 fig.update_traces(hoverinfo='skip', xaxis='x3', col=3)

And I'm getting this with the spikes as you can see your gif:

enter image description here

What am I missing?

vestland
  • 55,229
  • 37
  • 187
  • 305