react-native-chart-kit Line chart with 1 segment doesn't print y-label

Question

I have the below code where there are only 2 values on the y-axis which means a single segment should suffice. But it turns out the y-label for the top line doesnt come up. Is there a fix for this? Current Chart state

Below is the code I have written for this.

< LineChart
data = {
  dataFrame
}
width = {
  width - 20
}
height = {
  height
}
withShadow = {
  true
}
withDots = {
  true
}
withScrollableDot = {
  true
}
withOuterLines = {
  true
}
transparent = {
  true
}
withInnerLines = {
  true
}
chartConfig = {
  {
    backgroundColor: '#fff000',
    backgroundGradientFrom: '#ffffff',
    backgroundGradientTo: '#fffffa',
    decimalPlaces: 0,
    linejoinType: 'round',
    scrollableDotFill: '#fff',
    scrollableDotRadius: 6,
    scrollableDotStrokeColor: 'tomato',
    scrollableDotStrokeWidth: 3,
    scrollableInfoViewStyle: {
      justifyContent: 'center',
      alignContent: 'center',
      backgroundColor: '#121212',
      borderRadius: 2,
      marginTop: 25,
      marginLeft: 25,
    },
    scrollableInfoTextStyle: {
      fontSize: 10,
      color: '#C4C4C4',
      marginHorizontal: 2,
      flex: 1,
      textAlign: 'center',
    },
    scrollableInfoSize: {
      width: 30,
      height: 30
    },
    scrollableInfoOffset: 15,
    labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
    color: (opacity = 1) => `rgb(78, 135, 210, ${opacity})`,
    propsForBackgroundLines: {
      strokeDasharray: '', // solid background lines with no dashes
      strokeDashoffset: 15,
    },
  }
}
segments = {1}
/>

Any help appreciated.

Answer 1

It looks to be a bug in the way the renderHorizontalLabels function is defined inside AbstractChart.tsx. If segments equals 1, only one horizontal label is actually returned instead of 2.

There is a workaround to achieve the effect you want. You could create a generator function and use the formatYLabel prop on the LineChart like this:

const d = [0, 110, 90, 130, 80, 103]; // example data

function* yLabel() {
  const min = Math.min(...d); // minimum value of data array d
  const max = Math.max(...d); // maximum value of data array d

  yield* [min, '', max]; 
}

function App() {
  // Instantiate the iterator
  const yLabelIterator = yLabel();

  return (
    <LineChart
      data={{
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          {
            data: d,
          },
        ],
      }}
      width={400}
      height={200}
      withShadow={true}
      withDots={true}
      withScrollableDot={true}
      withOuterLines={true}
      transparent={true}
      withInnerLines={true}
      chartConfig={{
        backgroundColor: '#fff000',
        backgroundGradientFrom: '#ffffff',
        backgroundGradientTo: '#fffffa',
        decimalPlaces: 0,
        linejoinType: 'round',
        scrollableDotFill: '#fff',
        scrollableDotRadius: 6,
        scrollableDotStrokeColor: 'tomato',
        scrollableDotStrokeWidth: 3,
        scrollableInfoViewStyle: {
          justifyContent: 'center',
          alignContent: 'center',
          backgroundColor: '#121212',
          borderRadius: 2,
          marginTop: 25,
          marginLeft: 25,
        },
        scrollableInfoTextStyle: {
          fontSize: 10,
          color: '#C4C4C4',
          marginHorizontal: 2,
          flex: 1,
          textAlign: 'center',
        },
        scrollableInfoSize: {
          width: 30,
          height: 30,
        },
        scrollableInfoOffset: 15,
        labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
        color: (opacity = 1) => `rgb(78, 135, 210, ${opacity})`,
        propsForBackgroundLines: {
          strokeDasharray: '', 
          strokeDashoffset: 15,
        },
      }}
      segments={2}
      formatYLabel={() => yLabelIterator.next().value}
    />
  );
}

So the idea here is to use a segments value of 2, but to show an empty string for the middle label which gives the effect you would expect to get when setting segments to 1.