plotly / plotly/react-plotly.js
Ability to add div element next to chart
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 138
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 4
Description
I would like to add a div element next to the bar chart I have implemented using react-plotly.js.
The div element would appear next to the chart when onClick event is fired on the chart. I haven't seen any such example or any documentation related to add external div element to the chart. Is it possible to link chart to the external div element ?
I did attempt to implement it by doing the following:
<Plot
data={this.prepData(timelineData)}
onClick={(data) => {
this.renderCustomPanel(data);
}
onHover={(hover) => this.getHoverInfo(hover)}
type={'bar'}
layout={layout}
style={{ width: '95%' }}
/>
renderCustomPanel(e) {
const panelInfo = timelineData.map(i => `<span className="panel-info">
<span className="tooltip-value" style='font-size:15px;display:block'>${i.duration} days <br> Start time: ${moment.unix(i.startTime).format('MMM-DD-YYYY h:mm:ss')} <br> End time:${moment.unix(i.endTime).format('MMM-DD-YYYY h:mm:ss')}</span></span>`);
return panelInfo;
}
The onClick function does call the function but doesn't display the div element. I did try applying css styles to the element but nothing works.
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
The issue only identifies a react-plotly.js component with onClick and onHover handlers; no repository files or tests are named. First determine whether external React elements are supported by the component, then inspect its event-handling documentation or entry points. Done would require a clearly documented or implemented way to display the requested element after a chart click.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100