Skip to content

Unable to update chart data using functional components #66

Open
@mati23

Description

@mati23

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions