Can't pull out customdata in hovertemplate

šŸ“Š Plotly Python
1

Iā€™d like to add data from other columns (ā€˜ProductionOrderā€™, ā€˜FInishDateā€™) into the hover label of my scatter plot.

import plotly.graph_objs as go

def PlotYield(df, title=''):

    #s = df['PercentYield'].std()
    #x = df['PercentYield'].mean()
    #y_max = df['PercentYield'].max()
    #y_min = df['PercentYield'].min()

    #if y_max < 100:
    #    y_max = 100
    #if y_min > 0:
    #    y_min = 0

    plot = go.Figure(
        data=[go.Scatter(
                x = df.index,
                y = df['PercentYield'],
                mode = 'lines+markers',
                line = {'color':'black'},
                customdata = [df['ProductionOrder'], df['FinishDate']],
                hovertemplate = '<br>'.join(['PercentYield: %{y:.1f}%',
                                    'PRO: %{customdata[0]}',
                                    'FinishDate: %{customdata[1]}'])
        )],
        layout={'template':'ygridoff+xgridoff',
                'title':title})

    #SPC(plot, mean=x, stdev=s,
    #   y_max=y_max, y_min=y_min)

    return plot

Unfortunately, the resulting label from the hovertemplate simply returns the string: '{%customdata[i]}'
From a similar question on this forum, I found that using 'fullData.customdata[i]' works to return the entire df[column] list, but I canā€™t seem to find a way to just return the relevant point.

image

Has anyone run into a similar issue or have a solution?

2

@Cashew

To get customdata displayed correctly, define it as follows:

customdata = np.stack( (df['ProductionOrder'], df['FinishDate']), axis=-1)
3 Likes
3

thank you! Is there somewhere I could read about why the data needs to be in this ā€œzippedā€ form?

4

@Cashew
This is the notebook b'Customdata for a few Plotly chart types | empet | Plotly' that explains how to define customdata for different casesā€¦
customdata[0], and customdata[1] must be columns in an array, and np.stack with axis=-1, inserts data of the corresponding data frame columns in column 0, resoectively column 1 of an array. Itā€™s a bit confusing, because in python customdata[i] suggests a row, not a column. I suspect that plotly.js interprets it as column.

3 Likes