In react-native-chart-kit, how to display the line chart with min-max values or "fromZero"?

Question

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,

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.
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 :)

score 0 · Answer 1 · answered Feb 28 '23 at 19:23

I can't find any feature yet that does this. But you can trick the system on the display:

Add 2 other objects in dataset, 1 for min, 1 for max
In each object, specify withDots: false to hide the single dot.

The code:

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

        strokeWidth: 2, // optional
      },
      {
        data: diastole,
        strokeWidth: 2, // optional
      },
      {
        data: [0], // minimum
        withDots: false,
      },
      {
        data: [1000], // maximum
        withDots: false,
      },
    ],
  }}
/>

In react-native-chart-kit, how to display the line chart with min-max values or "fromZero"?

1 Answers1