如何在渲染图表时在React JS中的画布JS图表上添加功能？

Question

render(){
/*  const {chartData}=this.state;
    console.log(chartData[0]);*/

    const {quarter} =this.state;
    let finsclYearData = this.state.finsclYear.map(v => (
              <option value={v.id} key={v.id}>{v.name}</option>
            ));
    let quarterData="";

    if(quarter.length!=0){

     quarterData =quarter.map(v => (
              <option value={v.id} key={v.id}>{v.name}</option>
            ));

    }
    const chartData =[{
        animationEnabled: true,
        theme: "dark1",
        data:[{  
             type: "pie", 
            // showInLegend: "true",
            // legendText: "{label}",
             indexLabel: "{label}-{y}",
             indexLabelFontSize: 16,
             toolTipContent: "#percent%",

             //click: doCall(e),
             click: function(e){
                 this.changeChartData();

                   },
            // click: newdoCall,
                dataPoints:[  
                    { label: "sold",  y: 10  },
                    { label: "MinPrice", y: 15  },
                    { label: "MaxPrice", y: 25  },
                    { label: "AvgPrice",  y: 30  },
                    { label: "Revenue",  y: 28  }
                  ]

        }] 

},//end of one chardata
{
    animationEnabled: true,
    theme: "dark2",
    data:[{  
         type: "pie", 
        // showInLegend: "true",
        // legendText: "{label}",
         indexLabel: "{label}-{y}",
         indexLabelFontSize: 16,
         toolTipContent: "#percent%",

     //click: doCall(e),

    // click: newdoCall,
        dataPoints:[  
            { label: "sold",  y: 7  },
            { label: "MinPrice", y: 8  },
            { label: "MaxPrice", y: 9  },
            { label: "AvgPrice",  y: 6  },
            { label: "Revenue",  y: 5  }
          ]

}] 


}// end of 2nd chart data
]