plotly / plotly/react-plotly.js
[Question] How to tell which point is clicked on when using onClick Event with multiple traces?
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 138
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 4
Description
I have setup a react application where I am using createPlotComponent to create an instance of an graph that I can interact with and I am controlling it using react-chart-editor
constructor() {
this.PlotComponent = createPlotComponent(plotly)
}
<this.PlotComponent
...data ,frames etc
onClick={(e) => {
console.log(e)
}}/>
The problem I am having is that when I have multiple traces on my graph, I want to determine which trace I am clicking. At the moment the event from onClick exposes the points (an array of all of the points clicked) and a MouseEvent which shows information about the point on the graph that is clicked. Is there any way to get specifically the information about the one point that is clicked on?
There might be a way to determine which point is clicked by using the mouse event and matching up the position of the mouse click on the graph with the position of the point on the graph. However, there doesn't seem to access the position of the points on the graph in terms of their coordinates
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the createPlotComponent usage and the onClick callback shown in the issue, then inspect the event.points array and MouseEvent produced for multiple traces. Determine whether the existing event data identifies the selected trace and point; done means documenting or exposing a reliable way to distinguish the clicked point.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100