Comments (12)
I wasnt able to replicate this error in another section. I will start to rewrite the code and i will be in touch if i find something new. Thanks for your reply!
from highcharts-react-native.
I made a .gif!
from highcharts-react-native.
Have you tried to update to the newest version and apply webView styles?
https://github.com/highcharts/highcharts-react-native/blob/master/README.md#webviewStyles
from highcharts-react-native.
Have you tried to update to the newest version and apply webView styles?
https://github.com/highcharts/highcharts-react-native/blob/master/README.md#webviewStyles
Yes, i have the latest version and i already applied webView styles but the issue is still present.
Any other workaround?
from highcharts-react-native.
Does the problem happen in iOS or Android? Are you able to simplify your styles and paste here? I will try to reproduce it on my own test machine.
from highcharts-react-native.
Only on Android, im not working on IOS in this moment. I will try to replicate the issue in another section
from highcharts-react-native.
I've managed to do it in the React Native starter template
Here is the code:
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import HighchartsReactNative from '@highcharts/highcharts-react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
chartOptions: configTest
}
}
render(){
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
{/* Chart Here */}
<HighchartsReactNative
styles={styles.chartStyle}
options={this.state.chartOptions}
loader={true}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
}
}
const configTest = {
chart: {
type: 'column'
},
credits: null,
series: [{
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
}
const styles = StyleSheet.create({
chartStyle: {
height: 300,
width: '100%'
},
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
from highcharts-react-native.
Thank you for the feedback. It sounds good!
If you can, please create a PR with docs about your solution (FAQ section) or leave summarize of it here.
from highcharts-react-native.
Thank you for the feedback. It sounds good!
If you can, please create a PR with docs about your solution (FAQ section) or leave summarize of it here.
No, wait! Sorry for the misunderstanding, i've managed to replicate the error on the React Native starter template with the code above. I'm still working on this, but i need to advance in other sections too.
from highcharts-react-native.
I apologize for my misunderstood.
Reopened the ticket.
from highcharts-react-native.
Closing this issue. It seems when i display a chart with a lot of data it renders way beyond of the WebView container. With small amount of data we are not having any issue so we decided to do not go with large charts.
Hoping that this gets fixed in future updates, cheers!
from highcharts-react-native.
@nbasael are you able to paste "a lot of data", because Im courios of effect and need to test it.
from highcharts-react-native.
Related Issues (20)
- showing rangeSelector options HOT 1
- 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 5
- `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
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.