How to show 6 labels in Y-axis in Line-chart (react-native-chart-kit)

103 Views Asked by At

i am using react-native-chart-kit this library, it is working fine. But I need to show 6 labels in y-axis. Right now it was showing 5 labels even if i declared 6 labels. I want to show 100 label in y-axis. I need to show 0,20,40,60,80,100 labels in y-axis. I've changed the height also but it doesn't work. Please help me out this! Thank in advance.

Github link :- https://github.com/indiespirit/react-native-chart-kit/issues/716

Code:-

function* yLabel() {
  yield* ["0", "20", "40", "60", "80", "100"];
}

  const yLabelIterator = yLabel();
  
 <LineChart
              bezier
              // withHorizontalLabels={false}
              // withVerticalLabels={false}
              yAxisInterval={2}
              data={{
                labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
                datasets: [
                  {
                    data: [10, 70, 60, 40, 20, 50],
                    strokeWidth: 2,
                    color: (opacity = 1) => `rgba(255,0,0,${opacity})`, // optional
                  },
                  {
                    data: [20, 40, 60, 80, 80, 90],
                    strokeWidth: 2,
                    color: (opacity = 1) => `rgba(0,0,102, ${opacity})`, // optional
                  }
                ],
                legend: ['Organic', 'Paid'],
              }}
              formatYLabel={() => yLabelIterator.next().value}
              width={Dimensions.get('window').width - 16}
              height={200}
              chartConfig={{
                backgroundColor: '#1cc910',
                backgroundGradientFrom: '#eff3ff',
                backgroundGradientTo: '#efefef',
                decimalPlaces: 2,
                color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                style: {
                  borderRadius: 16,
                },
              }}
              style={{
                marginVertical: 8,
                borderRadius: 16,
              }}
            />

Screenshot:-

open screenshot

0

There are 0 best solutions below