Plotly scatterplot in Dash stops showing markers after 100 points plotted

I’m working on a project where I’m creating an interactive map by using a plotly.graph_objects.Figure object. The map is created by plotting an image and then adding a scatterplot to display different data points that can be clicked on. Everything is working as intended, however after displaying 100 data points, all remaining points turn invisible.

I have created a very simplified version of my code to illustrate the issue:

import numpy as np
import plotly.graph_objects as go
from dash import dcc
from jupyter_dash import JupyterDash

def generateMap():
    x = np.arange(0, 200)
    y = np.arange(0, 200)
    fig = go.Figure()
    scatter = go.Scatter(x=x, y=-y, mode = "markers", opacity = 1)
    scatter.marker.size = [10] * 100
    fig.layout.hovermode = "closest"  
    return fig

app = JupyterDash(__name__)

app.layout = html.Div([
    html.Div(dcc.Graph(figure = generateMap()))

app.run_server(mode = "inline", port = 8051)

This is what that code looks like:

As you can see, the markers are only drawn up to an x-coordinate of 100, similarly with y. This shouldn’t be happening though, since both of them are set up to plot until 200. These points do exist though, as if I hover above one of them, their coordinates are still displayed. I cannot use any plotting mode other than markers because drawing lines on a map only intended for clickable points is impractical.

Does anyone have an idea of how the missing points can be shown?

Hey @Bugfish,

Could you please change the line of code from:

scatter.marker.size = [10] * 100

to this:

scatter.marker.size = [10] * 200

I guess scatter.marker.size attribute autocompletes the remaining data points as size 0 as long as the given number of data points are less than actual number of data points you defined in your go.Scatter().

You can verify my guess by only seeing hover of your missing that but not themselves.

I also experiment with the below line of code for you. It turns out my guess was on point.

scatter.marker.size = [10] * 100 + [30] * 100

I am sure you can guess what kind of output we would get with it…

ta da…


This solves my problem, thank you so much!