✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Autoscale failed in Candlestick/ohlc chart

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


second click - xaxis gets messed up

third click even more messed up

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 https://github.com/plotly/dash-core-components/pull/183.

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: https://github.com/plotly/plotly.js/issues/2510.
If your company or organization can help fund this development effort, or any additional features for these chart types (e.g. https://github.com/plotly/plotly.js/issues/1382), then please reach out (https://plot.ly/products/consulting-and-oem/).

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!!

1 Like

Has this been fixed in plot.ly 3.3.0?
I am experiencing the same problem with 2 candle charts being displayed.

1 Like

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寫道: