react-plotly.js icon indicating copy to clipboard operation
react-plotly.js copied to clipboard

Ability to add div element next to chart

Open SaloniDesai opened this issue 6 years ago • 0 comments

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.

SaloniDesai avatar Nov 03 '18 04:11 SaloniDesai