Customdata missing in hoverdata in Ploly 6.0.0

[Hermeij]

I have written an app in Python using Dash 2.18.2. In that app I have a map with a cycling track and several graphs to show distance vs. speed, distance vs. power etc. I have written an JS-script to show hover-info on the graphs when hovering over the map and vice versa. I use therefore 'customdata' that is encapsulated in the hoverdata. with this Dash code:

        customdata = np.stack((df0['Dist'], overall_focus, df0['Lons'], df0['Lats']), axis=1)
        hovertemplate=('Dist: %{customdata[0]:.1f}<br>'+
                      focus+': '+ '%{customdata[1]:.1f}<br>'+
                      '%{customdata[2]:.6f}<br>'+
                      '%{customdata[3]:.6f}<br>'+
                      '<extra></extra>')
       
    
        # Create the scatter map figure with plotly.express
        fig_trck = px.scatter_map(
            map_style=map_mode,
            center={'lat': center[1], 'lon': center[0]},
            zoom=zoom,
            lat=overall_lats,
            lon=overall_lons
        )
    
        # Update traces with custom data and styling
        fig_trck.update_traces(
            customdata=customdata,
            hovertemplate=hovertemplate,
            marker_size=3,
            marker_color=overall_focus,
            marker_colorscale='Rainbow',
            marker_showscale=False,
            line_width=2,
            line_color='Blue',
            mode=mode
        )

When I use Plotly 5.24.1 it gives this result in the DOM:
Object
points:Array(1)
0:
bbox:{x0: 894.0113118377704, x1: 896.0113118377704, y0: 354.0555201566335, y1: 356.0555201566335}
curveNumber: 0
customdata :( 4) [33519.2, 22.104, 4.507961, 51.843206]
lat:51.843206
lon:4.507961
pointIndex:4327
pointNumber:4327
[[Prototype]]:Object

when I use Plotly 6.0.0, I get this result:
Object
points : Array(1)
0:
bbox: {x0: 894.0113118377704, x1: 896.0113118377704, y0: 354.0555201566335, y1: 356.0555201566335}
curveNumber:0
customdata : undefined
lat:51.843206
lon:4.507961
pointIndex:4327
pointNumber:4327
[[Prototype]]: Object
length: 1

Can anyone explain this? Is it a bug or is customdata removed to another position in the DOM?

[dgibbon-plotly]

@Hermeij I can't help you with this question technically ... but I AM super intrigued wrt what you're looking to display -> specifically "cycling track and several graphs to show distance vs. speed, distance vs. power etc." ... Do you have any screenshots, animated gifs, video of that??

[Hermeij]

@dgibbon-plotly
Here is a link to a video I made for you:
https://1drv.ms/v/s!AuWRFk9aKH8Oi-QsAyQoccIL_PgWBA?e=WKaSVw

[jonasvdd]

Hi @gvwilson, @Hermeij – I've been experimenting with plotly6, and it seems that this issue occurs when customdata is not provided explicitly as a Python list. If customdata is passed as a numpy array or pandas Series instead (similar to how x and y trace properties are handled), the data gets base64-encoded, likely causing customdata to become undefined, hinting towards no consistent handling of encoded data across all trace-related properties!!.

When this is fixed, this should at least result in several tests (for other array-alike traces as well)!

(In my use-case, I tried to utilize the customdata of points during a clientside trace SelectedData callback)

📷 ⬇ ~ customdata when using list and plotly6.0.0

📷 ⬇ ~ customdata when using numpy array / pd.Series

[Hermeij]

@jonasvdd Thanks for your research into this issue. For now I will use an explicit list for customdata.

[emilykl]

@Hermeij Would you be able to provide a minimal code snippet which reproduces the issue you are seeing?

The code you provided gives a general idea, but the variables df0 and overall_focus are not defined within the code so I can't be sure what types they are.

I just merged a PR #7608 which might possibly resolve this issue and I'd like to verify.

[Hermeij]

@emilykl

This code gave at that time no customdata in hoverinfo. I see now that it is working correct with dash 3.2.0 and plotly 6.3.1

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Created on Wed Oct 29 15:38:38 2025

@author: herman
"""

import dash
from dash import dcc, html
import pandas as pd
import numpy as np
import plotly.graph_objects as go

# Sample data
df0 = pd.DataFrame([[100.0, 51.0, 4.5],
                    [150.0, 51.1, 4.1]],
                   columns=['Dist', 'Lons', 'Lats'])

# Prepare customdata for hovertemplate
customdata = np.stack((df0['Dist'], df0['Lons'], df0['Lats']), axis=1)


# Define hovertemplate
hovertemplate = (
    'Dist: %{customdata[0]:.1f}<br>' +
    'Lon: %{customdata[1]:.1f}<br>' +
    'Lat: %{customdata[2]:.6f}<br>' +
    '<extra></extra>'
)

# Create figure
fig = go.Figure(go.Scattermap(
    mode='lines+markers',
    lon=df0['Lons'],
    lat=df0['Lats'],
    customdata=customdata,
    hovertemplate=hovertemplate,
    line=dict(width=2, color='blue'),
    marker=dict(size=8, color='red')
))

# Set mapbox style and center
fig.update_layout(
    map=dict(
        style='open-street-map',
        center=dict(lat=df0['Lats'].mean(), lon=df0['Lons'].mean()),
        zoom=5
    ),
    margin=dict(l=0, r=0, t=0, b=0)
)

# Build Dash app
app = dash.Dash(__name__)
app.layout = html.Div([
    html.H4("Map with Line and Hovertemplate"),
    dcc.Graph(figure=fig)
])

if __name__ == '__main__':
    app.run(debug=True)

[emilykl]

Great news @Hermeij ! Looks good on my end as well.

I'm going to close this issue, but feel free to reopen if you encounter it again.