How to load dynamic data to react-native-chart-kit StackedBar chart?

Question

i am trying to put stack bar chart for dynamic data and the number of rows in a data.data array will be varying. I am not able to see the out of the graph properly. Can someone tell whats wrong in this?

also i am not able to directly use state variable inside graph.

    const data = {
        "barColors": ["#dfe4ea", "#ced6e0"],
        "data": [["99378", "8032"], ["40704", "3895"]],
        "labels": ["01/10/2020", "10/10/2020"],
        "legend": ["AMOUNT", "TAX"]
    }
    
    const graphStyle = {
        marginVertical: 8
    }
    
    const chartConfig = {
        backgroundGradientFrom: "#1E2923",
        backgroundGradientFromOpacity: 0,
        backgroundGradientTo: "#08130D",
        backgroundGradientToOpacity: 0.5,
        color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
        strokeWidth: 2, // optional, default 3
        barPercentage: 0.5,
        useShadowColorFromDataset: false, // optional
        style: {
            borderRadius: 16
        },
    };
    
    <StackedBarChart
        style={graphStyle}
        data={data}
        width={devicewidth}
        height={height}
        chartConfig={chartConfig}
    />

chart is coming like below

Answer 1

Just change

const data = {
    "barColors": ["#dfe4ea", "#ced6e0"],
    "data": [["99378", "8032"], ["40704", "3895"]],
    "labels": ["01/10/2020", "10/10/2020"],
    "legend": ["AMOUNT", "TAX"]
}

to

const data = {
    "barColors": ["#dfe4ea", "#ced6e0"],
    "data": [[99378, 8032], [40704, 3895]],
    "labels": ["01/10/2020", "10/10/2020"],
    "legend": ["AMOUNT", "TAX"]
}

data props takes arrray of numbers, not strings.