Line Chart Scroll

[adamwhiles]

Is there a way to add a scroll to the line chart and limit the number of data point shown on the initial "page"?

[Hermanya]

There is no scroll, but you can limit data points by passing fewer data points in the props

[adamwhiles]

Thanks... yea, i did that as a workaround. Any future possibility to scroll?

[Hermanya]

Not unless someone submits a PR 😉

[azuxx]

Hi there, any updates on that? I would love to have it

[kdcaine]

Hi, any update available ? Because I would like to have a longer curve with more data to see a good evolution and not just a rough average.

[SohaibIbneAli]

Its working fine follow this link [https://github.com/indiespirit/react-native-chart-kit/blob/cb2d31e86fe40133cbf2a19f1453571998b8fe57/App.js#L244]

[lokewk]

Hi, is there a way to spread out the data points and scroll to the last point of the chart? something like this

I have 100 points and with the current settings i cannot see any labels(they all mashed out). am i missing something? Please help.

[bmitioglov]

horizontal scroll is really needed for this library

[suulola]

Finally figured this out after hours of searching...

[bmitioglov]

Finally figured this out after hours of searching...

Did you add horizontal scroll?

[suulola]

Yes - my use case is a scrollable horizontal chart

[suulola]

Here is my implementation

<ScrollView horizontal={true} contentOffset={{ x: 10000, y: 0 }} // i needed the scrolling to start from the end not the start showsHorizontalScrollIndicator={false} // to hide scroll bar > <LineChart data={data} width={900} height={250} xLabelsOffset={10} chartConfig={chartConfig} withHorizontalLines={false} withVerticalLines={false} withHorizontalLabels={false} withInnerLines={false} withOuterLines={false} style={{ paddingRight: 20, // to remove white spaces at the start of the chart }} bezier /> </ScrollView>

[SangeethaSridharanOfficial]

Is there a way to get the horizontal scroll bar in line chart with dynamic data

[aangindra]

Is there a way to get the horizontal scroll bar in line chart with dynamic data

@SangeethaSridharanOfficial maybe you can use like below my chart data

[guicastrol]

It would be really nice if we could fix the yAxis and scroll the data dynamically along the x Axis!

[MaxMalinsky]

Is there any way to keep the yAxis labels visible at all times while scrolling?

[Juman8]

have any some update for it? I have to do some trick for it and still wait some update from this lib.

[zainulabideen-dev]

Hello! I just come up with an alternate solution where you don't need any PR. No need to update the library. First of all, put your LineChart inside a scroll view like below. If you have large data just increase the width of the chart. You'll be able to scroll. That's it.

<ScrollView horizontal>
            <LineChart
              data={{
                labels: [
                  "January",
                  "February",
                  "March",
                  "April",
                  "May",
                  "June",
                ],
                datasets: [
                  {
                    data: [
                      Math.random() * 100,
                      Math.random() * 100,
                      Math.random() * 100,
                      Math.random() * 100,
                      Math.random() * 100,
                      Math.random() * 100,
                    ],
                  },
                ],
              }}
              width={1000} // from react-native
              height={220}
              //yAxisLabel="$"
              //yAxisSuffix="k"
              //yAxisInterval={1} // optional, defaults to 1
              chartConfig={{
                backgroundColor: "#ffff",
                backgroundGradientFrom: "#ffff",
                backgroundGradientTo: "#ffff",
                decimalPlaces: 2, // optional, defaults to 2dp
                color: (opacity = 1) => `rgba(46, 204, 113  , ${opacity})`,
                labelColor: (opacity = 1) => `rgba(28, 40, 51 , ${opacity})`,
                style: {
                  borderRadius: 16,
                },
                propsForDots: {
                  r: "6",
                  strokeWidth: "2",
                  stroke: "#2ECC71",
                },
              }}
              bezier
              style={{
                marginVertical: 8,
                borderRadius: 16,
              }}
            />
          </ScrollView>