react-native-gifted-charts 1.2.3 → 1.2.6

package/README.md

@@ -96,7 +96,6 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 | Issue                                                                                                                        | Solution                                                                                                                                                                    |
 | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [BarChart - Value and section line don't match](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/35) | [Comment by the owner](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/35#issuecomment-972673281)                                                  |
-| **Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.**                                | install `react-native-webview`                                                                                                                                              |
 | Setting `height`, `maxValue`, `stepValue`, `stepHeight`, or `noOfSections` breaks the chart                                  | Please make sure that<br/> `maxValue = noOfSections * stepValue;` <br/>is followed. [See this](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/71) |
 
 ## To-dos

package/package.json

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

package/src/BarChart/index.tsx

@@ -845,7 +845,9 @@ export const BarChart = (props: PropTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSectionsBelow.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(
+                horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
+              );
               return (
                 <View
                   key={index}

package/src/LineChart/index.tsx

@@ -323,7 +323,12 @@ type Pointer = {
   height?: number;
   width?: number;
   radius?: number;
-  color?: ColorValue;
+  pointerColor?: ColorValue;
+  pointer1Color?: ColorValue;
+  pointer2Color?: ColorValue;
+  pointer3Color?: ColorValue;
+  pointer4Color?: ColorValue;
+  pointer5Color?: ColorValue;
   pointerComponent?: Function;
   showPointerStrip?: boolean;
   pointerStripWidth?: number;
@@ -335,6 +340,13 @@ type Pointer = {
   shiftPointerLabelY?: number;
   pointerLabelWidth?: number;
   pointerVanishDelay?: number;
+  activatePointersOnLongPress?: boolean;
+  activatePointersDelay?: number;
+  hidePointer1?: boolean;
+  hidePointer2?: boolean;
+  hidePointer3?: boolean;
+  hidePointer4?: boolean;
+  hidePointer5?: boolean;
 };
 
 export const LineChart = (props: propTypes) => {
@@ -345,6 +357,28 @@ export const LineChart = (props: propTypes) => {
     pointerShiftX: 0,
     pointerShiftY: 0,
   });
+  const [pointerY2, setPointerY2] = useState(0);
+  const [pointerItem2, setPointerItem2] = useState({
+    pointerShiftX: 0,
+    pointerShiftY: 0,
+  });
+  const [pointerY3, setPointerY3] = useState(0);
+  const [pointerItem3, setPointerItem3] = useState({
+    pointerShiftX: 0,
+    pointerShiftY: 0,
+  });
+  const [pointerY4, setPointerY4] = useState(0);
+  const [pointerItem4, setPointerItem4] = useState({
+    pointerShiftX: 0,
+    pointerShiftY: 0,
+  });
+  const [pointerY5, setPointerY5] = useState(0);
+  const [pointerItem5, setPointerItem5] = useState({
+    pointerShiftX: 0,
+    pointerShiftY: 0,
+  });
+  const [responderStartTime, setResponderStartTime] = useState(0);
+  const [responderActive, setResponderActive] = useState(false);
   const [points, setPoints] = useState('');
   const [points2, setPoints2] = useState('');
   const [points3, setPoints3] = useState('');
@@ -1167,11 +1201,16 @@ export const LineChart = (props: propTypes) => {
   const stepValue = props.stepValue || maxValue / noOfSections;
   const noOfSectionsBelowXAxis =
     props.noOfSectionsBelowXAxis || -minValue / stepValue;
-  const thickness1 = props.thickness1 === 0 ? 0 : props.thickness || 1;
-  const thickness2 = props.thickness2 === 0 ? 0 : props.thickness || 1;
-  const thickness3 = props.thickness3 === 0 ? 0 : props.thickness || 1;
-  const thickness4 = props.thickness4 === 0 ? 0 : props.thickness || 1;
-  const thickness5 = props.thickness5 === 0 ? 0 : props.thickness || 1;
+  const thickness1 =
+    props.thickness1 === 0 ? 0 : props.thickness1 || props.thickness || 1;
+  const thickness2 =
+    props.thickness2 === 0 ? 0 : props.thickness2 || props.thickness || 1;
+  const thickness3 =
+    props.thickness3 === 0 ? 0 : props.thickness3 || props.thickness || 1;
+  const thickness4 =
+    props.thickness4 === 0 ? 0 : props.thickness4 || props.thickness || 1;
+  const thickness5 =
+    props.thickness5 === 0 ? 0 : props.thickness5 || props.thickness || 1;
 
   const strokeDashArray1 = props.strokeDashArray1 || props.strokeDashArray;
   const strokeDashArray2 = props.strokeDashArray2 || props.strokeDashArray;
@@ -1268,7 +1307,7 @@ export const LineChart = (props: propTypes) => {
     height: 0,
     width: 0,
     radius: 5,
-    color: 'red',
+    pointerColor: 'red',
     pointerComponent: null,
     showPointerStrip: true,
     pointerStripHeight: containerHeight,
@@ -1279,72 +1318,114 @@ export const LineChart = (props: propTypes) => {
     shiftPointerLabelX: 0,
     shiftPointerLabelY: 0,
     pointerLabelWidth: 40,
-    pointerVanishDelay: 200,
+    pointerVanishDelay: 150,
+    activatePointersOnLongPress: false,
+    activatePointersDelay: 150,
+    hidePointer1: false,
+    hidePointer2: false,
+    hidePointer3: false,
+    hidePointer4: false,
+    hidePointer5: false,
   };
   const pointerConfig = props.pointerConfig || null;
   const pointerHeight =
     pointerConfig && pointerConfig.height
-      ? props.pointerConfig.height
+      ? pointerConfig.height
       : defaultPointerConfig.height;
   const pointerWidth =
     pointerConfig && pointerConfig.width
-      ? props.pointerConfig.width
+      ? pointerConfig.width
       : defaultPointerConfig.width;
   const pointerRadius =
     pointerConfig && pointerConfig.radius
-      ? props.pointerConfig.radius
+      ? pointerConfig.radius
       : defaultPointerConfig.radius;
   const pointerColor =
-    pointerConfig && pointerConfig.color
-      ? props.pointerConfig.color
-      : defaultPointerConfig.color;
+    pointerConfig && pointerConfig.pointerColor
+      ? pointerConfig.pointerColor
+      : defaultPointerConfig.pointerColor;
   const pointerComponent =
     pointerConfig && pointerConfig.pointerComponent
-      ? props.pointerConfig.pointerComponent
+      ? pointerConfig.pointerComponent
       : defaultPointerConfig.pointerComponent;
 
   const showPointerStrip =
     pointerConfig && pointerConfig.showPointerStrip
-      ? props.pointerConfig.showPointerStrip
+      ? pointerConfig.showPointerStrip
       : defaultPointerConfig.showPointerStrip;
   const pointerStripHeight =
     pointerConfig && pointerConfig.pointerStripHeight
-      ? props.pointerConfig.pointerStripHeight
+      ? pointerConfig.pointerStripHeight
       : defaultPointerConfig.pointerStripHeight;
   const pointerStripWidth =
     pointerConfig && pointerConfig.pointerStripWidth
-      ? props.pointerConfig.pointerStripWidth
+      ? pointerConfig.pointerStripWidth
       : defaultPointerConfig.pointerStripWidth;
   const pointerStripColor =
     pointerConfig && pointerConfig.pointerStripColor
-      ? props.pointerConfig.pointerStripColor
+      ? pointerConfig.pointerStripColor
       : defaultPointerConfig.pointerStripColor;
   const pointerStripUptoDataPoint =
     pointerConfig && pointerConfig.pointerStripUptoDataPoint
-      ? props.pointerConfig.pointerStripUptoDataPoint
+      ? pointerConfig.pointerStripUptoDataPoint
       : defaultPointerConfig.pointerStripUptoDataPoint;
   const pointerLabelComponent =
     pointerConfig && pointerConfig.pointerLabelComponent
-      ? props.pointerConfig.pointerLabelComponent
+      ? pointerConfig.pointerLabelComponent
       : defaultPointerConfig.pointerLabelComponent;
   const shiftPointerLabelX =
     pointerConfig && pointerConfig.shiftPointerLabelX
-      ? props.pointerConfig.shiftPointerLabelX
+      ? pointerConfig.shiftPointerLabelX
       : defaultPointerConfig.shiftPointerLabelX;
   const shiftPointerLabelY =
     pointerConfig && pointerConfig.shiftPointerLabelY
-      ? props.pointerConfig.shiftPointerLabelY
+      ? pointerConfig.shiftPointerLabelY
       : defaultPointerConfig.shiftPointerLabelY;
   const pointerLabelWidth =
     pointerConfig && pointerConfig.pointerLabelWidth
-      ? props.pointerConfig.pointerLabelWidth
+      ? pointerConfig.pointerLabelWidth
       : defaultPointerConfig.pointerLabelWidth;
   const pointerVanishDelay =
     pointerConfig && pointerConfig.pointerVanishDelay
-      ? props.pointerConfig.pointerVanishDelay
+      ? pointerConfig.pointerVanishDelay
       : defaultPointerConfig.pointerVanishDelay;
-
-  const disableScroll = props.disableScroll || pointerConfig || false;
+  const activatePointersOnLongPress =
+    pointerConfig && pointerConfig.activatePointersOnLongPress
+      ? pointerConfig.activatePointersOnLongPress
+      : defaultPointerConfig.activatePointersOnLongPress;
+  const activatePointersDelay =
+    pointerConfig && pointerConfig.activatePointersDelay
+      ? pointerConfig.activatePointersDelay
+      : defaultPointerConfig.activatePointersDelay;
+  const hidePointer1 =
+    pointerConfig && pointerConfig.hidePointer1
+      ? pointerConfig.hidePointer1
+      : defaultPointerConfig.hidePointer1;
+  const hidePointer2 =
+    pointerConfig && pointerConfig.hidePointer2
+      ? pointerConfig.hidePointer2
+      : defaultPointerConfig.hidePointer2;
+  const hidePointer3 =
+    pointerConfig && pointerConfig.hidePointer3
+      ? pointerConfig.hidePointer3
+      : defaultPointerConfig.hidePointer3;
+  const hidePointer4 =
+    pointerConfig && pointerConfig.hidePointer4
+      ? pointerConfig.hidePointer4
+      : defaultPointerConfig.hidePointer4;
+  const hidePointer5 =
+    pointerConfig && pointerConfig.hidePointer5
+      ? pointerConfig.hidePointer5
+      : defaultPointerConfig.hidePointer5;
+  const disableScroll =
+    props.disableScroll ||
+    (pointerConfig
+      ? activatePointersOnLongPress
+        ? responderActive
+          ? true
+          : false
+        : true
+      : false);
   const showScrollIndicator = props.showScrollIndicator || false;
   const hideOrigin = props.hideOrigin || false;
 
@@ -1785,7 +1866,9 @@ export const LineChart = (props: propTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSectionsBelow.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(
+                horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
+              );
               return (
                 <View
                   key={index}
@@ -2247,13 +2330,47 @@ export const LineChart = (props: propTypes) => {
     });
   };
 
-  const renderPointer = () => {
+  const renderPointer = (lineNumber: number) => {
+    if (lineNumber === 1 && hidePointer1) return;
+    if (lineNumber === 2 && hidePointer2) return;
+    if (lineNumber === 3 && hidePointer3) return;
+    if (lineNumber === 4 && hidePointer4) return;
+    if (lineNumber === 5 && hidePointer5) return;
+    let pointerItemLocal, pointerYLocal, pointerColorLocal;
+    switch (lineNumber) {
+      case 1:
+        pointerItemLocal = pointerItem;
+        pointerYLocal = pointerY;
+        pointerColorLocal = pointerConfig.pointer1Color || pointerColor;
+        break;
+      case 2:
+        pointerItemLocal = pointerItem2;
+        pointerYLocal = pointerY2;
+        pointerColorLocal = pointerConfig.pointer2Color || pointerColor;
+        break;
+      case 3:
+        pointerItemLocal = pointerItem3;
+        pointerYLocal = pointerY3;
+        pointerColorLocal = pointerConfig.pointer3Color || pointerColor;
+        break;
+      case 4:
+        pointerItemLocal = pointerItem4;
+        pointerYLocal = pointerY4;
+        pointerColorLocal = pointerConfig.pointer4Color || pointerColor;
+        break;
+      case 5:
+        pointerItemLocal = pointerItem5;
+        pointerYLocal = pointerY5;
+        pointerColorLocal = pointerConfig.pointer5Color || pointerColor;
+        break;
+    }
+
     return (
       <View
         style={{
           position: 'absolute',
-          left: pointerX + (pointerItem.pointerShiftX || 0),
-          top: pointerY,
+          left: pointerX + (pointerItemLocal.pointerShiftX || 0),
+          top: pointerYLocal,
         }}>
         {pointerComponent ? (
           pointerComponent()
@@ -2262,8 +2379,8 @@ export const LineChart = (props: propTypes) => {
             style={{
               height: pointerHeight || pointerRadius * 2,
               width: pointerWidth || pointerRadius * 2,
-              marginTop: pointerItem.pointerShiftY || 0,
-              backgroundColor: pointerColor,
+              marginTop: pointerItemLocal.pointerShiftY || 0,
+              backgroundColor: pointerColorLocal,
               borderRadius: pointerRadius || 0,
             }}
           />
@@ -2275,9 +2392,9 @@ export const LineChart = (props: propTypes) => {
               left: pointerRadius || pointerWidth / 2,
               top: pointerStripUptoDataPoint
                 ? pointerRadius || pointerStripHeight / 2
-                : -pointerY + 8,
+                : -pointerYLocal + 8,
               height: pointerStripUptoDataPoint
-                ? containerHeight - pointerY - 10
+                ? containerHeight - pointerYLocal - 10
                 : pointerStripHeight,
               width: pointerStripWidth,
               backgroundColor: pointerStripColor,
@@ -2297,7 +2414,7 @@ export const LineChart = (props: propTypes) => {
               top:
                 (pointerStripUptoDataPoint
                   ? pointerRadius || pointerStripHeight / 2
-                  : -pointerY + 8) -
+                  : -pointerYLocal + 8) -
                 pointerLabelWidth / 2 +
                 shiftPointerLabelY,
               marginTop: pointerStripUptoDataPoint
@@ -2305,14 +2422,161 @@ export const LineChart = (props: propTypes) => {
                 : containerHeight - pointerStripHeight,
               width: pointerLabelWidth,
             }}>
-            {pointerLabelComponent(pointerItem)}
+            {pointerLabelComponent(pointerItemLocal)}
           </View>
         )}
       </View>
     );
   };
 
+  const lineSvgComponent = (
+    points: any,
+    currentLineThickness: number | undefined,
+    color: string,
+    fillPoints: any,
+    startFillColor: string,
+    endFillColor: string,
+    startOpacity: number,
+    endOpacity: number,
+    strokeDashArray: Array<number> | undefined | null,
+  ) => {
+    return (
+      <Svg>
+        {strokeDashArray &&
+        strokeDashArray.length === 2 &&
+        typeof strokeDashArray[0] === 'number' &&
+        typeof strokeDashArray[1] === 'number' ? (
+          <Path
+            d={points}
+            fill="none"
+            stroke={color}
+            strokeWidth={currentLineThickness || thickness}
+            strokeDasharray={strokeDashArray}
+          />
+        ) : (
+          <Path
+            d={points}
+            fill="none"
+            stroke={color}
+            strokeWidth={currentLineThickness || thickness}
+          />
+        )}
+
+        {/***********************      For Area Chart        ************/}
+
+        {areaChart && (
+          <LinearGradient
+            id="Gradient"
+            x1="0"
+            y1="0"
+            x2={gradientDirection === 'horizontal' ? '1' : '0'}
+            y2={gradientDirection === 'vertical' ? '1' : '0'}>
+            <Stop
+              offset="0"
+              stopColor={startFillColor}
+              stopOpacity={startOpacity.toString()}
+            />
+            <Stop
+              offset="1"
+              stopColor={endFillColor}
+              stopOpacity={endOpacity.toString()}
+            />
+          </LinearGradient>
+        )}
+        {areaChart && (
+          <Path
+            d={fillPoints}
+            fill="url(#Gradient)"
+            stroke={'transparent'}
+            strokeWidth={currentLineThickness || thickness}
+          />
+        )}
+
+        {/******************************************************************/}
+
+        {renderSpecificVerticalLines(data)}
+        {renderSpecificVerticalLines(data2)}
+        {renderSpecificVerticalLines(data3)}
+        {renderSpecificVerticalLines(data4)}
+        {renderSpecificVerticalLines(data5)}
+
+        {/***  !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!!  ***/}
+        {!hideDataPoints1
+          ? renderDataPoints(
+              data,
+              dataPointsShape1,
+              dataPointsWidth1,
+              dataPointsHeight1,
+              dataPointsColor1,
+              dataPointsRadius1,
+              textColor1,
+              textFontSize1,
+              startIndex1,
+              endIndex1,
+            )
+          : null}
+        {!hideDataPoints2
+          ? renderDataPoints(
+              data2,
+              dataPointsShape2,
+              dataPointsWidth2,
+              dataPointsHeight2,
+              dataPointsColor2,
+              dataPointsRadius2,
+              textColor2,
+              textFontSize2,
+              startIndex2,
+              endIndex2,
+            )
+          : null}
+        {!hideDataPoints3
+          ? renderDataPoints(
+              data3,
+              dataPointsShape3,
+              dataPointsWidth3,
+              dataPointsHeight3,
+              dataPointsColor3,
+              dataPointsRadius3,
+              textColor3,
+              textFontSize3,
+              startIndex3,
+              endIndex3,
+            )
+          : null}
+        {!hideDataPoints4
+          ? renderDataPoints(
+              data4,
+              dataPointsShape4,
+              dataPointsWidth4,
+              dataPointsHeight4,
+              dataPointsColor4,
+              dataPointsRadius4,
+              textColor4,
+              textFontSize4,
+              startIndex4,
+              endIndex4,
+            )
+          : null}
+        {!hideDataPoints5
+          ? renderDataPoints(
+              data5,
+              dataPointsShape5,
+              dataPointsWidth5,
+              dataPointsHeight5,
+              dataPointsColor5,
+              dataPointsRadius5,
+              textColor5,
+              textFontSize5,
+              startIndex5,
+              endIndex5,
+            )
+          : null}
+      </Svg>
+    );
+  };
+
   const renderLine = (
+    lineNumber: number,
     points: any,
     currentLineThickness: number | undefined,
     color: string,
@@ -2329,6 +2593,10 @@ export const LineChart = (props: propTypes) => {
         onMoveShouldSetResponder={evt => (pointerConfig ? true : false)}
         onResponderGrant={evt => {
           if (!pointerConfig) return;
+          setResponderStartTime(evt.timeStamp);
+          if (activatePointersOnLongPress) {
+            return;
+          }
           let x = evt.nativeEvent.locationX;
           let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
@@ -2338,19 +2606,77 @@ export const LineChart = (props: propTypes) => {
             initialSpacing +
             spacing * factor -
             (pointerRadius || pointerWidth / 2) -
-            3;
+            2;
           setPointerX(z);
-          let item = data[factor];
-          let y =
+          let item, y;
+          setPointerX(z);
+          item = data[factor];
+          y =
             containerHeight -
             (item.value * containerHeight) / maxValue -
             (pointerRadius || pointerHeight / 2) +
             10;
           setPointerY(y);
           setPointerItem(item);
+          if (data2 && data2.length) {
+            item = data2[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY2(y);
+              setPointerItem2(item);
+            }
+          }
+          if (data3 && data3.length) {
+            item = data3[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY3(y);
+              setPointerItem3(item);
+            }
+          }
+          if (data4 && data4.length) {
+            item = data4[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY4(y);
+              setPointerItem4(item);
+            }
+          }
+          if (data5 && data5.length) {
+            item = data5[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY5(y);
+              setPointerItem5(item);
+            }
+          }
         }}
         onResponderMove={evt => {
           if (!pointerConfig) return;
+          if (
+            activatePointersOnLongPress &&
+            evt.timeStamp - responderStartTime < activatePointersDelay
+          ) {
+            return;
+          } else {
+            setResponderActive(true);
+          }
           let x = evt.nativeEvent.locationX;
           let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
@@ -2360,18 +2686,69 @@ export const LineChart = (props: propTypes) => {
             initialSpacing +
             spacing * factor -
             (pointerRadius || pointerWidth / 2) -
-            3;
+            2;
+          let item, y;
           setPointerX(z);
-          let item = data[factor];
-          let y =
+          item = data[factor];
+          y =
             containerHeight -
             (item.value * containerHeight) / maxValue -
             (pointerRadius || pointerHeight / 2) +
             10;
           setPointerY(y);
           setPointerItem(item);
+          if (data2 && data2.length) {
+            item = data2[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY2(y);
+              setPointerItem2(item);
+            }
+          }
+          if (data3 && data3.length) {
+            item = data3[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY3(y);
+              setPointerItem3(item);
+            }
+          }
+          if (data4 && data4.length) {
+            item = data4[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY4(y);
+              setPointerItem4(item);
+            }
+          }
+          if (data5 && data5.length) {
+            item = data5[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY5(y);
+              setPointerItem5(item);
+            }
+          }
         }}
         onResponderRelease={evt => {
+          setResponderStartTime(0);
+          setResponderActive(false);
           setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
         style={{
@@ -2381,143 +2758,24 @@ export const LineChart = (props: propTypes) => {
           width: totalWidth,
           zIndex: 20,
         }}>
-        <Svg>
-          {strokeDashArray &&
-          strokeDashArray.length === 2 &&
-          typeof strokeDashArray[0] === 'number' &&
-          typeof strokeDashArray[1] === 'number' ? (
-            <Path
-              d={points}
-              fill="none"
-              stroke={color}
-              strokeWidth={currentLineThickness || thickness}
-              strokeDasharray={strokeDashArray}
-            />
-          ) : (
-            <Path
-              d={points}
-              fill="none"
-              stroke={color}
-              strokeWidth={currentLineThickness || thickness}
-            />
-          )}
-
-          {/***********************      For Area Chart        ************/}
-
-          {areaChart && (
-            <LinearGradient
-              id="Gradient"
-              x1="0"
-              y1="0"
-              x2={gradientDirection === 'horizontal' ? '1' : '0'}
-              y2={gradientDirection === 'vertical' ? '1' : '0'}>
-              <Stop
-                offset="0"
-                stopColor={startFillColor}
-                stopOpacity={startOpacity.toString()}
-              />
-              <Stop
-                offset="1"
-                stopColor={endFillColor}
-                stopOpacity={endOpacity.toString()}
-              />
-            </LinearGradient>
-          )}
-          {areaChart && (
-            <Path
-              d={fillPoints}
-              fill="url(#Gradient)"
-              stroke={'transparent'}
-              strokeWidth={currentLineThickness || thickness}
-            />
-          )}
-
-          {/******************************************************************/}
-
-          {renderSpecificVerticalLines(data)}
-          {renderSpecificVerticalLines(data2)}
-          {renderSpecificVerticalLines(data3)}
-          {renderSpecificVerticalLines(data4)}
-          {renderSpecificVerticalLines(data5)}
-
-          {/***  !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!!  ***/}
-          {!hideDataPoints1
-            ? renderDataPoints(
-                data,
-                dataPointsShape1,
-                dataPointsWidth1,
-                dataPointsHeight1,
-                dataPointsColor1,
-                dataPointsRadius1,
-                textColor1,
-                textFontSize1,
-                startIndex1,
-                endIndex1,
-              )
-            : null}
-          {!hideDataPoints2
-            ? renderDataPoints(
-                data2,
-                dataPointsShape2,
-                dataPointsWidth2,
-                dataPointsHeight2,
-                dataPointsColor2,
-                dataPointsRadius2,
-                textColor2,
-                textFontSize2,
-                startIndex2,
-                endIndex2,
-              )
-            : null}
-          {!hideDataPoints3
-            ? renderDataPoints(
-                data3,
-                dataPointsShape3,
-                dataPointsWidth3,
-                dataPointsHeight3,
-                dataPointsColor3,
-                dataPointsRadius3,
-                textColor3,
-                textFontSize3,
-                startIndex3,
-                endIndex3,
-              )
-            : null}
-          {!hideDataPoints4
-            ? renderDataPoints(
-                data4,
-                dataPointsShape4,
-                dataPointsWidth4,
-                dataPointsHeight4,
-                dataPointsColor4,
-                dataPointsRadius4,
-                textColor4,
-                textFontSize4,
-                startIndex4,
-                endIndex4,
-              )
-            : null}
-          {!hideDataPoints5
-            ? renderDataPoints(
-                data5,
-                dataPointsShape5,
-                dataPointsWidth5,
-                dataPointsHeight5,
-                dataPointsColor5,
-                dataPointsRadius5,
-                textColor5,
-                textFontSize5,
-                startIndex5,
-                endIndex5,
-              )
-            : null}
-        </Svg>
-        {pointerX ? renderPointer() : null}
+        {lineSvgComponent(
+          points,
+          currentLineThickness,
+          color,
+          fillPoints,
+          startFillColor,
+          endFillColor,
+          startOpacity,
+          endOpacity,
+          strokeDashArray,
+        )}
+        {pointerX ? renderPointer(lineNumber) : null}
       </View>
     );
   };
 
   const renderAnimatedLine = (
+    lineNumber: number,
     points: any,
     animatedWidth: any,
     currentLineThickness: number | undefined,
@@ -2536,6 +2794,10 @@ export const LineChart = (props: propTypes) => {
         onMoveShouldSetResponder={evt => (pointerConfig ? true : false)}
         onResponderGrant={evt => {
           if (!pointerConfig) return;
+          setResponderStartTime(evt.timeStamp);
+          if (activatePointersOnLongPress) {
+            return;
+          }
           let x = evt.nativeEvent.locationX;
           let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
@@ -2545,19 +2807,77 @@ export const LineChart = (props: propTypes) => {
             initialSpacing +
             spacing * factor -
             (pointerRadius || pointerWidth / 2) -
-            3;
+            2;
+          setPointerX(z);
+          let item, y;
           setPointerX(z);
-          let item = data[factor];
-          let y =
+          item = data[factor];
+          y =
             containerHeight -
             (item.value * containerHeight) / maxValue -
             (pointerRadius || pointerHeight / 2) +
             10;
           setPointerY(y);
           setPointerItem(item);
+          if (data2 && data2.length) {
+            item = data2[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY2(y);
+              setPointerItem2(item);
+            }
+          }
+          if (data3 && data3.length) {
+            item = data3[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY3(y);
+              setPointerItem3(item);
+            }
+          }
+          if (data4 && data4.length) {
+            item = data4[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY4(y);
+              setPointerItem4(item);
+            }
+          }
+          if (data5 && data5.length) {
+            item = data5[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY5(y);
+              setPointerItem5(item);
+            }
+          }
         }}
         onResponderMove={evt => {
           if (!pointerConfig) return;
+          if (
+            activatePointersOnLongPress &&
+            evt.timeStamp - responderStartTime < activatePointersDelay
+          ) {
+            return;
+          } else {
+            setResponderActive(true);
+          }
           let x = evt.nativeEvent.locationX;
           let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
@@ -2567,18 +2887,69 @@ export const LineChart = (props: propTypes) => {
             initialSpacing +
             spacing * factor -
             (pointerRadius || pointerWidth / 2) -
-            3;
+            2;
+          let item, y;
           setPointerX(z);
-          let item = data[factor];
-          let y =
+          item = data[factor];
+          y =
             containerHeight -
             (item.value * containerHeight) / maxValue -
             (pointerRadius || pointerHeight / 2) +
             10;
           setPointerY(y);
           setPointerItem(item);
+          if (data2 && data2.length) {
+            item = data2[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY2(y);
+              setPointerItem2(item);
+            }
+          }
+          if (data3 && data3.length) {
+            item = data3[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY3(y);
+              setPointerItem3(item);
+            }
+          }
+          if (data4 && data4.length) {
+            item = data4[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY4(y);
+              setPointerItem4(item);
+            }
+          }
+          if (data5 && data5.length) {
+            item = data5[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setPointerY5(y);
+              setPointerItem5(item);
+            }
+          }
         }}
         onResponderRelease={evt => {
+          setResponderStartTime(0);
+          setResponderActive(false);
           setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
         style={{
@@ -2589,138 +2960,18 @@ export const LineChart = (props: propTypes) => {
           zIndex: -1,
           // backgroundColor: 'wheat',
         }}>
-        <Svg>
-          {strokeDashArray &&
-          strokeDashArray.length === 2 &&
-          typeof strokeDashArray[0] === 'number' &&
-          typeof strokeDashArray[1] === 'number' ? (
-            <Path
-              d={points}
-              fill="none"
-              stroke={color}
-              strokeWidth={currentLineThickness || thickness}
-              strokeDasharray={strokeDashArray}
-            />
-          ) : (
-            <Path
-              d={points}
-              fill="none"
-              stroke={color}
-              strokeWidth={currentLineThickness || thickness}
-            />
-          )}
-
-          {/***********************      For Area Chart        ************/}
-
-          {areaChart && (
-            <LinearGradient
-              id="Gradient"
-              x1="0"
-              y1="0"
-              x2={gradientDirection === 'horizontal' ? '1' : '0'}
-              y2={gradientDirection === 'vertical' ? '1' : '0'}>
-              <Stop
-                offset="0"
-                stopColor={startFillColor}
-                stopOpacity={startOpacity.toString()}
-              />
-              <Stop
-                offset="1"
-                stopColor={endFillColor}
-                stopOpacity={endOpacity.toString()}
-              />
-            </LinearGradient>
-          )}
-          {areaChart && (
-            <Path
-              d={fillPoints}
-              fill="url(#Gradient)"
-              stroke={'transparent'}
-              strokeWidth={currentLineThickness || thickness}
-            />
-          )}
-
-          {/******************************************************************/}
-
-          {renderSpecificVerticalLines(data)}
-          {renderSpecificVerticalLines(data2)}
-          {renderSpecificVerticalLines(data3)}
-          {renderSpecificVerticalLines(data4)}
-          {renderSpecificVerticalLines(data5)}
-
-          {/***  !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!!  ***/}
-          {!hideDataPoints1
-            ? renderDataPoints(
-                data,
-                dataPointsShape1,
-                dataPointsWidth1,
-                dataPointsHeight1,
-                dataPointsColor1,
-                dataPointsRadius1,
-                textColor1,
-                textFontSize1,
-                startIndex1,
-                endIndex1,
-              )
-            : null}
-          {!hideDataPoints2
-            ? renderDataPoints(
-                data2,
-                dataPointsShape2,
-                dataPointsWidth2,
-                dataPointsHeight2,
-                dataPointsColor2,
-                dataPointsRadius2,
-                textColor2,
-                textFontSize2,
-                startIndex2,
-                endIndex2,
-              )
-            : null}
-          {!hideDataPoints3
-            ? renderDataPoints(
-                data3,
-                dataPointsShape3,
-                dataPointsWidth3,
-                dataPointsHeight3,
-                dataPointsColor3,
-                dataPointsRadius3,
-                textColor3,
-                textFontSize3,
-                startIndex3,
-                endIndex3,
-              )
-            : null}
-          {!hideDataPoints4
-            ? renderDataPoints(
-                data4,
-                dataPointsShape4,
-                dataPointsWidth4,
-                dataPointsHeight4,
-                dataPointsColor4,
-                dataPointsRadius4,
-                textColor4,
-                textFontSize4,
-                startIndex4,
-                endIndex4,
-              )
-            : null}
-          {!hideDataPoints5
-            ? renderDataPoints(
-                data5,
-                dataPointsShape5,
-                dataPointsWidth5,
-                dataPointsHeight5,
-                dataPointsColor5,
-                dataPointsRadius5,
-                textColor5,
-                textFontSize5,
-                startIndex5,
-                endIndex5,
-              )
-            : null}
-        </Svg>
-        {pointerX ? renderPointer() : null}
+        {lineSvgComponent(
+          points,
+          currentLineThickness,
+          color,
+          fillPoints,
+          startFillColor,
+          endFillColor,
+          startOpacity,
+          endOpacity,
+          strokeDashArray,
+        )}
+        {pointerX ? renderPointer(lineNumber) : null}
       </Animated.View>
     );
   };
@@ -2819,6 +3070,7 @@ export const LineChart = (props: propTypes) => {
 
         {isAnimated
           ? renderAnimatedLine(
+              1,
               points,
               animatedWidth,
               thickness1,
@@ -2831,6 +3083,7 @@ export const LineChart = (props: propTypes) => {
               strokeDashArray1,
             )
           : renderLine(
+              1,
               points,
               thickness1,
               color1,
@@ -2844,6 +3097,7 @@ export const LineChart = (props: propTypes) => {
         {points2
           ? isAnimated
             ? renderAnimatedLine(
+                2,
                 points2,
                 animatedWidth2,
                 thickness2,
@@ -2856,6 +3110,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray2,
               )
             : renderLine(
+                2,
                 points2,
                 thickness2,
                 color2,
@@ -2870,6 +3125,7 @@ export const LineChart = (props: propTypes) => {
         {points3
           ? isAnimated
             ? renderAnimatedLine(
+                3,
                 points3,
                 animatedWidth3,
                 thickness3,
@@ -2882,6 +3138,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray3,
               )
             : renderLine(
+                3,
                 points3,
                 thickness3,
                 color3,
@@ -2896,6 +3153,7 @@ export const LineChart = (props: propTypes) => {
         {points4
           ? isAnimated
             ? renderAnimatedLine(
+                4,
                 points4,
                 animatedWidth4,
                 thickness4,
@@ -2908,6 +3166,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray4,
               )
             : renderLine(
+                4,
                 points4,
                 thickness4,
                 color4,
@@ -2922,6 +3181,7 @@ export const LineChart = (props: propTypes) => {
         {points5
           ? isAnimated
             ? renderAnimatedLine(
+                5,
                 points5,
                 animatedWidth5,
                 thickness5,
@@ -2934,6 +3194,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray5,
               )
             : renderLine(
+                5,
                 points5,
                 thickness5,
                 color5,

package/src/PieChart/index.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 import {ColorValue, View} from 'react-native';
-import Svg, {Path, Circle, Text as SvgText, FontStyle} from 'react-native-svg';
+import Svg, {
+  Path,
+  Circle,
+  Text as SvgText,
+  FontStyle,
+  Defs,
+  RadialGradient,
+  Stop,
+} from 'react-native-svg';
 
 type propTypes = {
   radius?: number;
@@ -36,12 +44,17 @@ type propTypes = {
   tiltAngle?: string;
   initialAngle?: number;
   labelsPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
+  showGradient?: boolean;
+  gradientCenterColor?: string;
+  onPress?: Function;
+  onLabelPress?: Function;
 };
 type itemType = {
   value: number;
   shiftX?: number;
   shiftY?: number;
   color?: string;
+  gradientCenterColor?: string;
   text?: string;
   textColor?: string;
   textSize?: number;
@@ -53,6 +66,8 @@ type itemType = {
   shiftTextX?: number;
   shiftTextY?: number;
   labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
+  onPress?: Function;
+  onLabelPress?: Function;
 };
 
 export const PieChart = (props: propTypes) => {
@@ -102,6 +117,8 @@ export const PieChart = (props: propTypes) => {
   const showTextBackground = props.showTextBackground || false;
   const textBackgroundColor = props.textBackgroundColor || 'white';
   const showValuesAsLabels = props.showValuesAsLabels || false;
+  const showGradient = props.showGradient || false;
+  const gradientCenterColor = props.gradientCenterColor || 'white';
 
   const colors = [
     'cyan',
@@ -186,6 +203,32 @@ export const PieChart = (props: propTypes) => {
         }`}
         height={radius * 2 + strokeWidth}
         width={radius * 2 + strokeWidth}>
+        <Defs>
+          {data.map((item, index) => {
+            return (
+              <RadialGradient
+                id={'grad' + index}
+                cx="50%"
+                cy="50%"
+                rx="50%"
+                ry="50%"
+                fx="50%"
+                fy="50%"
+                gradientUnits="userSpaceOnUse">
+                <Stop
+                  offset="0%"
+                  stopColor={item.gradientCenterColor || gradientCenterColor}
+                  stopOpacity="1"
+                />
+                <Stop
+                  offset="100%"
+                  stopColor={item.color || colors[index % 9]}
+                  stopOpacity="1"
+                />
+              </RadialGradient>
+            );
+          })}
+        </Defs>
         {data.map((item, index) => {
           console.log('index', index);
           let nextItem;
@@ -219,14 +262,24 @@ export const PieChart = (props: propTypes) => {
               }`}
               stroke={strokeColor}
               strokeWidth={strokeWidth}
-              fill={item.color || colors[index % 9]}
+              fill={
+                showGradient
+                  ? `url(#grad${index})`
+                  : item.color || colors[index % 9]
+              }
+              onPress={() => {
+                item.onPress
+                  ? item.onPress
+                  : props.onPress
+                  ? props.onPress(item, index)
+                  : null;
+              }}
             />
           );
         })}
 
         {showText &&
           data.map((item, index) => {
-
             let mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));
             let my = cy * (1 - Math.cos(2 * pi * mData[index] + initialAngle));
 
@@ -270,6 +323,17 @@ export const PieChart = (props: propTypes) => {
                       textSize
                     }
                     fill={item.textBackgroundColor || textBackgroundColor}
+                    onPress={() => {
+                      item.onLabelPress
+                        ? item.onLabelPress()
+                        : props.onLabelPress
+                        ? props.onLabelPress(item, index)
+                        : item.onPress
+                        ? item.onPress()
+                        : props.onPress
+                        ? props.onPress(item, index)
+                        : null;
+                    }}
                   />
                 )}
                 <SvgText
@@ -283,7 +347,18 @@ export const PieChart = (props: propTypes) => {
                     (item.shiftTextX || 0) -
                     (item.textSize || textSize) / 1.8
                   }
-                  y={y + (item.shiftTextY || 0)}>
+                  y={y + (item.shiftTextY || 0)}
+                  onPress={() => {
+                    item.onLabelPress
+                      ? item.onLabelPress()
+                      : props.onLabelPress
+                      ? props.onLabelPress(item, index)
+                      : item.onPress
+                      ? item.onPress()
+                      : props.onPress
+                      ? props.onPress(item, index)
+                      : null;
+                  }}>
                   {item.text || (showValuesAsLabels ? item.value + '' : '')}
                 </SvgText>
               </>

package/src/todos.md

@@ -1,7 +1,6 @@
 ## Feature requests
 
 1. OnPress function on Pie Chart https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/111
-2. Change startingPoint default props on PieChart https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/132
 
 ## To-dos in documentation-
 
@@ -14,9 +13,10 @@
 7. Prepare a doc for Bar chart with barMarginBottom
 8. Prepare a doc for reference lines
 9. Prepare a doc for labelsPosition in Pie and Donut charts
+8. Prepare a doc for adjustToWidth in Line and Area charts
+9. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
 
 ## Architecture Enhancement
 
-1. Get rid of canvas (currently being used only for Pie charts)
-2. Make it compliant with React js
-3. Write tests
+1. Make it compliant with React js
+2. Write tests