tomLadder / react-native-echarts-wrapper

📈Powerful React-Native ECharts Wrapper 📊
MIT License
177 stars 62 forks source link

Unable to update chart data using functional components #66

Open mati23 opened 3 years ago

mati23 commented 3 years ago

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>
rravithejareddy commented 1 year ago

As shown in the below complex example you need to send additionalCode as String and then use onData for callback.

link