xAxis.axisLabel.formatter not working with functions

[RohanKhedekar21]

[tomLadder]

Hello @RohanKhedekar21

Can you provide me some example code to reproduce the problem?

[RohanKhedekar21]

option.xAxis[0].axisLabel.formatter = function (value) {
 console.log(value)
 return xAxisFormatter(value, chartValueAtFreq) 
};

actually function running but not returning anything i think its executing in separate memory space.... because of that its not accepting outside parameters and not working this type of code , but if i pass function directly without outside variable its working fine And for that problem i want to add all my functions inside one component or in file .

And one more thing i'm stuck in echarts is formatter function not working dynamically when i change option parameter i use setOption for set new option to echart but its not changing its old state but option properties was change only its not showing with new option parameter...

thanks in advance

[tomLadder]

ok @RohanKhedekar21 for the first problem you are right. You can't access your Javascript Functions declared in a component for example, because the webview has it's on environment. There is a property called additionalCode which allows you to inject your custom javascript code into the webview. But keep in mind that you can't access any variables or other methods that are declared in your normal react-native project. Please have a look at the more complex example. It should give you an overview how to handle the communication between the Webview JS Thread and the React-Native JS Thread --> https://github.com/tomLadder/react-native-echarts-wrapper#more-complex-example

Regarding your second problem, I don't really get what you mean.

[cloudychen]

anyway to use 3rd party libs like moment, lodash,etc to format values in formatter functions? can you give us an example @tomLadder

[KevinPFeng]

I also encountered the same problem, that is, the formatter cannot call third-party libraries, such as moment.@tomLadder

[RohanKhedekar21]

@tomLadder Thanks for replying on my issue Now i am sharing a details about my 2nd problem

System:
    OS: Windows 10 Home
    CPU: (4) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz 1.80GHz
    Memory:  8.00 GB
  Binaries:
    Node: 10.22.0
    npm: 6.14.6
  SDKs:
    Android SDK:
      API Levels: R
      Build Tools: 29.0.2
      System Images: Google Play Intel x86 Atom
  IDEs:
      Android Studio: Version 4.0.1
  npmPackages:
      react: 16.13.1
      react-native: 0.63.2      

What react-native-echarts-wrapper version are you using? ^2.0.0 What platform does your issue occur on?(Android/iOS/Both) Android(Have not tested on iOS as yet) Describe your issue as precisely as possible: 1.Steps to reproduce the issue or to explain in which case you get the issue When I start the application the Echart get Display with xAxis formatter set on initial state but when i change state xAxis formatter display with older state. Actually value changes when see it on log but not render with new state its display with older state.

App.js

import React, { useState } from 'react';
import {
  StyleSheet,
  View,
  Button
} from 'react-native';
import DisplayCharts from './src/component/History/DisplayCharts';

const App = () => {

  const [state, setState] = useState({
    chartType: '',
    selectedRadio: 'Daily'
  });

  const func = (chartType,graphType) => {
    console.log("App.js",chartType);
    setState((prevState) => {
      const newState = {
        ...prevState,
        selectedRadio: chartType,
        chartType: graphType,
      }
      return newState;
    })
  }
  
  return (
    <View style={styles.container}>
      <Button title="Bar-Monthly" onPress={() => {func("Monthly","bar")}}/>
      <Button title="Line-Hourly" onPress={() => {func("Hourly","line")}}/>
      
        <DisplayCharts 
          graphData={data}
          selectChartType = {state.chartType}
          selectedRadio={state.selectedRadio}
        />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    
  },
  chart: {
    flex: 1,
    margin: 10,
  },
  radioBody:{
    flex: 1,
    width: "100%",
    marginTop: 15,
    
  }
});

export default App;

const data = [
  {timeStamp: "2020-09-06 23:59:59", value: 727.4},
   {timeStamp: "2020-09-05 23:59:59", value: 726.85},
   {timeStamp: "2020-09-04 23:59:59", value: 725.39},
   {timeStamp: "2020-09-03 23:59:59", value: 724.89},
   {timeStamp: "2020-09-02 23:59:59", value: 723.31},
   {timeStamp: "2020-09-01 23:59:59", value: 722.59},
   {timeStamp: "2020-08-31 23:59:59", value: 720.08},
   {timeStamp: "2020-08-30 23:59:59", value: 719.51},
   {timeStamp: "2020-08-29 23:59:59", value: 717.46},
   {timeStamp: "2020-08-28 23:59:59", value: 716.49},
  {timeStamp: "2020-08-27 23:59:59", value: 714.07},
]

DisplayCharts.js

import React, { useRef } from "react";
import { View, StyleSheet } from "react-native";
import { ECharts } from "react-native-echarts-wrapper";

import { setChartOptions } from "./setChartOptions";

const FormatterOptionHourly = (value) => {
	var date = new Date(value);
	return date.getDate() + '-' + date.toLocaleString('default', { month: 'short' }) + ' ' + date.getHours() + ':00';
}

