Added feature to auto position pointer labels in Line/Area charts

docs/LineChart/LineChartProps.md

@@ -296,7 +296,9 @@ type Pointer = {
   pointerLabelComponent?: Function; // default: null
   shiftPointerLabelX?: number; // default: 0
   shiftPointerLabelY?: number; // default: 0
-  pointerLabelWidth?: number; // default: 40
+  pointerLabelWidth?: number; // default: 20
+  pointerLabelHeight?: number; // default: 20
+  autoAdjustPointerLabelPosition?: boolean; // default: true
   pointerVanishDelay?: number; // default: 150
   activatePointersOnLongPress?: boolean; // default: false
   activatePointersDelay?: number; // default: 150

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "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": [

src/LineChart/index.tsx

@@ -13,6 +13,7 @@ import {
   Easing,
   Text,
   ColorValue,
+  Dimensions,
 } from 'react-native';
 import {styles} from './styles';
 import Svg, {
@@ -342,9 +343,11 @@ type Pointer = {
   pointerStripColor?: ColorValue;
   pointerStripUptoDataPoint?: boolean;
   pointerLabelComponent?: Function;
+  autoAdjustPointerLabelPosition?: boolean;
   shiftPointerLabelX?: number;
   shiftPointerLabelY?: number;
   pointerLabelWidth?: number;
+  pointerLabelHeight?: number;
   pointerVanishDelay?: number;
   activatePointersOnLongPress?: boolean;
   activatePointersDelay?: number;
@@ -476,7 +479,8 @@ export const LineChart = (props: propTypes) => {
           ? ((props.width || 200) - initialSpacing) / data.length
           : 60);
 
-  const xAxisThickness = props.xAxisThickness || 1;
+  const xAxisThickness =
+    props.xAxisThickness === 0 ? 0 : props.xAxisThickness || 1;
   const dataPointsHeight1 =
     props.dataPointsHeight1 || props.dataPointsHeight || 2;
   const dataPointsWidth1 = props.dataPointsWidth1 || props.dataPointsWidth || 2;
@@ -1319,7 +1323,8 @@ export const LineChart = (props: propTypes) => {
   const xAxisIndicesColor = props.xAxisIndicesColor || 'black';
   const yAxisIndicesColor = props.yAxisIndicesColor || 'black';
 
-  const yAxisThickness = props.yAxisThickness || 1;
+  const yAxisThickness =
+    props.yAxisThickness === 0 ? 0 : props.yAxisThickness || 1;
   const yAxisColor = props.yAxisColor || 'black';
   const yAxisTextStyle = props.yAxisTextStyle;
   const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
@@ -1344,7 +1349,9 @@ export const LineChart = (props: propTypes) => {
     pointerLabelComponent: null,
     shiftPointerLabelX: 0,
     shiftPointerLabelY: 0,
-    pointerLabelWidth: 40,
+    pointerLabelWidth: 20,
+    pointerLabelHeight: 20,
+    autoAdjustPointerLabelPosition: true,
     pointerVanishDelay: 150,
     activatePointersOnLongPress: false,
     activatePointersDelay: 150,
@@ -1412,6 +1419,14 @@ export const LineChart = (props: propTypes) => {
     pointerConfig && pointerConfig.pointerLabelWidth
       ? pointerConfig.pointerLabelWidth
       : defaultPointerConfig.pointerLabelWidth;
+  const pointerLabelHeight =
+    pointerConfig && pointerConfig.pointerLabelHeight
+      ? pointerConfig.pointerLabelHeight
+      : defaultPointerConfig.pointerLabelHeight;
+  const autoAdjustPointerLabelPosition =
+    pointerConfig && pointerConfig.autoAdjustPointerLabelPosition
+      ? pointerConfig.autoAdjustPointerLabelPosition
+      : defaultPointerConfig.autoAdjustPointerLabelPosition;
   const pointerVanishDelay =
     pointerConfig && pointerConfig.pointerVanishDelay
       ? pointerConfig.pointerVanishDelay
@@ -2487,12 +2502,29 @@ export const LineChart = (props: propTypes) => {
 
         {pointerLabelComponent && (
           <View
-            style={{
+            style={[
+              {
                 position: 'absolute',
-              left:
+                left: autoAdjustPointerLabelPosition
-                (pointerRadius || pointerWidth / 2) - 10 + shiftPointerLabelX,
+                  ? pointerX < pointerLabelWidth / 2
-              top:
+                    ? 7
-                (pointerStripUptoDataPoint
+                    : !activatePointersOnLongPress &&
+                      pointerX >
+                        (props.width ||
+                          Dimensions.get('window').width -
+                            yAxisLabelWidth -
+                            15) -
+                          pointerLabelWidth / 2
+                    ? -pointerLabelWidth - 4
+                    : pointerLabelWidth / -2 + 5
+                  : (pointerRadius || pointerWidth / 2) -
+                    10 +
+                    shiftPointerLabelX,
+                top: autoAdjustPointerLabelPosition
+                  ? pointerLabelHeight - pointerYLocal > 10
+                    ? 10
+                    : -pointerLabelHeight
+                  : (pointerStripUptoDataPoint
                       ? pointerRadius || pointerStripHeight / 2
                       : -pointerYLocal + 8) -
                     pointerLabelWidth / 2 +
@@ -2501,7 +2533,8 @@ export const LineChart = (props: propTypes) => {
                   ? 0
                   : containerHeight - pointerStripHeight,
                 width: pointerLabelWidth,
-            }}>
+              },
+            ]}>
             {pointerLabelComponent(pointerItemLocal)}
           </View>
         )}
@@ -2678,6 +2711,11 @@ export const LineChart = (props: propTypes) => {
             return;
           }
           let x = evt.nativeEvent.locationX;
+          if (
+            !activatePointersOnLongPress &&
+            x > (props.width || Dimensions.get('window').width)
+          )
+            return;
           let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
           factor = Math.min(factor, data.length - 1);
@@ -2758,6 +2796,11 @@ export const LineChart = (props: propTypes) => {
             setResponderActive(true);
           }
           let x = evt.nativeEvent.locationX;
+          if (
+            !activatePointersOnLongPress &&
+            x > (props.width || Dimensions.get('window').width)
+          )
+            return;
           let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
           factor = Math.min(factor, data.length - 1);
@@ -2878,6 +2921,11 @@ export const LineChart = (props: propTypes) => {
             return;
           }
           let x = evt.nativeEvent.locationX;
+          if (
+            !activatePointersOnLongPress &&
+            x > (props.width || Dimensions.get('window').width)
+          )
+            return;
           let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
           factor = Math.min(factor, data.length - 1);
@@ -2958,6 +3006,11 @@ export const LineChart = (props: propTypes) => {
             setResponderActive(true);
           }
           let x = evt.nativeEvent.locationX;
+          if (
+            !activatePointersOnLongPress &&
+            x > (props.width || Dimensions.get('window').width)
+          )
+            return;
           let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
           factor = Math.min(factor, data.length - 1);