How to set custom hover info on a candlestick chart?

Dash Python
1

Hi there

Is it possible to set custom hover info on a candlestick chart? I see the ‘customdata’ variable in the Candlestick trace, but when I try to use it like I do on other charts it doesn’t work.

green = go.Candlestick(
        x=df_green['Date'],
        open=df_green['open'], high=df_green['high'],
        low=df_green['low'], close=df_green['PriceUSD'],
        increasing_line_color= 'rgb(3, 206, 164)', decreasing_line_color='rgb(3, 206, 164)',
        increasing_fillcolor= 'rgb(3, 206, 164)', decreasing_fillcolor='rgb(3, 206, 164)',
        name='Up Trend',
        customdata=df_green[['PriceUSD']].to_numpy(),
        text = "Price:%{customdata[0]:,.2f}",
        hoverinfo='text'
    )

How it looks:

image

Thanks

2

refer to hovertemplate

3

Thanks but that reference is for a pie chart and I’m working with a candlestick chart, which doesn’t have a hover template attribute.

4

This should do the trick:

text = df_green["PriceUSD"].to_list()
text = ["Price: " + f"{text[i]:.2f}" for i in range(len(text))]

green = go.Candlestick(
    x=df_green["Date"],
    open=df_green["open"],
    high=df_green["high"],
    low=df_green["low"],
    close=df_green["PriceUSD"],
    increasing_line_color="rgb(3, 206, 164)",
    decreasing_line_color="rgb(3, 206, 164)",
    increasing_fillcolor="rgb(3, 206, 164)",
    decreasing_fillcolor="rgb(3, 206, 164)",
    name="Up Trend",
    customdata=df_green["PriceUSD"],
    text=text,
    hoverinfo="text"
)

I’ve created a list for the text and passed it to the text property. You can usually “debug” this kind of problem by printing out your figure (e.g. print(fig)). That way you see (almost) all properties set before it gets passed to the Graph object.

Here’s an example:

Figure({
    'data': [{'close': array([127.830002, 128.720001, 128.449997, ..., 135.020004, 135.509995,
                              135.350006]),
              'customdata': array([127.489998, 127.629997, 128.479996, ..., 133.470001, 135.520004,
                                   135.669998]),
              'high': array([128.880005, 128.779999, 129.029999, ..., 135.089996, 136.270004,
                             135.899994]),
              'hoverinfo': 'text',
              'low': array([126.919998, 127.449997, 128.330002, ..., 133.25    , 134.619995,
                            134.839996]),
              'open': array([127.489998, 127.629997, 128.479996, ..., 133.470001, 135.520004,
                             135.669998]),
              'text': [Price: 128.88, Price: 128.78, Price: 129.03, ..., Price:
                       135.09, Price: 136.27, Price: 135.90],
              'type': 'candlestick',
              'x': array(['2015-02-17', '2015-02-18', '2015-02-19', ..., '2017-02-14',
                          '2017-02-15', '2017-02-16'], dtype=object)}],
    'layout': {'template': '...'}
})

You can see the text property as a list already containing the information that should be displayed.

Edit: just to show what print(fig) looked like with your code (I’m using the data from the docs, Candlestick charts in Python):

Figure({
    'data': [{'close': array([127.830002, 128.720001, 128.449997, ..., 135.020004, 135.509995,
                              135.350006]),
              'customdata': array([127.489998, 127.629997, 128.479996, ..., 133.470001, 135.520004,
                                   135.669998]),
              'high': array([128.880005, 128.779999, 129.029999, ..., 135.089996, 136.270004,
                             135.899994]),
              'hoverinfo': 'text',
              'low': array([126.919998, 127.449997, 128.330002, ..., 133.25    , 134.619995,
                            134.839996]),
              'open': array([127.489998, 127.629997, 128.479996, ..., 133.470001, 135.520004,
                             135.669998]),
              'text': '%{customdata}',
              'type': 'candlestick',
              'x': array(['2015-02-17', '2015-02-18', '2015-02-19', ..., '2017-02-14',
                          '2017-02-15', '2017-02-16'], dtype=object)}],
    'layout': {'template': '...'}
})