How to set topLabelComponent in a stacked bar chart to visualize it correctly?

[HETALvp]

My stack chart component looks like below:

import { StyleSheet, Text, View } from 'react-native';
import {
    BarChart as GiftedBarChart,
    stackDataItem,
} from 'react-native-gifted-charts';

import { colorArray } from '@common/Utils';
import { fontStyles } from '@theme/AppFonts';
import AppColors from '@theme/AppColors';
import { mobileWidth } from '@utils/helper';

type StackBarChartProps = {
    labels: string[];
    series: {
        name: string;
        data: number[];
    }[];
};

const StackBarChart: FC<StackBarChartProps> = ({ labels, series }) => {
    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
    const stackData: stackDataItem[] = labels.map((label, labelIndex) => ({
        label,
        stacks: series.map((item, seriesIndex) => ({
            value: item.data[labelIndex] ?? 0,
            color: colorArray[seriesIndex % colorArray.length],
        })),
        topLabelComponent: () => {
            if (labelIndex === selectedIndex) {
                return (
                    <View style={{ backgroundColor: AppColors.chartPastel3, borderRadius: 10, zIndex: 20000, paddingHorizontal: 10 }}>
                        {series.map((item, index) => {
                            return <View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, }}>
                                <View style={{ height: 8, width: 8, borderRadius: 20, backgroundColor: colorArray[index % colorArray.length] }} />
                                <Text style={[fontStyles.font10Regular]} >{item.data[labelIndex] ?? 0}</Text>
                                {/* <Text style={[fontStyles.font10Regular]}>{item.name}</Text> */}
                            </View>
                        })}
                    </View>
                );
            }
            return <></>;
        },
    }));

    return (
        <View style={styles.container}>
            <GiftedBarChart
                stackData={stackData}
                isAnimated
                width={mobileWidth}
                barWidth={30}
                spacing={20}
                noOfSections={6}
                barBorderRadius={4}
                yAxisThickness={0}
                xAxisThickness={0}
                labelsDistanceFromXaxis={0}
                rulesType="solid"
                rulesLength={0}
                rulesColor={AppColors.grey300}
                xAxisTextNumberOfLines={2}
                xAxisLabelTextStyle={[
                    fontStyles.font10Regular,
                    { color: AppColors.grey700 },
                ]}
                yAxisTextStyle={[
                    fontStyles.font10Regular,
                    { color: AppColors.grey700 },
                ]}
                yAxisExtraHeight={selectedIndex !== null ? 100 : 50}
                onPress={(item, index) => {
                    setSelectedIndex(index);
                }}

            />

            <View style={styles.legendContainer}>
                {series.map((item, index) => (
                    <View key={item.name} style={styles.legendItem}>
                        <View
                            style={[
                                styles.legendColor,
                                {
                                    backgroundColor:
                                        colorArray[index % colorArray.length],
                                },
                            ]}
                        />
                        <Text
                            style={[
                                fontStyles.font10Regular,
                                { color: AppColors.grey700 },
                            ]}>
                            {item.name}
                        </Text>
                    </View>
                ))}
            </View>
        </View>
    );
};

i am getting a stackbar with tooltip as below.

how can i align it properly and how to hide it when the user taps anywhere else in the chart except stackbar?

[Abhinandan-Kushwaha]

Try using props like focusBarOnPress or renderTooltip

[HETALvp]

Thanks @Abhinandan-Kushwaha i tried adjusting with renderTooltip and focusBarOnPress, but i am still stuck to display entire tooltip.

The data label is getting clipped at the top of the chart. I tried increasing yAxisExtraHeight, but it adds a significant amount of unnecessary empty space. I also attempted to adjust it dynamically using state (yAxisExtraHeight={selectedIndex !== null ? 100 : 50}), but that results in a noticeable UI lag. As an alternative, I'm considering displaying the selected value on the side of the chart, similar to the design shown in the image below.