React-native-svg-charts: Drag left right to show value

[callmejm]

Hi everyone, this is a nice library to create a nice chart, but i wish to have a feature like the gif below:
https://media.giphy.com/media/hqllPKwVIxuetd3RBg/giphy.gif

Thanks. =)

[ssuchanowski]

+1
I am trying to figure out the same thing.

[aniruddhashevle]

+1

[ssuchanowski]

I've done it by adding a view over the chart (or as a parent) and overriding the pan gestures with

this.panResponder = PanResponder.create({
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
  onPanResponderMove: this._onMove.bind(this),
  onPanResponderRelease: this._pressDragRelease.bind(this),
});

<View {...this.panResponder.panHandlers}>
  ...
</View>

You have to calculate where are you in your data based on xPos, chartWidth, numberOfDataPoints. Then you know which value to show at the top. I am also adding an indicator on the chart while dragging the line.

[kylesziv]

@ssuchanowski Do you have an example of your final code?

[edreyyo]

You have to calculate where are you in your data based on xPos, chartWidth, numberOfDataPoints. Then you know which value to show at the top. I am also adding an indicator on the chart while dragging the line.

@ssuchanowski This approach only seems accurate for evenly spaced data points. Can you please confirm?

It would be great if we could get the coordinates of all data points using a ref or similar to the chart.

[ssuchanowski]

yes but I have it working for not evenly spaced data points as well - only condition is that chart has to show values in linear scale (in other scales would work too but it would need to take it into account). I am calculating my position and basing on left and right value I decide which one to highlight.

Let see some example:

• values: [1, 10, 11, 12]
• selection in the middle (50%)

1. calculate value at position: [maxValue-minValue]normallizedSelectionValue
   (12-1)0.5 = 5.5
2. look for that value in values or its closed left and right values
   we have 1 and 10
3. decide which to highlight
   
   
   
   • middle point: (10-1)/2 = 4.5
   
   
   • value is bigger then middle so we take the right
   
   

This is vary simple approach and probably could be better but it does the job. We need to take into account starting point - if it is always 0 or it is the first value but you can figure it out from this point.

[edreyyo]

@ssuchanowski Thanks for taking the time to reply. Your solution works great!

[outaTiME]

Great @ssuchanowski working snippet example of this proposal? Thanks !!!