Chart Not Rendering on iOS and Android

[userkpkpuser]

Hi Team, when we tried to run the sample example provided in Readme file, but the charts are not rendering and there is no error also.

[mrinal-roy]

I am getting this error: **Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_FILE_NOT_FOUND", "loading": false, "target": 18623, "title": "", "url": "file:///android_asset/highcharts-layout/index.html"}**

I am running RN 0.61.5 with android emulator. Please tell me which files to add and where?

[oillada]

Same issues here, any help?

[georgeCts]

I am getting this error: **Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_FILE_NOT_FOUND", "loading": false, "target": 18623, "title": "", "url": "file:///android_asset/highcharts-layout/index.html"}**

I am running RN 0.61.5 with android emulator. Please tell me which files to add and where?

Same issue :(

[nerami]

@sebastianbochan Android 9.0, compiler compileSdkVersion = 28

Finally get it done.

Blank page or page showing html text are basically due to wrong path or Android debug mode problem. I tried to put a website URL into source, it displayed normally. Therefore, the WebView module should work fine.

Main Problem: I think it is not possible to put local html file into WebView source in Android debug mode. Also, the source for WebView uses require() which I think it is for IOS. uri:... should be used for Android. Using require() gives blank page and using uri:... gives html text in Android virtual device.

My Solution:

1. Change the source to source = {(Platform.OS == 'ios') ? require('../highcharts-layout/index.html') : { uri: 'file:///android_asset/highcharts-layout/index.html' }}

This changes the source path of the local files based on the platforms. Remember to import 'Platform' from 'react native'

1. Put the files (i.e. Folder: highcharts-layout and highcharts-files) to android/app/src/main/assets and /ios
2. Use release mode instead of debug mode i.e. run react-native run-android --variant=release

Hope it helps.

This worked for me! Thanks!

[mustapha-khan]

I am getting this error: **Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_FILE_NOT_FOUND", "loading": false, "target": 18623, "title": "", "url": "file:///android_asset/highcharts-layout/index.html"}** I am running RN 0.61.5 with android emulator. Please tell me which files to add and where?

Same issue :(

i am having similar issue on using highchart in EXPO application . getting the error on running app on emulator or physical device : ERR_FILE_NOT_FOUND

the issue seems to be in the source provided to webView in highcharts react native wrapper . i.e: source={highchartsLayout}

I solved it by using expo-asset-utils to convert my required file into asset in componentdidmount() and used the uri of this asset as source of webView so that my modified HighchartsReactNative.js file looks like :

async componentDidMount() { try { const asset = await AssetUtils.resolveAsync(require('../highcharts-layout/index.html')); this.setState({ asset }); console.log("=- -= CHEK ASSET -= = ", asset) } catch (error) { console.log({ error }); } Dimensions.addEventListener('change', this.onRotate); }

and in webview using source as :

source={{uri:this.state.asset.localUri}}

using the uri of asset didn't work for me hence using loacalUri

try this and it might help you

[sebastianbochan]

Thank you for the suggestion. Will test it.

[sebastianbochan]

@mustapha-khan could you share your simplified working project? When I run the Expo SDK 64, was not able to run it properly in Android.

[horstleung]

@sebastianbochan I've init a new rn project with the following package.json

  "name": "highcharts",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@highcharts/highcharts-react-native": "^2.0.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-webview": "^7.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/runtime": "^7.7.4",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.7.2",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Then I receive some error messages in terminal:

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts

After that, I added 'css', 'js to metro as following:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config')

module.exports = (async () => {
  const {
      resolver: { assetExts },
  } = await getDefaultConfig()
  console.log(assetExts)
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
              },
          }),
      },
      resolver: {
          assetExts: [...assetExts, 'css', 'js'],
      },
  }
})()

Finally I got this:

Am I missing any installation step?

I get it work after changing the metro config file into

module.exports = (async () => {
  const {
      resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
              },
          }),
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'css'],
      },
  }
})()

[sebastianbochan]

Big thanks for the hint. Will share it with our users to be ensure that it worked.

[ChenRaul]

@sebastianbochan Except for yours Highcharts, actually, that's what you're talking about with using react-native-webview,when the html file import other JS files which will hint xxxx.js cannot be loaded as its extension is not registered in assetExts.if I add ‘js’ into assetExts while it didn't work. So do you have any other solutions? thanks.

Environment OS: iPhone OS version: "react": "16.11.0", "react-native": "0.62.2", react-native-webview : 8.0.0;

[samimhakimi]

platforms

How to implement this could you please explain it?

[sebastianbochan]

We are wokring on that and debugging the problem. Can be related with new versions of modules.

Thankfully, we are able to reproduce the problem.

I will inform you about progress, when find a reason of issue.

[walidbezzaoui]

any progress on this ?

[horstleung]

any progress on this ?

3.0 fixed this issue. But 3.0 got another problem with iOS, here is the [hotfix].(https://github.com/highcharts/highcharts-react-native/issues/104#issuecomment-708394718).

[ManelGonzalez-ops]

There's not even a working example on the internet with this thing working... hilarious

[DamanSoftRadixx]

If any one try to Implement HIChartView in flutter with native code with the help of ( implement class with PlatformView) in flutter . Then make sure during make instance of HIChartView give them layout and background color to HIChartView if background color missing then view not rendered and it will not showing error in log .