Comments (16)
check if node_modules\@highcharts\HighchartsReactNative
exists
For mine, it is
node_modules\@highcharts\highcharts-react-native
So I change
import HighchartsReactNative from '@highcharts/HighchartsReactNative';
to
import HighchartsReactNative from '@highcharts/highcharts-react-native';
I don't know if it is an appropriate way to do, but no error right now.
from highcharts-react-native.
@fredpinon its not a good option, because the performance will not be good (destroy-chart and create new one is not always efficient. Its the last solutution, if others will fail). I will debug it and will let you know about results.
from highcharts-react-native.
The main repo is demo expo application, but if you need only Highcharts-react-native
package, you should clone only the dist
folder and then call npm install
or yarn
.
from highcharts-react-native.
+1
from highcharts-react-native.
I ran yarn add @highcharts/highcharts-react-native
in a react-native project and tried to run the below piece of code (which is the first example provided in the readme) and replaced the import with @highcharts/highcharts-react-native
as suggested above but nothing draws on the screen. However when cloning the beta-webview
branch and running the exact same piece of code I can see the chart.
How do you recommend adding this library to a RN project?
import React from 'react';
import {
StyleSheet,
View
} from 'react-native';
import HighchartsReactNative from '@highcharts/highcharts-react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
chartOptions: {
series: [{
data: [1, 3, 2]
}]
}
};
}
render() {
return (
<View>
<HighchartsReactNative
styles={styles.container}
options={this.state.chartOptions}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
justifyContent: 'center'
}
});
from highcharts-react-native.
@fredpinon I am also getting a blank chart.
Do you know what issue is the beta-webview
branch addressing? I am suddenly experiencing blank charts in another expo app that uses a different charting library. That app has been rendering charts properly for months.
from highcharts-react-native.
@fredpinon
I did not publish it in npm, so at this moment I recommend to download beta-webview
, and use package by import HighchartsReactNative from path/to/the/beta-webview
, like you mentioned.
from highcharts-react-native.
@sebastianbochan, thanks for getting back to me. I am doing what you described at the moment to test out the library, very happy with the performance, but I am struggling to update a chart, even when using the readme example shown under optimal way to update. Is it worth opening an issue for this or are you already aware of the problem. I hope to find out why this is happening and maybe open a pr. If you have an idea of when the current changes will be merged in master that would be great to know as well. Cheers! Fred
from highcharts-react-native.
@fredpinon
Hi Fred.
I have problem in updating the chart too.
The chart can be updated successfully using Math.random in the setInterval function in this.state.option, but I can't figure it out how to update the chart using data which is fetched from API.
May I know more about your issue?
from highcharts-react-native.
I was not aware of that, so thank you. Do you call chart.update()
with any specific options? Could you post it?
from highcharts-react-native.
@sebastianbochan, I simply copy pasted that example but pressing on the Chart update
button did not update it. This seems to be because the new chart options are never injected in the webview. The existing injectedJavaScript
prop only runs once when the page loads for the first time. Don't know if that's the best way to fix it but adding that piece of code in componentDidUpdate
did update the chart:
this.webView.injectJavaScript(
`Highcharts.chart("container", ${this.serialize(
this.props.options,
true,
)}); true;`,
);
Glad to open a pr. And possibly another one to add the possibility for the wrapper to accept optional onMessage
and onLoadEnd
props which it would pass to the WebView. Cheers, Fred
from highcharts-react-native.
The new version (2.0.2) has been already released and update works properly.
Im closing the ticket, but please reopen if any issues will come again.
from highcharts-react-native.
I got this error, I think there is nothing wrong in file path. I'm new to react-native is there anything do I need to take care? Help me resolve this.
from highcharts-react-native.
It is required to add the .hcscript
into the asset extensions section of metro.config.js file, or create that file within your project.
You can find more information about setup in our docs here: https://github.com/highcharts/highcharts-react-native#installing
from highcharts-react-native.
Sorry but you should explain better the copy & paste trick. Why is so difficult to show a Little file tree with the minimun requirements to render a chart? Here the oficial tutorial to render a Chart.. https://www.highcharts.com/blog/post/creating-mobile-charts-with-highcharts-react-native/ what a waste of time man.
"It is required to add the .hcscript into the asset extensions section of metro.config.js file, or create that file within your project"
I dont know what the heck that means I don't work for Highcharts neither I want to, just want to render a chart. Is that so dificult to understand?
Learn to write documentation properly o give up guys.
this const {getDefaultConfig} = require('metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig()
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
})
},
resolver: {
sourceExts,
assetExts: [...assetExts, 'hcscript']
}
}
})()
Where Im supposed to put this???
from highcharts-react-native.
@ManelGonzalez-ops I faced the same problem with HighCharts and it was really frustrating to see generic steps like the ones on the documentation page.
To fix the issue, just create a file named metro.config.js
in your project root folder and add the snippet mentioned on the documentation page , i.e. the following code into the file:
const {getDefaultConfig} = require('metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig()
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
})
},
resolver: {
sourceExts,
assetExts: [...assetExts, 'hcscript']
}
}
})()
Hope this helps!
from highcharts-react-native.
Related Issues (20)
- Chart is not rendering in Android with hermes enable in react native. HOT 1
- Unable to update series data. HOT 3
- HighChart- When I use useUTC: false then x axis data are not showing properly HOT 6
- onLoad callback function prop HOT 1
- Chart does not render on Samsung Galaxy S20 Ultimate LTE (Android 11)
- App is crashing when chart goes out of screen doing scroll. HOT 6
- ios - non-expo - Failed to fetch script or layout - hcsript count not be read HOT 7
- Boost Module Usage
- On IOS I can only render series with 110670 data points HOT 2
- How do I define custom gauges? HOT 4
- Customize chart loader HOT 3
- App is crashing when chart goes out of screen doing scroll in Android 10. HOT 5
- Library is being used and our app is live HOT 8
- Chart is not rendering after generating apk file and installed on mobile HOT 12
- Can it rotate 3d scatter chart? HOT 1
- Is there anyway to use this library in a project which is initialized by Expo & using Typescript template? HOT 6
- `plotOptions.series.point.events` (event) param doesn't work in production
- The styledMode tru gives only black and dark mode not working HOT 2
- Not able to access the variable inside the formatter
- no news on this package
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highcharts-react-native.