react-native-chart-kit Min and Max value

Question

I really like how neat react-native-chart-kit is, however I am having a problem with how it display the data.

it use the lowest point in your data as the as the bottom and the highest as the top. There is an option to start from zero, but what if I wanted to start from 5? the same for the top, what If I wanted to display a range of 5to 90?

I was wondering if someone knew more about this graph or have used something else that can do these things?

Thanks

score 8 · Accepted Answer · answered May 05 '21 at 20:35

8

Add extra datasets with one value each (the min and max value you want to show)

<LineChart
    data={{
        datasets: [
          {
            data: [3, 4, 5, 6, 7] // dataset
          },
          {
            data: [1] // min
          },
          {
            data: [10] // max
          },
        ],
      }}
/>

answered May 05 '21 at 20:35

user15696556

96
1
2

5

Doesn't this show these as actual data points on the graph? – ryanwebjackson May 06 '21 at 00:36
Just add `withDots: false` as Essam's answer suggested. – KeitelDOG Feb 28 '23 at 19:24

Essam Faraj · Answer 2 · 2021-11-08T11:38:49.233

4

I added a new data set with one value which is the height value I wanted it to be shown on the graph, and I give it a property withDots: false to hide the dot and it's working very fine now.

here is the code I've used...

datasets: [
        {
          data: [20, 50, 79], // my graph data
        },
        {
          data: [200], //highest graph value
          withDots: false, //a flage to make it hidden
        },
      ],

edited Nov 08 '21 at 11:38

answered Nov 03 '21 at 12:38

Essam Faraj

41
2

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 03 '21 at 12:51

5eb · Answer 3 · 2021-01-30T23:28:15.190

A workaround is to do the following things:

Use the fromZero prop on the chart;
Use a generator function that represents your custom y-axis label values;
Pass the results the label generator function gives to the formatYLabel prop;
Adjust your data: Subtract your desired minimum label value from each number in your data set.

Example of the approach given above:

const minValue = 5;
const maxValue = 90;

function* yLabel() {
  yield* [minValue, '', maxValue];
}

const d = [10, 5, 90, 30, 20, 10, 80];
const datapoints = d.map((datapoint) => datapoint - minValue - 1);

const data = {
  labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    {
      data: datapoints,
    },
  ],
};

const CustomChart = () => {
  const screenWidth = Dimensions.get('window').width;
  const yLabelIterator = yLabel();

  return (
    <View>
      <LineChart
        data={data}
        segments={2}
        width={screenWidth}
        height={220}
        bezier
        fromZero
        chartConfig={{
          color: (opacity = 3) => `rgba(200, 255, 255, ${opacity})`,
          data: data.datasets,
        }}
        formatYLabel={() => yLabelIterator.next().value}
      />
    </View>
  );
};

Subtracting 1 of each element in the data set is done because 0 is inclusive in the range when fromZero is set.

Also be aware that the number of segments of the chart is important here. If you want to have 3 labels, you should have 2 segments.

Having 2 labels, as in the example above, is the exception to the rule. Having 2 labels and 1 segment doesn't work. The workaround shown in the example is to have 3 labels and 2 segments, but to make the middle label an empty string.

A caveat with the approach as a whole is that you can't have a value in your data array that is higher than your maximum label value.

That's a good idea however it does not fix the problem for the high value. another way to do it I found out is to have to data with one containing high and low, but the problem is that it will draw both and unless you turn shadow off, it's not doable, I wish we could turn shadow off for only one line — GHOST, Jan 31 '21 at 05:16

score 0 · Answer 4 · answered Oct 06 '21 at 16:41

I was able to do this using getDotProps and min, max as datasets. You can have a callback function to render the dots, the index and the data value is returned in this function and you can check if that value exists in the original data set. Because the min and max values will never exist in the original data set, thus returning -1, you can use that logic to make those dots transparent.

Example:

 const chartData = [60, 62, 70, 73, 80];

 <LineChart
        data={{
          datasets: [
            {
              data: chartData,
            },
            {
              data: [50],
            },
            {
              data: [100],
            },
          ],
        }}
        getDotProps={(dataPoint, index) => {
          return {
            r: "6",
            strokeWidth: "2",
            stroke:
              chartData.indexOf(index) == -1
                ? `rgba(0, 0, 0, 0)` // make it transparent
                : 'red',
            fill:
              chartData.indexOf(index) == -1
                ? `rgba(0, 0, 0, 0)`  // make it transparent
                : 'red',
          };
        }}
  ......
  ......
 </LineChart>

react-native-chart-kit Min and Max value

4 Answers4

Linked