Is it possible to adjust the visible time-scale range though a callback?

[wygud]

Like the title says, I am looking to modify the visible range of the time-scale (axis) based on data sent through a callback.

For example: I would have a dcc.datepicker as input and then scale a 1D candlestick chart to center on the date selected in the date picker. Ideally, I would like to set a predefined number of days on either side of the selected date. Any idea if this is possible?

[tysonwu]

Hi @sirdinkus, thanks for trying out the component! While there is a timeRangeVisibleRange property available, it is currently read-only.

Currently you may achieve a similar effect by manually calculating out the range of candlestick you would like to show, and send the output data in a callback:

@app.callback(
    [Output('chart-id-here', 'seriesData')], # tvlwc chart
    [
        Input('date-picker', 'date'), # single date picker; this day should show in the middle of chart
        Input('no-of-days-to-the-side', 'value') # dcc.Input; an integer
    ], 
    [State('candlestick-storage', 'data')], # perhaps a dcc.Store that stores all candlestick
)
def change_range(mid, n_days, candlesticks):
    # code logic something like:
    # candles = candlesticks[mid-n_days:mid+n_days]
    return candlesticks

I will be adding the ability of setting VisibleRange for the next iteration. Thanks for your feedback.

[wygud]

Hi @tysonwu, thanks for the prompt reply. Creating a new chart with each callback iteration would limit my goals, which include panning beyond the initially visible data and enabling interaction between charts with different time frames through clicks or data selection.

I'll await the next update. The TV lightweight library seems to be the best open-source web-based OHLC charting option compared to the slow Plotly graphs for larger datasets. Once I have more pre-requisite programming knowledge I will try to help with some of the development if I can.