Help in displaying labels in Pie Chart

[KDLPro]

Question

Why does the labels doesn't get displayed in my pie chart? The chart is rendered properly though.

Background Info/Attempts

Relevant code snippet (also found in [https://github.com/KDLPro/Abaca-Fiber-Monitoring-Mobile-App/blob/main/app/(main_app)/(tabs)/database.jsx](this repository). Please reply if you want access to this repository.

import { View, Text, SafeAreaView, ScrollView, Dimensions } from 'react-native'
import { useEffect, useState } from "react"
import moment from "moment"
import { CartesianChart, Line, Pie, PolarChart } from "victory-native"
import { useFont } from "@shopify/react-native-skia"

import { useGlobalContext } from "../../../context/GlobalProvider"
import { getLastDatabaseUpdateTime } from "../../../lib/async"
import { colors } from "../../../constants"

export default function Database() {
    // Global provider values
    const { 
        fiberBreakdown_db, setFiberBreakdownDB, fibersScanned_db, setFibersScannedDB, fibersScanLogs_db, setFibersScanLogsDB, 
        systemStatus_db, setSystemStatusDB,
        colorScheme, setColorScheme 
    } = useGlobalContext();

    // Load fonts
    const Satoshi = useFont(require("../../../assets/fonts/Satoshi-Bold.otf"), 18);

    // Data for rendering charts
    const [handStrippedBreakdown, setHandStrppedBreakdown] = useState([]);
    const [spindleStrippedBreakdown, setSpindleStrppedBreakdown] = useState([]);

    // Get data to display the breakdown of abaca fibers scanned by grade
    useEffect(() => {
        try{
            const handStrippedGrades = ["EF", "S2", "S3", "I", "G", "H", "JK", "M1"];
            const spindleStrippedGrades = ["S-EF", "S-S2", "S-S3", "S-I", "S-G", "S-H", "S-JK", "S-M1"];
            const handFiberColors = ["#E3D3B5", "#F2EFDE", "#F0E1DB", "#FFE4C4", "#E8E4C9", "#5C4033", "#795947", "#332421"];
            const spindleFiberColors = ["#E3D3B5", "#F2EFDE", "#F0E1DB", "#FFE4C4", "#C89D7C", "#87633A", "#795947", "#2D2217"];

            const filteredHandStrippedArr = fiberBreakdown_db.filter((element) => handStrippedGrades.includes(element.fiber_grade));
            const filteredSpindleStrippedArr = fiberBreakdown_db.filter((element) => spindleStrippedGrades.includes(element.fiber_grade));

            const handDataArr = filteredHandStrippedArr.map((element)=> ({
                fiber_grade: element.fiber_grade,
                number_of_fibers: element.number_of_fibers,
                color: handFiberColors[handStrippedGrades.indexOf(element.fiber_grade)]
            }));

            const spindleDataArr = filteredSpindleStrippedArr.map((element)=> ({
                fiber_grade: element.fiber_grade,
                number_of_fibers: element.number_of_fibers,
                color: spindleFiberColors[spindleStrippedGrades.indexOf(element.fiber_grade)]
            }));

            setHandStrppedBreakdown(handDataArr);
            setSpindleStrppedBreakdown(spindleDataArr);
        } catch (error){
            console.error("Error fetching data.");
        }
    }, [fiberBreakdown_db])

    console.log(handStrippedBreakdown)

    return (
        <SafeAreaView className="bg-primary dark:bg-dark_primary-default h-full">
            <ScrollView>
                {!databaseError ? 
                    <View className="mb-2 mx-2 px-2">
                        <Text className="pt-2 text-base text-black-default dark:text-gray-50 font-smedium text-center">
                            Last update: {lastDatabaseUpdate}
                        </Text>

                        <View className="mt-4 px-4 py-2 bg-theme_green-100 dark:bg-theme_green-300 rounded-lg">
                            <Text className="mb-2 text-lg text-black-default dark:text-gray-50 font-sbold text-center">
                                Breakdown of Scanned Abaca Fibers
                            </Text>

                            <View className="h-60 px-4 py-2 bg-theme_green-200 dark:bg-theme_green-200 rounded-lg">
                                <Text className="mb-2 text-lg text-black-default dark:text-gray-50 font-sbold text-center">
                                    Hand-stripped Fibers
                                </Text>

                                {handStrippedBreakdown &&
                                    <PolarChart
                                        data={handStrippedBreakdown}
                                        labelKey={"fiber_grade"}
                                        valueKey={"number_of_fibers"}
                                        colorKey={"color"}
                                    >
                                        <Pie.Chart />
                                    </PolarChart>
                                }
                            </View>
                        </View>
                    </View> :
                    <View className="m-auto">
                        <Text className="text-xl text-gray-50 dark:text-black-default font-smedium text-center">
                            Unable to load database. Please check your network and try again.
                        </Text>
                    </View>
                }

            </ScrollView>
        </SafeAreaView>
    )
}

Sample data:

[{"color": "#5C4033", "fiber_grade": "H", "number_of_fibers": 40}, {"color": "#F0E1DB", "fiber_grade": "S3", "number_of_fibers": 40}, {"color": "#E8E4C9", "fiber_grade": "G", "number_of_fibers": 35}, {"color": "#795947", "fiber_grade": "JK", "number_of_fibers": 30}, {"color": "#332421", "fiber_grade": "M1", "number_of_fibers": 27}, {"color": "#F2EFDE", "fiber_grade": "S2", "number_of_fibers": 22}, {"color": "#E3D3B5", "fiber_grade": "EF", "number_of_fibers": 20}]

Relevant screenshot of result:

Your help is much appreciated. Thank you!

[zibs]

Hey there, the Pie chart does not yet support labels automatically: https://commerce.nearform.com/open-source/victory-native/docs/polar/pie/pie-charts

If you clone and run the example app in this repo however, you can see a few solutions of how to display labels with Pie/Donut charts.