Feature Request - Triggering FocusOnPress for a specific section of Pie Chart by clicking on Label.

[swapnil-sudhir]

So I am checking if there is a way we can bind the pie chart sections with the labels.. I was able to bind it in a way that if I click on section, the label is expanded, but i want to achieve the vice versa as well, like if i click on label, i am hoping to trigger focusOnPress for that index in pie chart..

Code currently i am using is below -

`const PieChartComponent: React.FC = ({
data,
donut = false,
radius = 100,
showText = true,
textSize = 14,
focusOnPress = true,
}) => {
const [selected, setSelected] = useState<number | null>(null);

useEffect(() => {
    console.log('Selected:', selected);
}, [selected]);

const renderDot = useCallback((color: string) => {
    return <View style={[PieChartStyles.dot, { backgroundColor: color }]} />;
}, []);

const removeUnderScores = useCallback((text: string) => {
    return text.replace(/_/g, ' ');
}, []);

const handleComponentPress = useCallback((index: number) => {
    setSelected(index);
}, []);

const renderLegendComponent = useCallback((data: PieChartData[]) => {
    return (
        <View style={PieChartStyles.legendContainer}>
            {data.map((item, index) => {
                const isSelected = selected === index;
                return (
                    <Pressable
                        key={index}
                        onPressIn={(event: GestureResponderEvent) => handleComponentPress(index)}
                        style={[
                            PieChartStyles.legendItem,
                            isSelected && PieChartStyles.expandedLegendItem,
                            { backgroundColor: item.backgroundColor },
                        ]}
                    >
                        {renderDot(item.color)}
                        <Text style={[PieChartStyles.legendText, { color: item.color }]}>
                            {removeUnderScores(item.text)}
                        </Text>
                    </Pressable>
                );
            })}
        </View>
    );
}, [selected, renderDot, removeUnderScores, handleComponentPress]);

return (
    <View style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
        <PieChart
            focusOnPress={focusOnPress}
            // toggleFocusOnPress={true}
            onPress={(event: GestureResponderEvent, index: number) => handleComponentPress(index)}
            donut={donut}
            data={data}
            radius={radius}
            // selectedIndex={selected !== null ? selected : -2}
            // setSelectedIndex={setSelected}
        />
        {renderLegendComponent(data)}
    </View>
);

};`

Any help will be appreciated.

[Abhinandan-Kushwaha]

Hi @swapnil-sudhir 👋
Thanks for requesting this feature.

I have added a new prop named focusedPieIndex available from version 1.4.16 onwards. 🎉

In your above example, you just need to pass the prop focusedPieIndex = {selected} and your requirement will be fulfilled.
Please use the latest version of the library.