Using function for the tooltip.formatter parameter

[abhaychitnis]

I am using React v16.0.0 and echarts-for-react 2.0.0.

I am having problems in using function inside tooltip.formatter. I get following error

My option object looks like this.

            title: {
                text: 'Time Line'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    const param = params[0];
                    const date = new Date(param.name);
                    return (date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + param.value[1])   
                },

                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: 'Test Series',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: ''
            }]

The problem remain if I use an arrow function like this :

                formatter: (params) => {
                    const param = params[0];
                    const date = new Date(param.name);
                    return (date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + param.value[1])   

                },

I get a message like this:

What am I doing wrong ?

[SidKwok]

I think this issue is caused by your configuration files like .babelrc and webpack.config.js. Use create-react-app to test your option.

[abhaychitnis]

This app was created using create-react-app

[SidKwok]

But I can't see any error with your option using create-react-app.

[abhaychitnis]

I have other functionalities (not related to echarts ) in the same app using in-line functions as well as arrow functions. These work fine.

[hustcc]

@abhaychitnis whether the issue has been fixed?

[abhaychitnis]

No the issue is not fixed. There is workaround available. I am using an external function instead of in-line function as follows:

  formatFunction = (params) => {
    const param = params[0];
    var date = new Date(param.value[0]);
    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + param.value[1];
 }

I am using this external function to set the formatter parameter as follows : option.tooltip.formatter = this.formatFunction; This workaround works

[hustcc]

formatter: function (params) {
                    const param = params[0];
                    const date = new Date(param.name);
                    return (date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + param.value[1])   

                },

Can it be available by writing it with es5 style, if can, maybe the problem of config be babel.

[abhaychitnis]

Yes this works.

[hustcc]

So check your webpack, babel config.

[EfkanKnz]

If you want to use arrow function, try like this:

chartOption: EChartOption = {
  tooltip: {
    trigger: 'item',
    formatter: (params => {
      console.log('params: ', params);
      return params['value'][1];
    })
  },
  ...
};

It works fine for me