Autoscale failed in Candlestick/ohlc chart


#1

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!


#2

Could you create a really small, but fully reproducable, example that demonstrates the issue? A screenshot/GIF would be really helpful too.

Thanks!


#3

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


#4

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.


#5

Hey @ascnill

An issue has been opened in the dash repo - you can follow it here https://github.com/plotly/dash/issues/241


#6

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!


#7

The fix has been published. @ascnill and @roysten, could you see if this fixed your issue?

pip install dash-core-components==0.22.1

#8

This is fixed! Thank you!!