react-native-gifted-charts 1.2.2 → 1.2.5

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.2",
+  "version": "1.2.5",
   "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/RenderBars.tsx

@@ -25,6 +25,7 @@ type Props = {
 
   item: itemType;
   index: number;
+  label: String;
   containerHeight?: number;
   maxValue: number;
   spacing?: number;
@@ -108,6 +109,8 @@ const RenderBars = (props: Props) => {
     opacity,
     animationDuration,
     autoShiftLabels,
+    label,
+    labelTextStyle,
   } = props;
 
   const barMarginBottom =
@@ -527,8 +530,8 @@ const RenderBars = (props: Props) => {
         />
       )}
       {isAnimated
-        ? renderAnimatedLabel(item.label || '', item.labelTextStyle, item.value)
-        : renderLabel(item.label || '', item.labelTextStyle, item.value)}
+        ? renderAnimatedLabel(label, labelTextStyle, item.value)
+        : renderLabel(label, labelTextStyle, item.value)}
     </TouchableOpacity>
   );
 };

package/src/BarChart/RenderStackBars.tsx

@@ -11,6 +11,7 @@ type Props = {
   topLabelComponent?: Component;
   topLabelContainerStyle?: Style;
   opacity?: number;
+  label: String;
   labelTextStyle?: any;
   disablePress?: boolean;
 
@@ -66,6 +67,8 @@ const RenderStackBars = (props: Props) => {
     spacing,
     rotateLabel,
     xAxisThickness,
+    label,
+    labelTextStyle,
   } = props;
   const disablePress = props.disablePress || false;
   const renderLabel = (label: String, labelTextStyle: any) => {
@@ -246,7 +249,7 @@ const RenderStackBars = (props: Props) => {
         />
       )}
       {static2DSimple(item)}
-      {renderLabel(item.label || '', item.labelTextStyle)}
+      {renderLabel(label || '', labelTextStyle)}
     </View>
   );
 };

package/src/BarChart/index.tsx

@@ -119,6 +119,8 @@ type PropTypes = {
   hideOrigin?: Boolean;
   labelWidth?: number;
   yAxisLabelTexts?: Array<string>;
+  xAxisLabelTexts?: Array<string>;
+  xAxisLabelTextStyle?: any;
   yAxisLabelPrefix?: String;
   yAxisLabelSuffix?: String;
   autoShiftLabels?: Boolean;
@@ -1385,6 +1387,15 @@ export const BarChart = (props: PropTypes) => {
                     barBorderRadius={props.barBorderRadius}
                     barBackgroundPattern={props.barBackgroundPattern}
                     patternId={props.patternId}
+                    label={
+                      item.label ||
+                      (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                        ? props.xAxisLabelTexts[index]
+                        : '')
+                    }
+                    labelTextStyle={
+                      item.labelTextStyle || props.xAxisLabelTextStyle
+                    }
                   />
                 );
               })
@@ -1436,6 +1447,15 @@ export const BarChart = (props: PropTypes) => {
                   barBackgroundPattern={props.barBackgroundPattern}
                   patternId={props.patternId}
                   barMarginBottom={props.barMarginBottom}
+                  label={
+                    item.label ||
+                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                      ? props.xAxisLabelTexts[index]
+                      : '')
+                  }
+                  labelTextStyle={
+                    item.labelTextStyle || props.xAxisLabelTextStyle
+                  }
                 />
               ))}
         </Fragment>

package/src/LineChart/index.tsx

