Python Dash resizing candlesticks

user_14187095 0
Viewed 673

I've been trying to create a candlestick graph that shows the prices of NASDAQ and moving average on it, which has been a partial success:

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import random
import plotly.graph_objs as go
import yfinance as yf
import plotly.express as px
import datetime as dt
from datetime import datetime
from metody import metody
import time
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

NASDAQ = pd.read_excel(r'file.xlsx')

app = dash.Dash(external_stylesheets=external_stylesheets)

fig = go.Figure(data=go.Candlestick(
    open=NASDAQ['Open'],
    close=NASDAQ['Close'],
    low=NASDAQ['Low'],
    high=NASDAQ['High'],
))


close = NASDAQ['Close']
open = NASDAQ['Open']
srednia = metody.generateMovingAverage(NASDAQ['Close'], 3)

fig.add_trace(
    go.Scatter(
        y=srednia
    )
)

app.layout = html.Div([
    html.H1(
        children="This is a chart of {}".format("NASDAQ"),
        style={
            'text-align': 'center'
        }
    ),
    dcc.Graph(
        id='candles',
        animate=True,
        figure=fig,
    ),
    dcc.Interval(
        id='update',
        interval=1000
    )
    ])
app.run_server(debug=True)

unfortunately however when I'm trying to zoom the results, the candles do not upscale so that it's readable:

enter image description here

enter image description here

My question is: how do I deal with that? I'd love my chart to be nicely interactive (meaning the user can adjust the period and the candles are as big as it fits to the size of the chart).

PS: I'm really new to Dash, so if you've got any comments on my code or you know something I've done the wrong way round, please tell me :)

zoom-sdk plotly-dash plotly python
1 Answers

You need to get this into your code somewhere (upon zoom trigger):

fig.update_yaxes(range=[minY, maxY])

with minY and maxY being chosen from a downselection of your results (and rounded down and up respectively to look a bit better)

But I don't see where your zoom is being done - I assume you aren't using the plotly default but instead closing in using the lower summary bar?

You might have to dive in to the .css I'm afraid - or maybe you can insert additional lines into it before passing it to dash.Dash()

user_87224210
Related