Is it possible to scroll on the horizontal axis?

[TowhidKashem]

Hi,

First thank you for the amazing plugin, I searched many charting libs for react native and this so far is the closest to what I was looking for!

My issue is I need to chart seconds on a line graph, here's how my graph looks charting 10 minutes:

And here's how it looks with 1 min:

I like the way the latter looks, I think its a lot more readable but I still want to chart the whole 10 min. Is there a way I can do that but have it look the way it does in the second picture? Maybe have a scrollbar show up and when you swipe horizontally it will reveal more of the "timeline"?

The code:

    const data: Array<{ x: number; y: number }> = [];
    for (let i = 0; i < minutesToSeconds(10); i++) {
      data.push({
        x: i,
        y: i % 60 === 2 ? 10 : 0
      });
    }

    <Chart
      style={{ height: 200, width: 400 }}
      data={data}
      padding={{ left: 40, bottom: 20, right: 20, top: 20 }}
      yDomain={{ min: 0, max: 20 }}
    >
      <VerticalAxis tickCount={5} />
      <HorizontalAxis tickCount={3} />
      <Line theme={{ stroke: { color: '#c0392b', width: 3 } }} />
    </Chart>

[xanderdeseyn]

Hi @TowhidKashem, you can try wrapping the chart in a ScrollView with prop horizontal, and setting the width of the chart to a value larger than the screen's dimensions. It's possible that the GestureHandler the library uses internally for the tooltips will prevent you from scrolling. If so, I will add an option to disable the gesture handler.

EDIT: I have tried out the solution above and it seems to work, but I noticed that the VerticalAxis scrolls out of view, of course. I will think a bit about a possible solution.

[xanderdeseyn]

Okay so scrolling turns out to be a bit more complicated than I anticipated. I have a working version in the panGestureHandler branch, but performance is horrible for large amounts of data. If I can resolve the performance issue I will merge it, but I'm afraid it will be quite the rewrite.

[TowhidKashem]

Hi @TowhidKashem, you can try wrapping the chart in a ScrollView with prop horizontal, and setting the width of the chart to a value larger than the screen's dimensions. It's possible that the GestureHandler the library uses internally for the tooltips will prevent you from scrolling. If so, I will add an option to disable the gesture handler.

EDIT: I have tried out the solution above and it seems to work, but I noticed that the VerticalAxis scrolls out of view, of course. I will think a bit about a possible solution.

Haha for some reason this didn't come to my mind, I guess a code change with the lib wasn't necessary (at least for my purposes). This works for me and I didn't notice any issues with the vertical scroll. I don't need to use tooltips for this graph but I tried it anyway and it didn't seem to prevent scroll FYI.

Anyway thanks for the tip!

[xanderdeseyn]

Hi @TowhidKashem, just wanted to let you know that I was able to solve the performance issues and the library now natively supports scrolling through the viewport property. You can check it out at https://react-native-responsive-linechart.surge.sh/docs/line#with-viewport-scrollable-chart