@@ -247,6 +247,8 @@ type propTypes = {
   textShiftX?: number;
   textShiftY?: number;
   yAxisLabelTexts?: Array<string>;
+  xAxisLabelTexts?: Array<string>;
+  xAxisLabelTextStyle?: any;
   width?: number;
   yAxisLabelPrefix?: String;
   yAxisLabelSuffix?: String;
@@ -254,6 +256,7 @@ type propTypes = {
   scrollAnimation?: Boolean;
   noOfSectionsBelowXAxis?: number;
   labelsExtraHeight?: number;
+  adjustToWidth?: Boolean;
 };
 type referenceConfigType = {
   thickness: number;
@@ -320,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;
@@ -332,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) => {
@@ -342,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('');
@@ -422,7 +459,15 @@ export const LineChart = (props: propTypes) => {
     props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
   const thickness = props.thickness || 2;
 
-  const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
+  const adjustToWidth = props.adjustToWidth || false;
+
+  const spacing =
+    props.spacing === 0
+      ? 0
+      : props.spacing ||
+        (adjustToWidth
+          ? ((props.width || 200) - initialSpacing) / data.length
+          : 60);
 
   const xAxisThickness = props.xAxisThickness || 1;
   const dataPointsHeight1 =
@@ -1156,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;
@@ -1257,7 +1307,7 @@ export const LineChart = (props: propTypes) => {
     height: 0,
     width: 0,
     radius: 5,
-    color: 'red',
+    pointerColor: 'red',
     pointerComponent: null,
     showPointerStrip: true,
     pointerStripHeight: containerHeight,
@@ -1268,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;
 
@@ -2236,13 +2328,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()
@@ -2251,8 +2377,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,
             }}
           />
@@ -2264,9 +2390,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,
@@ -2286,7 +2412,7 @@ export const LineChart = (props: propTypes) => {
               top:
                 (pointerStripUptoDataPoint
                   ? pointerRadius || pointerStripHeight / 2
-                  : -pointerY + 8) -
+                  : -pointerYLocal + 8) -
                 pointerLabelWidth / 2 +
                 shiftPointerLabelY,
               marginTop: pointerStripUptoDataPoint
@@ -2294,14 +2420,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,
@@ -2318,6 +2591,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);
@@ -2327,19 +2604,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);
@@ -2349,18 +2684,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={{
@@ -2370,143 +2756,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,
@@ -2525,6 +2792,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);
@@ -2534,19 +2805,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);
@@ -2556,18 +2885,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={{
@@ -2578,138 +2958,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>
     );
   };
@@ -2808,6 +3068,7 @@ export const LineChart = (props: propTypes) => {
 
         {isAnimated
           ? renderAnimatedLine(
+              1,
               points,
               animatedWidth,
               thickness1,
@@ -2820,6 +3081,7 @@ export const LineChart = (props: propTypes) => {
               strokeDashArray1,
             )
           : renderLine(
+              1,
               points,
               thickness1,
               color1,
@@ -2833,6 +3095,7 @@ export const LineChart = (props: propTypes) => {
         {points2
           ? isAnimated
             ? renderAnimatedLine(
+                2,
                 points2,
                 animatedWidth2,
                 thickness2,
@@ -2845,6 +3108,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray2,
               )
             : renderLine(
+                2,
                 points2,
                 thickness2,
                 color2,
@@ -2859,6 +3123,7 @@ export const LineChart = (props: propTypes) => {
         {points3
           ? isAnimated
             ? renderAnimatedLine(
+                3,
                 points3,
                 animatedWidth3,
                 thickness3,
@@ -2871,6 +3136,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray3,
               )
             : renderLine(
+                3,
                 points3,
                 thickness3,
                 color3,
@@ -2885,6 +3151,7 @@ export const LineChart = (props: propTypes) => {
         {points4
           ? isAnimated
             ? renderAnimatedLine(
+                4,
                 points4,
                 animatedWidth4,
                 thickness4,
@@ -2897,6 +3164,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray4,
               )
             : renderLine(
+                4,
                 points4,
                 thickness4,
                 color4,
@@ -2911,6 +3179,7 @@ export const LineChart = (props: propTypes) => {
         {points5
           ? isAnimated
             ? renderAnimatedLine(
+                5,
                 points5,
                 animatedWidth5,
                 thickness5,
@@ -2923,6 +3192,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray5,
               )
             : renderLine(
+                5,
                 points5,
                 thickness5,
                 color5,
@@ -2941,14 +3211,20 @@ export const LineChart = (props: propTypes) => {
               {isAnimated
                 ? renderAnimatedLabel(
                     index,
-                    item.label,
-                    item.labelTextStyle,
+                    item.label ||
+                      (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                        ? props.xAxisLabelTexts[index]
+                        : ''),
+                    item.labelTextStyle || props.xAxisLabelTextStyle,
                     item.labelComponent,
                   )
                 : renderLabel(
                     index,
-                    item.label,
-                    item.labelTextStyle,
+                    item.label ||
+                      (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                        ? props.xAxisLabelTexts[index]
+                        : ''),
+                    item.labelTextStyle || props.xAxisLabelTextStyle,
                     item.labelComponent,
                   )}
               {/* {renderLabel(index, item.label, item.labelTextStyle)} */}

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