const FormatterOptionDaily = (value) => {
	var date = new Date(value);
	return date.getDate() + '-' + date.toLocaleString('default', { month: 'short' });
}

const FormatterOptionMonthly = (value) => {
	var date = new Date(value);
	return date.toLocaleString('default', { month: 'short' }) + '-' + date.getFullYear().toString().substr(-2);
}

const DisplayCharts = (props) => {
  const { graphData, selectChartType, selectedRadio } = props;
  console.log("props:",props);
  
  let option = setChartOptions();

  const chartRef = useRef(null);

  const setChartData = (chartData) => {

    if (selectChartType === "line") {
      option.series[0].type = "line";
    }
    if (selectChartType === "scatter") {
      option.series[0].type = "scatter";
    }
    if (selectChartType === "bar") {
      option.series[0].type = "bar";
    }

    option.title.show = true;

    option.title.text =
    selectedRadio === "Raw"
    ? selectedRadio + " " + "Data"
    : selectedRadio + " " + "Average";

    let formatterFunction = null

    switch (selectedRadio) {
        case 'Hourly':
            formatterFunction = FormatterOptionHourly
            break;
        case 'Daily':
            formatterFunction = FormatterOptionDaily
            break;
        case 'Monthly':
            formatterFunction = FormatterOptionMonthly
            break;
        default:
            break;

    }
    if(chartData.length > 0) {
      chartData.forEach((item) => {
        option.xAxis[0].data.unshift(item.timeStamp);
        
        option.xAxis[0].axisLabel.formatter = formatterFunction;

        option.series[0].data.unshift([item.timeStamp, item.value]);
      })

    }
    if(chartData.length === 0 ){
      option.title.subtext = "No data found";
    }
    
  }

  if(graphData.length === 0){
    setChartData([]);
  }else if (graphData.length > 0){
    setChartData(graphData);
  }

  if(chartRef.current){
    // console.log("option",option.xAxis[0].axisLabel.formatter);
    chartRef.current.setOption(option);
  }

  return (
    <View style={styles.container}>
      
      <ECharts option={option} ref={chartRef}/>
    
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF",
  },
  title: {
    marginTop: 10,
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
  },
});

export default DisplayCharts;

setChartOptions.js

import moment from "moment";
import { xAxisFormatter } from "./xAxisFormatter";

export const setChartOptions = () => {
    
    let option = {
        title: {
            show: false,
            textStyle: {
                paddingBottom: 10,
                fontSize: 20,
                fontWeight: "bold",
                textAlign: "center",
                color: "#686A6D",
                fontFamily: "Montserrat-Regular"
            },
            text: "",
            left: "center",
            top: '2%',
            subtext: "",
            subtextStyle: {
                color: "#f97b28",
                fontSize: 12,
                fontFamily: "Montserrat-Regular"
            },
        },
        legend: {
            show: false,
        },
        tooltip: {
            show: false
        },
        grid: [
            {
                left: '1%',
                top: '15%',
                right: '4%',
                bottom: '2%',
                containLabel: true
            }
        ],
        axisPointer: {
            link: { xAxisIndex: 'all' },
            label: {
                formatter: (params) => {
                    const dateString = params.seriesData[0].value[0]
                    const readingValue = params.seriesData[0].value[1]
                    const text = 'Time instance value is :  ' + dateString + ' Reading is : ' + readingValue
                    return (text)
                }
            },
            triggerTooltip: false
        },
        xAxis: [{
            gridIndex: 0,
            data: [],
            axisPointer: {
                show: true,
                snap: true
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#adadad'],
                    type: 'dashed'
                }
            },
            axisLabel: {
                formatter: function (value, index) {
                    console.log("setChartOptions");
                    return xAxisFormatter(value, moment(value).creationData().format)
                },
                
                fontFamily: "Montserrat-Regular"
            }
        }],
        yAxis: [
            {
                type: "value",
                axisPointer: {
                    show: false,
                    snap: true
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#adadad'],
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    fontFamily: "Montserrat-Regular"
                }
            }
        ],
        series: [{
            type: "bar",
            lineStyle: {
                color: '#f97b28',
                type: 'solid'
            },
            itemStyle: {
                color: '#f97b28',
                borderColor: '#f97b28'
            },
            data: [],
            // animation: true
        }],
        // animation: true
    }

    return option
}

Join a screenshot of the problem on the simulator or device ? Following is the image at start

Following is the image after state change

Following is the image of log

[tomLadder]

@RohanKhedekar21 Please also provide setChartOptions. I will have a look at it, if i have time.

[RohanKhedekar21]

@tomLadder as you said i'm added setChartOptions in my last commit. Please look at it as soon as possible. Thanks.

[abhaychitnis]

I am having the same issue. Any update on this ?

[RohanKhedekar21]

Still having this issue. Any update on this ...? @tomLadder