Hi,
I am using dash in python. I generated graph object using dcc.Graph(). In the layout, i set {autoscale: True}. I was also using a submit-button to update the charts when other inputs change (all in state). When i does @app.callback(…), the chart looks correct when you open your url, but when you submit again, it shows up weird range for Candlestick chart.
Can someone help me with the issue? I think it could be a bug too.
Thanks!
Could you create a really small, but fully reproducable, example that demonstrates the issue? A screenshot/GIF would be really helpful too.
Thanks!
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import colorlover as cl
app = dash.Dash()
colorscale = cl.scales[‘9’][‘qual’][‘Paired’]
df = pd.read_csv(‘stock_ohlc.csv’)
app.layout = html.Div(children=[
html.Div(children=[
dcc.Dropdown(
id='input',
options=[{'label': 'SPY', 'value': 'SPY'},
{'label': 'QQQ', 'value': 'QQQ'}],
value='SPY'
)],
style={'width': '100px'}),
html.Button(id='submit-button', n_clicks=0, children='Submit'),
dcc.Graph(id='graphs', animate=False)
])
@app.callback(Output(‘graphs’, ‘figure’),
[Input(‘submit-button’, ‘n_clicks’)],
[State(‘input’, ‘value’)])
def update_graph(n_clicks, ticker):
symbol = str(ticker)
df2 = df[df.stock_symbol == symbol]
candlestick = {
‘x’: df2.date,
‘open’: df2.stock_open,
‘high’: df2.stock_high,
‘low’: df2.stock_low,
‘close’: df2.stock_close,
‘type’: ‘candlestick’,
‘name’: symbol,
‘increasing’: {‘line’: {‘color’: colorscale[0]}},
‘decreasing’: {‘line’: {‘color’: colorscale[1]}},
}
return {'data': [candlestick],
'layout': {
'title': 'candlestick',
'xaxis': dict(autoscale=True,
type='date'),
'yaxis': dict(autoscale=True)
}
}
first click
I have played around with this same issue and came to the conclusion that plot.ly has not been designed to handle this type of panning and zooming for stock charts.
Alternative option would be TechanJS or HighCharts java script library. Both of which has python wrapper so works easily well.
The most impressive solution is available on AnyCharts which allows full drawing capabilities like a MT4 terminal, but commercial licensing cost is prohibitive for personal use.
Hey @ascnill
An issue has been opened in the dash repo - you can follow it here https://github.com/plotly/dash/issues/241
Working on a stopgap fix in Finance charts by chriddyp · Pull Request #183 · plotly/dash-core-components · GitHub.
That’s fair! OHLC and Candlestick charts haven’t been a first class chart type, we’ve been creating them using a fragile codepath in plotly.js called “transforms”. We’ve decided fix this, and improve our support of financial charts in general, by making them first class chart types. We have an issue about this here: Turn finance charts into first-class trace types · Issue #2510 · plotly/plotly.js · GitHub.
If your company or organization can help fund this development effort, or any additional features for these chart types (e.g. Should remove breaks for OHLC, Candlestick · Issue #1382 · plotly/plotly.js · GitHub), then please reach out (Consulting, Training & Open-Source Development).
Thanks again for reporting!
The fix has been published. @ascnill and @roysten, could you see if this fixed your issue?
pip install dash-core-components==0.22.1
This is fixed! Thank you!!
Has this been fixed in plot.ly 3.3.0?
I am experiencing the same problem with 2 candle charts being displayed.
I’ve experined the same problem whening using candlestick,too. Following are my version number,it’s the most update one.
…
dash (0.28.2)
dash-core-components (0.33.0)
dash-html-components (0.13.2)
dash-renderer (0.14.3)
Could you create a simple, reproducable example?
Hi Chriddyp:
I now figure out that my problem is only about how to let the rangeslider not visible. Here is the example:
Chris Parmer plot@discoursemail.com 於 2018年10月16日 週二 上午12:07寫道：
(Attachment disable_rs.py is missing)
Hi Chriddyp:
I now figure out that my problem is only about how to let the rangeslider not visible. Here is the example:
…
import pandas as pd
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
date = pd.date_range(‘20180101’,periods=8)
s1 = pd.Series([1,2,3,4,5,6,7,8],index=date)
s2 = pd.Series([4,5,6,7,8,9,10,11],index=date)
gtype = ‘candlestick’
app.layout = html.Div(children=[
html.H1(children=‘Whoa, a graph!’),
html.Div(children=’’’
Making a stock graph!.
‘’’),
dcc.Graph(
id=‘example-graph’,
figure={
‘data’: [
#{‘x’: s1.index, ‘y’: s1.data , ‘type’: gtype, ‘name’: ‘stock-x’},
#{‘x’: s2.index, ‘y’: s2.data , ‘type’: gtype, ‘name’: ‘stock-y’},
{‘x’:s1.index, ‘open’:s1.data , ‘high’:s2.data ,‘low’:s1.data, ‘close’:s1.data,‘type’:gtype, ‘name’: ‘stock-y’},
],
‘layout’:{
‘title’:‘stock info’,
‘x-axis’:{‘rangeslider’:{‘visible’:False}},
‘y-axis’:{‘rangeslider’:{‘visible’:False}},
},
}
)
])
if name == ‘main’:
app.run_server(debug=True)
It’s
'xaxis':{'rangeslider':{'visible':False}},
not
'x-axis':{'rangeslider':{'visible':False}},
oh…what a silly typo. Appreciate for your kindly help.
Chris Parmer plot@discoursemail.com 於 2018年10月16日 週二 下午11:54寫道：