Open ASumIT2016 opened 5 years ago
import React, { Component } from 'react'; import { Container, Header, Content, Footer, FooterTab, Button, Text, Alert, Icon } from 'native-base'; import { Dimensions, StyleSheet, View, TouchableHighlight, StatusBar, TouchableOpacity, SafeAreaView, Image, ScrollView, Camera, ImageBackground } from 'react-native'; import { BarChart, Grid, XAxis } from 'react-native-svg-charts' import Styles from '../../Styles'; import * as scale from 'd3-scale'
import * as shape from 'd3-shape' export default class StackChart extends Component { static navigationOptions = {
title: "StackChart", headerBackTitle: " ", headerStyle: { backgroundColor: '#02b3b5', }, headerTintColor: '#ffffff', headerTitleStyle: { fontWeight: 'bold', } }; render() { const fill = 'rgb(0, 0, 0)' const data = [50, 10, 40, 95,] const yAxesSvg = { fontSize: 12, fill: "black" }; const verticalContentInset = { left: 10, right: 10, top: 10, bottom: 10 }; const xAxisHeight = 50; var dynamicWidth=500; const xAxesSvg = { fontSize: 12, fill: "black", rotation: 70, originY: 15, y: 10 }; var xAxisData = [{ xValue: 'A' }, { xValue: 'B' }, { xValue: 'C' }, { xValue: 'D' }, ] return ( <ScrollView horizontal={true} > <View style={{ height: 300, width: 600 }} > <BarChart style={{ height: 290, }} data={data} xAccessor={ ({ item }) => item.xValue } svg={{ fill }} contentInset={{ top: 30, bottom: 30 }} > <Grid /> </BarChart> <XAxis style={{ marginTop: 10, marginHorizontal: 10}} data={xAxisData} formatLabel={(value, index) => value} contentInset={{ left: 15, right: 15 }} labelStyle={{ color: '#02b3b5' }} /> </View> </ScrollView> ); }
}
Check out xAccessor
xAccessor
Your XAxis needs an xAccessor. You can copy it from your BarChart, I believe you want it the same.
import React, { Component } from 'react'; import { Container, Header, Content, Footer, FooterTab, Button, Text, Alert, Icon } from 'native-base'; import { Dimensions, StyleSheet, View, TouchableHighlight, StatusBar, TouchableOpacity, SafeAreaView, Image, ScrollView, Camera, ImageBackground } from 'react-native'; import { BarChart, Grid, XAxis } from 'react-native-svg-charts' import Styles from '../../Styles'; import * as scale from 'd3-scale'
import * as shape from 'd3-shape' export default class StackChart extends Component { static navigationOptions = {
}