Formatter function from the example not working

[mikesoko]

Hi, thank you for the amazing library. When I try your example I do not see tooltips rendering. If I take out the formatter function, the tooltips work fine.

react-native-echarts-pro【1.8.0】 react-native version【0.65.1】 react-native-webview 【11.17.2】 Platform【android】

I'm trying to understand if formatter functions are supported at all since you seem to be stripping them out in the toString function.

[supervons]

Do you opened hermes_enabled switch？

You can check in this path:

iOS：/ios/Podfile

Android：/android/app/build.gradle

We found if formatter use function type that not work in Hermes opened. https://github.com/supervons/react-native-echarts-pro/issues/35

You can use formatter for string:

formatter: '{value} kg'

See more：https://echarts.apache.org/en/option.html#grid.tooltip.formatte

We will follow up this issues, if you hava any information, please provide it.

[mikesoko]

Do you opened hermes_enabled switch？

You can check in this path:

iOS：/ios/Podfile

Android：/android/app/build.gradle

We found if formatter use function type that not work in Hermes opened. #35

You can use formatter for string:

formatter: '{value} kg'

See more：https://echarts.apache.org/en/option.html#grid.tooltip.formatte

We will follow up this issues, if you hava any information, please provide it.

Thank you for the info. Yes, I am using Hermes.

My problem with the string formatter is I need some custom date formatting that ECharts does not support.

I guess I can modify the echarts source code and regenerate echarts.min.js.

One question, how did you convert the echarts.min.js file to an ES6 module? Thank you!

[supervons]

You can download in this page: https://github.com/apache/echarts/tree/5.3.1/dist

Use ES6 export defualt

Then

use \\ replace \
use \` replace `

You can see this demo: Demo

In addition, I look forward to your PR.

[supervons]

You can reference https://github.com/supervons/react-native-echarts-pro/issues/35

[mthakkar815]

@supervons can you please guide which change in echarts.min.js can help to fix the formatter function https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.0/echarts.min.js

[supervons]

@mthakkar815 You can add line 'show source' in formatter function, like this:

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  axisLabel: {
    formatter: (value) => {
      'show source'; // Add this line.
      return value + '(week)';
    },
  },
}

See more: https://github.com/supervons/react-native-echarts-pro/issues/35

[mthakkar815]

@supervons it doesn't work with type: category same code you have provided and I'm using type: time - it doesn't work with that too.

xAxis: {
  show: true,
  type: 'time',
  axisLabel: {
    formatter: (value: any) => {
      'show source';
      const date = new Date(value);
      return period === '24h' ? `${date.toLocaleString('en-US', { hour: 'numeric', hour12: true })}` : '{d} {MMM}';
    },
  },
},

[keuvy]

I'm having this issue, when I first load the project it doesn't work, even with 'show source';

when i save any file e it refreshes it starts to work.

Any idea how to solve it?

[arlovip]

I'm having this issue, when I first load the project it doesn't work, even with 'show source';

when i save any file e it refreshes it starts to work.

Any idea how to solve it?

The same issue. Have you already fixed it or any other solution you know?