No Charts to Show

[fangjuncheng]

I used “npm install react-native-highcharts --save” and Getting Start; But there is no chart show on my app,it just return blank, No ERR report;（I use WebStorm to compile the react-native project for android） And when i move the mouse on the word "ChartView",the WebStorm tell me like this:

Default export is not declared in imported module

AND THERE IS MY CODE BELOW： 'use strict';

import React, {Component} from 'react' import ChartView from 'react-native-highcharts';

export default class Hcharts extends Component { render() { var Highcharts = 'Highcharts'; var conf = { chart: { type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function () {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.random();
                        series.addPoint([x, y], true, true);
                    }, 1000);
                }
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Random data',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }]
    };
    return (
        <ChartView style={{height: 300}} config={conf} />
    );
}

}

[fangjuncheng]

AND I found that the package in node_modules is not the same as it in github. Is there something wrong with npm package? @Infinity0106

[Infinity0106]

I ran the command and paste your code in one of my projects and it works correctly and the node_module is the same in npm, you could try downloading it from git instead of npm, let me know if you could fix it

[jonrh]

Bernardo beat me to it! I tried with the given code and WebStorm and it worked okay for iOS. I created a demo repository here if you're curious: react-native-highcharts-demo. I also compared the react-native-highcharts.js file to the one in GitHub and they are identical.

The Default export is not declared in imported module warning message in WebStorm is because you are importing with ES2015 module but react-native-highcharts.js in react-native-highcharts uses CommonJS syntax module.exports = ChartWeb; in line 123;

I'm not 100% sure on how this interop between ES2015 modules and CommonJS works but for some reason it's able to resolve it. Even when the class names are actually wrong! In the demo code for this repository it's ChartView but in the latest version the class name is actually ChartWeb.

This may be a material for a separate issue/PR, but is there a reason for this inconsistency? And is there a reason why CommonJS is used instead of ES2015 modules since they are natively supported by React Native?

@fangjuncheng Back to your issue. Just to make sure, do you have a "react-native-highcharts": "^1.0.0" line in your package.json file?

[jonrh]

@fangjuncheng Hi again! I was playing around in a new project and I ran into a similar problem. The issue that I ran into was when the chart component had a parent component with a flex style attribute. Then the chart rendered as empty.

[fangjuncheng]

@jonrh YES,you have a "react-native-highcharts": "^1.0.0" line in your package.json file. I use the component like THIS:--AND it did not work <+View style={{flex:1,...}} +> <Hcharts /+ > <View+> ---SO i should run the chart component had a parent component without a flex style attribute IF it works that use the component like THIS:? <+View style={{flex:1,...}} +> <View+><Hcharts /+ > <View+>

[jonrh]

I tested this a bit more and it seems it's not the flex that is causing the issue. Wrapping it in another <View> does not help either. The problem seems to be the alignItems style attribute on a parent component. The chart is displayed as empty when alignItems is flex-start, center, or flex-end but it works for stretch. Source for the <Hcharts /> component.

export default class RNHighchartsDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Begin</Text>
        <Hcharts />
        <Text>End</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center', // <- this seems to cause the issue
  }
});

With alignItems: 'center';:

Without:

At the moment I'm unfortunately not sure how to fix it. In my own app I don't have alignItems, didn't need it.

[fangjuncheng]

OK, Thanks!

[Pradeep119]

use another device. for android , htc is better