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

KeitelDOG · Accepted Answer · 2023-02-28 19:23:10Z

1

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,
      },
    ],
  }}
/>

answered Feb 28, 2023 at 19:23

KeitelDOG

5,2604 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barto670 · Accepted Answer · 2024-04-03 21:56:26Z

1

Adding both of these works for min, max

'fromZero' sets the min to be 0

'fromNumber' sets the max, in my case this was 100

fromZero
fromNumber={100}

answered Apr 3, 2024 at 21:56

Barto670

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related