diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index 7c747dd..b7148e6 100644 --- a/docs/LineChart/LineChartProps.md +++ b/docs/LineChart/LineChartProps.md @@ -328,6 +328,13 @@ The strokeDashArray property lets us render a dashed/dotted strip along t pointerLabelComponent is a function that returns the component to be rendered as a Label. It takes a single parameter - an array of items. So, if there are multiple data arrays, the parameter items will have the data item corresponding to each data array. +#### getPointerProps + +getPointerProps prop can be used to get the current pointer's index, x and y coordinate values. It is a callback function that accepts a single parameter which is an object. This object has following properties- +1. pointerIndex +2. pointerX +3. pointerY + ### onPress and strip related props diff --git a/package.json b/package.json index 03a9c56..2ba4e89 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-gifted-charts", - "version": "1.2.19", + "version": "1.2.20", "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 bc42a50..96fe7d0 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -267,6 +267,7 @@ type propTypes = { noOfSectionsBelowXAxis?: number; labelsExtraHeight?: number; adjustToWidth?: Boolean; + getPointerProps?: Function; }; type referenceConfigType = { thickness: number; @@ -364,6 +365,7 @@ type Pointer = { export const LineChart = (props: propTypes) => { const scrollRef = useRef(); + const [pointerIndex, setPointerIndex] = useState(-1); const [pointerX, setPointerX] = useState(0); const [pointerY, setPointerY] = useState(0); const [pointerItem, setPointerItem] = useState({ @@ -1425,6 +1427,7 @@ export const LineChart = (props: propTypes) => { hidePointer5: false, }; const pointerConfig = props.pointerConfig || null; + const getPointerProps = props.getPointerProps || null; const pointerHeight = pointerConfig && pointerConfig.height ? pointerConfig.height @@ -2814,6 +2817,7 @@ export const LineChart = (props: propTypes) => { (pointerRadius || pointerWidth / 2) - 2; setPointerX(z); + setPointerIndex(factor); let item, y; item = data[factor]; y = @@ -2900,6 +2904,7 @@ export const LineChart = (props: propTypes) => { 2; let item, y; setPointerX(z); + setPointerIndex(factor); item = data[factor]; y = containerHeight - @@ -2963,6 +2968,7 @@ export const LineChart = (props: propTypes) => { onResponderEnd={evt => { // console.log('evt...end.......',evt); setResponderStartTime(0); + setPointerIndex(-1); setResponderActive(false); setTimeout(() => setPointerX(0), pointerVanishDelay); }} @@ -3037,6 +3043,7 @@ export const LineChart = (props: propTypes) => { (pointerRadius || pointerWidth / 2) - 2; setPointerX(z); + setPointerIndex(factor); let item, y; item = data[factor]; y = @@ -3122,6 +3129,7 @@ export const LineChart = (props: propTypes) => { 2; let item, y; setPointerX(z); + setPointerIndex(factor); item = data[factor]; y = containerHeight - @@ -3185,6 +3193,7 @@ export const LineChart = (props: propTypes) => { onResponderEnd={evt => { // console.log('evt...end.......',evt); setResponderStartTime(0); + setPointerIndex(-1); setResponderActive(false); setTimeout(() => setPointerX(0), pointerVanishDelay); }} @@ -3496,6 +3505,9 @@ export const LineChart = (props: propTypes) => { ); })} + {pointerConfig && + getPointerProps && + getPointerProps({pointerIndex, pointerX, pointerY})} ); };