Charts sometimes fail to render

[jenniferburch]

I have a very simple proof of concept type app that takes between 5 to 15 static chart definitions and renders them.

{ chartOptions.map((option, index) => (
  <React.Fragment key={ option.mykey }>
    <Text>{option.title.text}</Text>
    <HighchartsReactNative
      useCDN={false}
      styles={styles.chart}
      options={option}
      />
  </React.Fragment>
)) }

and chartOptions is just an array of options

chartOptions = [
  { mykey: 'k-line', title: { text: 'LINE' }, chart: { type: 'line' }, series: [dataB, dataC] },
  { mykey: 'k-column', title: { text: 'COLUMN' }, chart: { type: 'column' }, series: [dataB, dataC] },
  { mykey: 'k-pie', title: { text: 'PIE' }, chart: { type: 'pie' }, series: [dataA] },
...

the data objects are name-data pairs: { name: 'seriesname', data [ array of numbers ] }

Sometimes everything works fine and they all render but there are also times when not all of the charts render, and which charts fail is inconsistent. This happens most frequently in the iOS simulator but I've also reproduced the issue on the Android simulator and a connected iOS device.

There will be a yellow warning in the simulator that says "Possible Unhandled Promise Rejection" with something like : File 'file:///Users/jenb/Library/Developer/CoreSimulator/Devices/37B6F61D-FC65-4EE4-A0C5-C643FE4577DF/data/Containers/Data/Application/5F22450A-4DC4-4C8C-BA49-D4DDF505ABAC/Library/Caches/ExponentAsset-ffceb4b4585b380fc666d3882abee7e5.html' could not be read.

However when I navigate to that location that file is present.

Do you have any advice or a workaround? My project is using :

"@highcharts/highcharts-react-native": "^3.0.1", "react": "~16.11.0", "react-native": "~0.62.2", "react-native-webview": "^10.3.2"

[Denyllon]

Hi @jenniferburch ,

Thanks for reporting this issue. Would you be able to provide me with minimized project where the problem is reproducible in any way? I think I know wat could cause the problem, but the mentioned minimal example would be the most convenient way to find out what is happening.

Kind regards!

[jenniferburch]

@Denyllon here you go: https://github.com/jenniferburch/hello-charts

[sebastianbochan]

Hi @jenniferburch, Please let us know about your xCode version.

[jenniferburch]

@sebastianbochan , xCode is version 11.6 (11E708)

[sebastianbochan]

I will test it and get back to you, when reproduce the problem.

[jenniferburch]

FYI I found a workaround, just adding a small delay to stagger loading each chart fixed the problem in this example. I've updated https://github.com/jenniferburch/hello-charts in case it helps diagnose/fix the problem. (I did not exhaustively test how small the delay can be and still be effective)

[jj-julia]

I am having the same issue, with the same s "Possible Unhandled Promise Rejection" error.

[sebastianbochan]

I am having the same issue, with the same s "Possible Unhandled Promise Rejection" error.

We were able to reproduce the problem in the native React Native. Just working on solution of the problem.

[Denyllon]

Hi @jenniferburch, @jj-julia ,

The problem should be resolved in the latest package release. Now everything looks fine to us, and the problem is not reproducible. Could you update the package and let us know about the results?

Kind regards!

[jenniferburch]

Hi @Denyllon

Unfortunately results aren't good.

The Android version mostly loads but then sometimes crashes with this error: D:\scratch\hello-charts\node_modules\react-native\Libraries\Core\ExceptionsManager.js:173 Failed to fetch scripts or layout. /data/user/0/com.hellocharts/cache/ExponentAsset-1c895f04d5c8f8617130ca14d90dbf73.hcscript: open failed: ENOENT (No such file or directory)

The iOS version mostly crashes with a similar issue: console.error: Failed to fetch scripts or layout. File 'file:///Users/jenb/Library/Developer/CoreSimulator/Devices/37B6F61D-FC65-4EE4-A0C5-C643FE4577DF/data/Containers/Data/Application/7CF65DCD-C30B-48EB-9463-EEB52D0AFCF8/Library/Caches/ExponentAsset-6648d366b3c017be4175d291add46be1.hcscript' could not be read.

I've updated my github sample project. Results are just from running in the emulator, not on an actual device.

[sebastianbochan]

Do you have the proper metro.config.js file and metro-config package ?

https://github.com/highcharts/highcharts-react-native#installing

[Denyllon]

@jenniferburch Have you tried to follow the steps described in that issue? https://github.com/highcharts/highcharts-react-native/issues/91#issuecomment-676261777

I've not already added some informations into the documentation, but you can try to do it and necessarily let us know about the result.

Kind regards!

[jenniferburch]

@sebastianbochan and @Denyllon

I think the project is configured correctly, do you get different results ? https://github.com/jenniferburch/hello-charts

[julia-hitiq]

Hey @Denyllon It is working for me now with the changes. Thanks for that :)

I still have one outstanding issue: It doesn't work with a modified version of the wrapper i use, where i load the annotations module for highcharts (in the same way as all other modules), and the timezone feature (requiring the files moment.min.js and moment-timezone-with-data-2012-2022.min.js to be loaded after the highcharts script but before highcharts more).

Is this something that you could add to the wrapper? If you would like to know more about what i mean, or how I have previously implemented it, let me know (also happy to open a feature request)

Julia

[Denyllon]

Thank you @jenniferburch , I've just started debugging the problem. I will let you know about the result.

[Denyllon]

@julia-hitiq The annotiations module is not officially supported by this wrapper, and we do not have any ETA of when it will be added.

I suspect it does not work because the way of loading scripts has changed from v3.0.0, and the old implementation of getting scripts will no longer work here. I guess similar situation will appear when trying to load moment libraries. In order to make it work, I recommend you to read about Asset system here, especially about the downloadAsync function.

Kind regards!

[angeliqueIcono]

I still have an issue with this, it seems that in a scrollview some charts are not rendered but it's random... The webview is created but there is no chart rendered in it. And I don't have any errors or warnings.

I have "@highcharts/highcharts-react-native": "^3.1.2", "react-native-webview": "^10.8.0",

[Denyllon]

@angeliqueIcono We've tested the project created by @jenniferburch, and indeed the problem was noticeable there, but after creating the fix distributed in v3.1.2, this problem disappeared and was no longer reproducible.

It is always better and much convenient to us to work on real examples of issues, so could you prepare your own minimal repository/project and provide us with it so that we would be able to take a look on it?

[angeliqueIcono]

You can see on this project : some charts are rendered and some not https://github.com/angeliqueIcono/testReactNativeHighcharts.git

[Denyllon]

@angeliqueIcono Really apologize for not answering here for such a long time. I left the comment which explains complexity of the problem you encountered. Unfortunately, for now, we're not able to take steps to resolve the issue, and need to consider possible solutions.