Возможность добавить элемент div рядом с диаграммой с помощью plotly.js

Question

Я пытаюсь добавить внешний элемент div (Сводная панель) в правой части гистограммы, которую я реализовал с использованием response-plotly.js.

Элемент div будет всплывать рядом с диаграммой, когда на диаграмме запускается событие onClick. Панель будет отображать информацию, относящуюся к панели, по которой щелкнули Объект данных, на основе которого создается гистограмма:

const barData = [ {endTime: '', startTime: '', длительность: 6, initiatorUsername: 'abc', title: 'abc1', aTitle: 'Manager', результат: 'Success'}, {endTime: '1521203405', startTime: '1520389805', продолжительность: 7, initiatorUsername: 'defs', название: 'Senior Analyst', aTitle: 'Manager', результат: 'Failure'} ];

Я не видел ни одного такого примера или какой-либо документации, связанной с добавлением внешнего элемента div в диаграмму. Можно ли связать диаграмму с внешним элементом div? Я попытался реализовать это, выполнив следующее:

<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;
    }

Функция onClick вызывает функцию, но не отображает элемент div. Я попытался применить стили CSS к элементу, но ничего не работает. Во-первых, как мне сделать отображение панели на клике?

Альтернативное решение, которое приходит мне в голову, - сделать панель отдельным компонентом-родителем. В таком случае, как мне передать данные таким образом, чтобы в разделе описания отображалась информация, относящаяся к панели, по которой щелкнули?

class SummaryPanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: true
    };
  }
  render() {
    return (
            <div className='summaryPanel'>
                <Card
                    label='Summary panel'
                    heading=''
                    description=''
                    />
                <button type="button" className="close" data-dismiss="alert" aria-label="Close" onClick={() => this.hideAlert()}><span aria-hidden="true">&times;</span></button>
            </div>

    );
  }
}