diff --git a/package.json b/package.json index f27ed57..c759ec9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-gifted-charts", - "version": "1.2.30", + "version": "1.2.31", "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.", "main": "src/index.tsx", "files": [ diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index e24df3c..e6b8337 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -371,6 +371,7 @@ type Pointer = { export const LineChart = (props: propTypes) => { const scrollRef = useRef(); + const [scrollX, setScrollX] = useState(0); const [pointerIndex, setPointerIndex] = useState(-1); const [pointerX, setPointerX] = useState(0); const [pointerY, setPointerY] = useState(0); @@ -2557,6 +2558,11 @@ export const LineChart = (props: propTypes) => { if (autoAdjustPointerLabelPosition) { if (pointerX < pointerLabelWidth / 2) { left = 7; + } else if ( + activatePointersOnLongPress && + pointerX - scrollX < pointerLabelWidth / 2 - 10 + ) { + left = 7; } else { if ( !activatePointersOnLongPress && @@ -2568,7 +2574,10 @@ export const LineChart = (props: propTypes) => { left = -pointerLabelWidth - 4; } else if ( activatePointersOnLongPress && - pointerX > totalWidth - yAxisLabelWidth - pointerLabelWidth / 2 + pointerX - scrollX > + (props.width + 10 || + Dimensions.get('window').width - yAxisLabelWidth - 15) - + pointerLabelWidth / 2 ) { left = -pointerLabelWidth - 4; } else { @@ -3293,6 +3302,15 @@ export const LineChart = (props: propTypes) => { scrollRef.current.scrollToEnd({animated: scrollAnimation}); } }} + onScroll={ev => { + if ( + pointerConfig && + pointerConfig.activatePointersOnLongPress && + pointerConfig.autoAdjustPointerLabelPosition + ) { + setScrollX(ev.nativeEvent.contentOffset.x); + } + }} showsHorizontalScrollIndicator={showScrollIndicator} indicatorStyle={props.indicatorColor} style={[