Chart width not working properly on Android

[nbasael]

Hi!

I have an issue with this library. When i need to show the chart it renders without any problem but sometimes it renders way beyond of the WebView container.

React Native version (no Expo): 0.61.4 Highcharts version: ^2.1.1

Expected:

The issue:

And the code is the following:

GraficoMedicion.js:

export default class GraficoMedicion extends React.Component {

    constructor(props) {
        super(props);
        this.state = configuracionRelojVoltaje();
    }

    render() {
        return (
            <View>
                <HighchartsReactNative
                    styles={styles.grafico}
                    options={this.state.chartOptions}
                    loader={true}
                />
            </View>
        );
    }
}

// This was just some quick coding, im going to change this in the future (hardcoded data)
function configuracionRelojVoltaje() {
    return (
        {
            chartOptions: {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: 'Site 1'
                },
                subtitle: {
                    text: 'Consumo energetico del site'
                },
                xAxis: {
                    categories: [
                        'Enero',
                        'Febrero',
                        'Marzo',
                        'Abril',
                        'Mayo',
                        'Junio',
                        'Julio',
                        'Agosto',
                        'Septiembre',
                        'Octubre',
                        'Noviembre',
                        'Diciembre'
                    ],
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'KWH',
                        align: 'high',
                        offset: 0,
                        rotation: 0,
                        y: -10
                    }
                },
                credits: null,
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Site 1',
                    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] 
                }],
                tooltip: {
                    enabled: true
                },
            }
        }
    )
}

const styles = StyleSheet.create({
    grafico: {
        height: 350,
        width: '100%',
    },
});

which is exported to:

PantallaKW.js:

export default class PantallaKW extends PureComponent {

    componentDidMount() {
        this._loadData()
    }

    _loadData = async () => {
        // Some data fetched from the server
    }

    render() {
        return (
            this.state.isLoading ? (

                // Here goes the loader component

            ): this.state.loadingError ? (
                // Here goes the error component
            ): (

                ...
                    <Card elevation = { 5} >
                        <Card.Title
                            title='Grafico de uso'
                            subtitle='Se mostraran los ultimos 12 meses'
                            left={(props) => <Avatar.Icon {...props} icon="chart-bar" />}
                        />
                        <Card.Content>
                            <GraficoMedicion /> <-- Chart goes here 👍 
                        </Card.Content>
                    </Card>
                ...
        )
    }
}

I dont know if im doing something wrong or if it is a bug, but when i change the code inside GraficoMedicion.js and hot reload the app the chart renders correctly. If you need more information i will be happy to give it! and sorry for my english, im not very good at yet.

Cheers!

[nbasael]

I made a .gif!

[sebastianbochan]

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

[nbasael]

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?

[sebastianbochan]

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.

[nbasael]

Only on Android, im not working on IOS in this moment. I will try to replicate the issue in another section

[nbasael]

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!

[nbasael]

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',
  },
});

[sebastianbochan]

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.

[nbasael]

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.

[sebastianbochan]

I apologize for my misunderstood.

Reopened the ticket.

[nbasael]

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!

[sebastianbochan]

@nbasael are you able to paste "a lot of data", because Im courios of effect and need to test it.