JesperLekland / react-native-svg-charts

📈 One library to rule all charts for React Native 📊
MIT License
2.36k stars 409 forks source link

How to set xAxis label? Below is my code please help me #389

Open ASumIT2016 opened 5 years ago

ASumIT2016 commented 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>

    );
}

}

shouse commented 5 years ago

Check out xAccessor

purplegamba commented 4 years ago

Your XAxis needs an xAccessor. You can copy it from your BarChart, I believe you want it the same.