Рисование шатра на ReCharts

Question

В настоящее время я работаю над проектом, который требует от меня использования пузырьковой диаграммы, в которой можно выбрать несколько пузырьковых элементов одновременно. Пользователь может выполнить выделение, нарисовав область (ограничивающую рамку) точно так же, как в диаграмме OJ Oracle. Но поскольку оракуловые диаграммы находятся на платформе Jet, я не мог использовать их в качестве компонента в своем React Project.

OJ Charts Marquee Selection

Ссылка на источник: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=bubbleChart&demo=selection

    import React, { Component } from 'react';
import { ScatterChart, Scatter, LabelList, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
              {x: 100, y: 200, z: 200},
              {x: 120, y: 100, z: 260},
              {x: 170, y: 300, z: 400},
              {x: 140, y: 250, z: 280},
              {x: 150, y: 400, z: 500},
              {x: 110, y: 280, z: 200}
];

class RechartBubble extends Component {
  render(){
    return(
      <div>
      <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <CartesianGrid />
          <XAxis dataKey={'x'} type="number" name='stature' unit='cm'/>
          <YAxis dataKey={'y'} type="number" name='weight' unit='kg'/>
          <Tooltip cursor={{strokeDasharray: '3 3'}}/>
          <Legend/>
          <Scatter name='A school' data={data} fill='#8884d8'/>
             <LabelList dataKey="x" position="center"/>
      </ScatterChart>

      </div>
    );
  }

Буду очень признателен за любые указания в этом направлении. Любая помощь с благодарностью!

Благодарю.