Dynamic Height issue

[omairnabiel]

Description

I'm trying to fit the chart height into a View but it's exceeding the height of the View which causes it to render differently on different screens. How can I provide it a dynamic height so that it fits into the frame of View.

import { Ionicons } from "@expo/vector-icons";
import { Dimensions, Text, TouchableOpacity, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { LineChart } from "react-native-gifted-charts";

const data = [
    {
        date: new Date(1625945400000),
        value: 23343.05,
    },
    {
        date: new Date(1625946300000),
        value: 33545.25,
    },
    {
        date: new Date(1625947200000),
        value: 33510.25,
    },
    {
        date: new Date(1625948100000),
        value: 33215.25,
    },
];

const previousData = [
    {
        date: new Date(1625945400000),
        value: 33215.05,
    },
    {
        date: new Date(1625946300000),
        value: 33510.25,
    },
    {
        date: new Date(1625947200000),
        value: 33545.25,
    },
    {
        date: new Date(1625948100000),
        value: 23343.25,
    },
];

const SCREEN_WIDTH = Dimensions.get("window").width;
export default function SalesSummary() {
    return (
        <GestureHandlerRootView>
            <View className="bg-yellow-300 h-[60%] rounded-b-xl relative pt-12">
                <View className="p-4 flex-row justify-between">
                    <Text className="font-bold text-xl">Sales</Text>
                    <TouchableOpacity className="h-8 w-8 shadow-sm items-center justify-center rounded-full bg-white">
                        <Ionicons size={20} name="time-outline" />
                    </TouchableOpacity>
                </View>

                <View className="p-4">
                    <Text className="font-bold text-xl">R 2135.20</Text>
                    <View className="flex-row items-center mt-1">
                        <Text>Gross Sale</Text>
                        <View className="bg-yellow-200 px-2 rounded-xl ml-2">
                            <Text className="text-xs text-red-500">R -42.3</Text>
                        </View>
                    </View>

                    <View className="mt-4">
                        <View className="flex-row justify-between">
                            <View>
                                <Text className="font-bold text-xl">12</Text>
                                <View className="flex-row items-center mt-1">
                                    <Text>No. of Sales</Text>
                                    <View className="bg-yellow-200 px-2 rounded-xl ml-2">
                                        <Text className="text-xs text-red-500">R -42.3</Text>
                                    </View>
                                </View>
                            </View>
                            <View>
                                <Text className="font-bold text-xl">R 123.30</Text>
                                <View className="flex-row items-center mt-1">
                                    <Text>Avg. Sale</Text>
                                    <View className="bg-yellow-200 px-2 rounded-xl ml-2">
                                        <Text className="text-xs text-red-500">R -42.3</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
                <View className="mt-2 w-full ml-0">
                    <LineChart
                        disableScroll
                        width={SCREEN_WIDTH}
                        isAnimated
                        areaChart
                        curved
                        hideDataPoints
                        hideAxesAndRules
                        color="#d64c1a"
                        color2="#24a5a7"
                        data={data}
                        data2={previousData}
                        thickness={5}
                        thickness2={3}
                        startFillColor="#fde047"
                        startFillColor2="#1d8384"
                        startOpacity={0.8}
                        startOpacity2={0.4}
                        endFillColor="rgb(255, 245, 145)"
                        endFillColor2="#6ed0d1"
                        endOpacity={0.3}
                        initialSpacing={0}
                        yAxisColor="#d64c1a"
                        rulesType="solid"
                        rulesColor="#d64c1a"
                        yAxisTextStyle={{ color: "#d64c1a" }}
                        yAxisLabelWidth={0}
                        xAxisColor="#d64c1a"
                        pointerConfig={{
                            pointerStripColor: "#d64c1a",
                            pointerStripWidth: 2,
                            stripBehindBars: true,
                            pointerColor: "#d64c1a",
                            pointer2Color: "#24a5a7",
                            radius: 6,
                            pointerLabelWidth: 100,
                            activatePointersOnLongPress: true,
                            autoAdjustPointerLabelPosition: false,
                            pointerLabelComponent: (items) => {
                                console.log("Items ===", items);
                                return (
                                    <View>
                                        <View
                                            style={{ marginTop: 65 }}
                                            className="px-2 py-1 rounded-xl bg-[#d64c1a]"
                                        >
                                            <Text className="text-white text-[10px] font-bold text-center">
                                                {`R ${items[0].value.toFixed(2)}`}
                                            </Text>
                                        </View>

                                        <View
                                            style={{ marginTop: 35 }}
                                            className="px-2 py-1 rounded-xl bg-[#24a5a7]"
                                        >
                                            <Text className="text-white text-[10px] font-bold text-center">
                                                {`R ${items[1].value.toFixed(2)}`}
                                            </Text>
                                        </View>
                                    </View>
                                );
                            },
                        }}
                    />
                </View>
            </View>
        </GestureHandlerRootView>
    );
}

Steps to reproduce

Snack or a link to a repository

No response

version of react-native-gifted-charts

15.2.0

React Native version

0.74.5

Platforms

Android, iOS, Web

Workflow

None

[Abhinandan-Kushwaha]

@omairnabiel The chart should have a fixed height, not dynamic. Because changing the height of the chart will change its shape. You should try to adjust other content’s heights and margins instead of trying to adjust the chart’s height.

From your screenshot I can see there’s a lot of extra space below the curves in the Line charts. You can get rid of the extra space below by using the yAxisOffset prop.