search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.88k stars 1.85k forks source link

Clicks are sometimes missed with clickmode layout key #6898

Open willhuang1997 opened 7 months ago

willhuang1997 commented 7 months ago

Hi,

This is William Huang from the Streamlit Open Source team! I am currently attempting to provide selection on charts for the Streamlit st.plotly_chart api. I noticed there are on_select and on_click callbacks that we can register to. The on_click callbacks always register and that seems fine.

However, when I try to use the clickmode: “event+select” in the layout of the graph, clicks are sometimes missed. This can be replicated here: Plotly.js - JSFiddle - Code Playground or here: Plotly Playground - JSFiddle - Code Playground 1

Is there someone that can help me to understand why clicks are being missed? We are trying to release this feature within streamlit so any help would be appreciated!

I created a demo app here: https://chart-selections-demo.streamlit.app/ that uses this clickmode layout property. (FEEL FREE TO CHECK OUT :wink: )

alexcjohnson commented 7 months ago

Thanks @willhuang1997 - please note, plotly-latest is stuck on v1.x; to use v2.x you need to use an explicit version number. Can you update the fiddles to use v2.29.1? Is the behavior still buggy? If so, say more about exactly what you've observed - is there a specific sequence of clicks that consistently causes problems?

willhuang1997 commented 7 months ago

Hi @alexcjohnson , thanks for getting back to me!

I updated this fiddle to 2.29.1. The behavior is still buggy from my perspective.

What I expect: I click once I see the hover label and the bar should highlight. What I observe: I click once I see the hover label appear on the screen. The clicks inconsistently highlight the bar that is currently showing the hoverlabel.

When you see the label disappear, it means that I am clicking in this gif. Here is a gif to demonstrate such: Screen_Recording_2024-02-14_at_7 14 15 PM_V1

I have tried registering the onClick behavior with saving state within some react component as to what point as been clicked and that consistently works. However, I didn't understand how to change the color of the marker that is clicked with a developer that is using plotly.express while making everything else opaque. It's important from product perspective for the users to understand what has been selected through the graph so we started using the clickmode: "event+select" in order to get that highlighting through the plotly library. However, we noticed that clicks are inconsistent as can be seen in the gif above.

Lexachoc commented 6 months ago

@willhuang1997 Hi there, good demo app! I wonder if the full screen button in the upper right corner is the Streamlit feature or your customization for Plotly? image

BTW, I also noticed that a rangeslider bug in https://chart-selections-demo.streamlit.app/#selections-for-a-candlestick-chart and in your JSFiddle examples, that you might want to follow if you think it's relevant, see the issue I asked recently.

willhuang1997 commented 6 months ago

Hi @Lexachoc , the fullscreen button is a streamlit full screen button.

Also, thanks for letting me know the bug is there for candlestick charts!