Labels not displaying correctly

[karundawadi]

Hello, I am trying to display the labels in a responsive way however they do not display in full detail. I tried multiple solutions however none of them worked. Screen shot attached below:

Actual Code :

import React from 'react';
import {StyleSheet, View, Text, Alert, Image, TouchableHighlight, Switch, TextInput, Pressable} from 'react-native';
import {Ionicons} from '@expo/vector-icons';
import { useStore , useDispatch } from 'react-redux'; 
import { ScrollView } from 'react-native-gesture-handler';
import {ProgressChart} from "react-native-chart-kit";
import { Dimensions } from "react-native";

// This is to generate random color in rgba 
function random_rgba() {
    var o = Math.round, r = Math.random, s = 255;
    return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
}

// This screen is for financial details like piechart and others 
// Since different functions are used no longer need to balance the overall count for hooks 
function FinancialDetails(){
    const data = {
        labels: ["","Grocery", "Transportation", "Loodgin", "Fodding"], // optional
        data: [0,0.4, 0.6, 0.8,0.4],
        legendFontColor: 'black',
        legendFontSize: 12,
    };
    const screenWidth = Dimensions.get("window");
    const height = 256
    console.log(screenWidth)
    const chartConfig = {
        backgroundColor: "#000000",
        backgroundGradientFrom: "#000000",
        backgroundGradientTo: "#000000",
        color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
    };
    
    return <View style={styles.financialDetailsStyle}>
        <ScrollView>
            <Text
                style={{
                    ...styles.padding2,
                    ...styles.fontDetails
                }}
                >
                    Expenses so far</Text>
            <View style={{
                ...styles.tableFormat,
                ...styles.padding2,
                paddingTop:'2%',
                alignItems:'flex-start',
                justifyContent:'flex-start'
            }}>
                <Text style={{
                    ...styles.fontDetails,
                    flex:1
                }}>1</Text>

                <Text style={{
                    ...styles.fontDetails,
                    flex:1
                }}>2</Text>

                <Text style={{
                    ...styles.fontDetails,
                    flex:1
                }}>1</Text>

                <Text style={{
                    ...styles.fontDetails,
                    flex:1
                }}>2</Text>

            </View>
            
            <View style={{
                ...styles.padding2,
                ...styles.backgroundTheme
            }}>
                <Text style={{
                    ...styles.fontDetails
                }}>
                    Vizualized Data
                </Text>
                <View style={{
                    backgroundColor:'white',
                }}>
                    <ProgressChart
                        data={data}
                        width={screenWidth.width }
                        height={height}
                        strokeWidth={8}
                        radius={10}
                        chartConfig={chartConfig}
                        hideLegend={false}
                    />
                </View>

            </View>

        </ScrollView>
    </View>
}

const styles = StyleSheet.create({
    padding2:{
        paddingLeft:'2%',
    },
    fontDetails:{
        fontSize:16
    },
    backgroundTheme:{
        backgroundColor:'lightgreen',
    },
    tableFormat:{
        backgroundColor:'white',
        flexDirection:'row',

    },
    financialDetailsStyle :{
        flex:1,
        width:'100%',
        backgroundColor:'pink'
    }
})

export default FinancialDetails

[melissa07]

Have you managed to make it work ? I'm facing the same issue :(

[fukemy]

find other lib

[willianspraciano]

I don't know if it solves your problem, but you can subtract a few pixels from the ProgressChart width. For example:

<ProgressChart
  data={data}
  width={screenWidth - 40}
  height={220}
  strokeWidth={16}
  radius={32}
  hideLegend={false}
  chartConfig={chartConfig}
  withCustomBarColorFromData
/>