Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to show 6 labels in Y-axis in Line-chart #716

Open
harika-zazz opened this issue Dec 4, 2023 · 1 comment
Open

How to show 6 labels in Y-axis in Line-chart #716

harika-zazz opened this issue Dec 4, 2023 · 1 comment

Comments

@harika-zazz
Copy link

harika-zazz commented Dec 4, 2023

Hi, i am using this library, it is working fine. 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. How can i achieve this?
I've changed the height also but it doesn't work.
Please help me out this!

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 2023-12-04 at 4 24 26 PM

@NoamKu95
Copy link

NoamKu95 commented May 1, 2024

try adding the segments={5} property.
The default is 4 + the 0 line = the 5 lines you are seeing now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants