0

Hi Stack Overflow Community,

I am creating a react native mobile application using expo. I would like to display the line chart of user-entered data using the library "react-native-chart-kit". I need to display the line chart with the minimum & maximum values or from "Zero" in the Y-axis. My questions/blockers are,

  1. Is there any possible way to have minimum and maximum values of the Y-axis to display the line chart? I have tried the implementation in "https://stackoverflow.com/questions/65961180/react-native-chart-kit-min-and-max-value". It did not help me.

  2. I need to display the line chart from 0 (Y-axis). But if I use the prop "fromZero" of react-native-chart-kit, the data points and the line are displaying separately in Android. Below is the code snippet,

<LineChart
                data={{
                  labels: date,
                  datasets: [
                    {
                      data: systole,

                      strokeWidth: 2, // optional
                    },
                    {
                      data: diastole,
                      strokeWidth: 2, // optional
                    },
                  ],
                }}
                withShadow={false}
                width={Dimensions.get("window").width} // from react-native
                height={205}
                //yAxisLabel={"$"}

                chartConfig={{
                  //backgroundColor: '#e26a00',
                  backgroundGradientFrom: "white",
                  backgroundGradientTo: "white",

                  decimalPlaces: 2, // optional, defaults to 2dp
                  color: (opacity = 0) => `rgba(2, 34, 82, ${opacity})`,
                  style: {
                    borderRadius: 16,
                  },
                  useShadowColorFromDataSet: false,
                  propsForDots: {
                    r: "6",
                    strokeWidth: "2",
                    stroke: "#ffa726",
                  },
                }}
                withInnerLines={false}
                legend={["blut"]}
                bezier
                fromZero
                style={{
                  marginVertical: 5,
                  borderRadius: 16,
                }}
              />

Line Chart- Data points and line displaying seperately

Any helps will be appreciated :)

0 Answers0