CODEWITHSUNDEEP
androidchartsreact-native
Sarvesh
Sarvesh

Reputation: 11

Charts not getting displayed with react-native-chart-android

I am trying to use the react-native-chart-android library for including charts in my android app.

I installed the module successfully and went through the provided examples as is. Everything went fine without errors but the graphs are not getting rendered somehow.

I am trying out the LineChart (which is itself in a separate View) within a ScrollView along with ToolbarAndroid and one more View on the same level on RN 0.20. Do let me know if I am missing something.

Thanks in advance.. :)

PS: Code snippet for reference (removed the trivial parts of the code for better visualisation)

import {
  LineChart
} from 'react-native-chart-android';

class Dashboard extends Component {
  render() {
    return (
      <ScrollView style={styles.scrollView}>
          <ToolbarAndroid ... />
          <View style={styles.container}>
              ...
          </View>
          <View style={styles.chartContainer}>
              <LineChart style={{flex:1}} data={this.getLineData()}/>
              <LineChart 
              style={{flex:1}} 
              data={this.getRandomData()}
              visibleXRange={[0,30]}
              maxVisibleValueCount={50} 
                  xAxis={{drawGridLines:false,gridLineWidth:1,position:"BOTTOM"}}
                  yAxisRight={{enable:false}} 
                  yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART"}}
                  drawGridBackground={false}
                  backgroundColor={"BLACK"} 
                  description={"description"}
                  legend={{enable:true,position:'ABOVE_CHART_LEFT',direction:"LEFT_TO_RIGHT"}} />
          </View>
          <Text style={styles.description}>{this.state.message}</Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF'
  },
  scrollView: {
    flex: 1
  },
  chartContainer: {
    flex: 1
  }
});

Upvotes: 1

Views: 1367

Answers (1)

Vikky
Vikky

Reputation: 770

I had same problem, my conclusion was that ScrollView renders only children with height and width. Although you set flex:1 around charts, I think they are larger then ScrollView and that's why they are not visible inside of ScrollView. I've set height and width to my charts, and gave them min and max Y -> if you set flag startAtZero:false you should set axisMinValue and axisMaxValue. For example: yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART", axisMinValue: 20, axisMaxValue: 500}}

And for charts try to set custom width and height:

  chartContainer: {
    flex: 1,
    height: 500, //any value you want
    width: 500 //any value you want
  }

I've set half of device height and full width with Dimensions:

import { Dimensions } from 'react-native';
var {height, width} = Dimensions.get('window');

chartContainer: {
        flex: 1,
        height: height/2, 
        width: width
      }

And after that my charts are visible inside of ScrollView!

Hope it helps! :)

Upvotes: 1

Related Questions