react-native-echarts-wrapper
react-native-echarts-wrapper copied to clipboard
Unable to update chart data using functional components
I'm using the new React Native functional components with hooks but I'm not able to update the data of the chart using the
this.chart.setOption(option);
on a state change event. I tried do a console log inside the additionalCode
parameter but the this
object is undefined. I don't know how to reference the echart object using RN Hooks, can someone help me out?
`const option = {
title: {
show:false,
text: 'Gráfico Radar'
},
tooltip: {},
legend: {
orient: 'horizontal',
position:'bottom',
left: 0,
bottom:0,
type:'scroll',
pageButtonPosition:'end',
data: chartColumnNameArray,
},
radar: {
radius:'70%',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: chartValueArray.map((item, index)=>{
return {name:chartColumnNameArray[index].toUpperCase().substring(0,5).concat('.'), max:maxValue}
})
},
series: [{
name: 'TEST',
type: 'radar',
data: radarChartData <------------------- //when this state changes I would setOptions and reload chart
}]
};
<View style={{display: visibleChart==="radarchart"?"flex":"none", width:'100%', height:'60%'}} >
<ECharts option={option} additionalCode={React.useEffect(()=>{this.chart.setOption(option)},[radarChartData])}/>
</View>
As shown in the below complex example you need to send additionalCode as String and then use onData for callback.