Merge branch 'master' of https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts into abhi

App.js

@@ -946,39 +946,86 @@ const App = () => {
     {value: 0.7, label: '6'},
   ];
 
-  const [myData, setMyData] = useState([]);
-
-  useEffect(() => {
-    setTimeout(() => setMyData(barDatas), 500);
-  }, []);
+  const llData = [
+    {value: 70},
+    {value: 36},
+    {value: 50},
+    {value: 40},
+    {value: 18},
+    {value: 38},
+  ];
+  const llData2 = [
+    {value: 50},
+    {value: 10},
+    {value: 45},
+    {value: 30},
+    {value: 45},
+    {value: 18},
+  ];
 
   return (
     <View
       style={{
-        // flex: 1,
         paddingVertical: 100,
         paddingLeft: 20,
-        // backgroundColor: 'black',
+        backgroundColor: '#1C1C1C',
       }}>
       <LineChart
         areaChart
-        showFractionalValues
-        showYAxisIndices
-        showXAxisIndices
-        hideRules
-        noOfSections={5}
-        adjustToWidth
-        data={myData}
-        showGradient
-        frontColor={'#1B6BB0'}
-        gradientColor={'#FFEEFE'}
-        backgroundColor={'#FECF9E'}
-        onPress={onBarPressed}
-        // isAnimated
-        // animateOnDataChange
-        startOpacity={0}
-
+        curved
+        data={llData}
+        data2={llData2}
+        hideDataPoints
+        spacing={68}
+        color1="#8a56ce"
+        color2="#56acce"
+        startFillColor1="#8a56ce"
+        startFillColor2="#56acce"
+        endFillColor1="#8a56ce"
+        endFillColor2="#56acce"
+        startOpacity={0.9}
+        endOpacity={0.2}
+        initialSpacing={0}
+        noOfSections={4}
+        yAxisColor="white"
+        yAxisThickness={0.001}
+        rulesType="solid"
+        rulesColor="gray"
+        yAxisTextStyle={{color: 'gray'}}
+        yAxisLabelSuffix="%"
+        xAxisColor="lightgray"
+        pointerConfig={{
+          pointerStripUptoDataPoint: true,
+          pointerStripColor: 'lightgray',
+          pointerStripWidth: 2,
+          strokeDashArray: [2, 5],
+          pointerColor: 'lightgray',
+          radius: 4,
+          pointerLabelWidth: 100,
+          pointerLabelComponent: items => {
+            return (
+              <View
+                style={{
+                  height: 120,
+                  width: 100,
+                  backgroundColor: '#282C3E',
+                  position: 'absolute',
+                  left: -40,
+                  top: -90,
+                  borderRadius: 4,
+                  justifyContent:'center',
+                  paddingLeft:16,
+                }}>
+                <Text style={{color: 'lightgray',fontSize:12}}>{2018}</Text>
+                <Text style={{color: 'white', fontWeight:'bold'}}>{items[0].value}</Text>
+                <Text style={{color: 'lightgray',fontSize:12,marginTop:12}}>{2019}</Text>
+                <Text style={{color: 'white', fontWeight:'bold'}}>{items[1].value}</Text>
+              </View>
+            );
+          },
+        }}
       />
+
       {/* <BarChart
         data={pieData}
         radius={150}

docs/LineChart/LineChartProps.md

@@ -300,6 +300,7 @@ type Pointer = {
   hidePointer3?: boolean; // default: false
   hidePointer4?: boolean; // default: false
   hidePointer5?: boolean; // default: false
+  strokeDashArray?: Array<number>;
 };
 ```
 
@@ -311,6 +312,12 @@ The above properties can be understood with this labelled diagram-
 **Note** If you are using the `pointerConfig` prop, the scroll will be disabled automatically. This is because, it's difficult to achive both scrolling line and scrolling pointer simultaneously. So if you want to retain the scroll behaviour even after passing the `pointerConfig` prop, then set the property `activatePointersOnLongPress` to true inside the pointerConfig object. This will make the pointers visible only after long press. So, before the long press, user can can scroll the line. Once long pressed, scrolling will be disabled until the release of the long press.
   The duration after which a press event will be considered as long press can be controlled using the `activatePointersDelay` property inside the pointerConfig object. The default value of activatePointersDelay is 150.
 
+The <b>strokeDashArray</b> property lets us render a dashed/dotted strip along the pointer.
+
+#### pointerLabelComponent
+
+<b>pointerLabelComponent</b> is a function that returns the component to be rendered as a Label. It takes a single parameter - an array of items. So, if there are multiple data arrays, the parameter <b>items</b> will have the data item corresponding to each data array.
+
 
 ### onPress and strip related props
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

src/LineChart/index.tsx

@@ -22,6 +22,7 @@ import Svg, {
   Circle,
   Rect,
   Text as CanvasText,
+  Line,
 } from 'react-native-svg';
 import {svgPath, bezierCommand} from '../utils';
 import Rule from '../Components/lineSvg';
@@ -347,6 +348,7 @@ type Pointer = {
   hidePointer3?: boolean;
   hidePointer4?: boolean;
   hidePointer5?: boolean;
+  strokeDashArray?: Array<number>;
 };
 
 export const LineChart = (props: propTypes) => {
@@ -2399,24 +2401,77 @@ export const LineChart = (props: propTypes) => {
             }}
           />
         )}
+      </View>
+    );
+  };
+
+  const renderStripAndLabel = () => {
+    let pointerItemLocal, pointerYLocal;
+
+    pointerItemLocal = [pointerItem];
+    let arr = [pointerY];
+    if (pointerY2 !== 0) {
+      arr.push(pointerY2);
+      pointerItemLocal.push(pointerItem2);
+    }
+    if (pointerY3 !== 0) {
+      arr.push(pointerY3);
+      pointerItemLocal.push(pointerItem3);
+    }
+    if (pointerY4 !== 0) {
+      arr.push(pointerY4);
+      pointerItemLocal.push(pointerItem4);
+    }
+    if (pointerY5 !== 0) {
+      arr.push(pointerY5);
+      pointerItemLocal.push(pointerItem5);
+    }
+    pointerYLocal = Math.min(...arr);
+
+    return (
+      <View
+        style={{
+          position: 'absolute',
+          left: pointerX + (pointerItemLocal[0].pointerShiftX || 0),
+          top: pointerYLocal,
+        }}>
         {showPointerStrip && (
           <View
             style={{
               position: 'absolute',
-              left: pointerRadius || pointerWidth / 2,
+              left: (pointerRadius || pointerWidth) - pointerStripWidth / 4,
               top: pointerStripUptoDataPoint
                 ? pointerRadius || pointerStripHeight / 2
                 : -pointerYLocal + 8,
-              height: pointerStripUptoDataPoint
-                ? containerHeight - pointerYLocal - 10
-                : pointerStripHeight,
               width: pointerStripWidth,
-              backgroundColor: pointerStripColor,
+              height: pointerStripUptoDataPoint
+                ? containerHeight - pointerYLocal + 5 - xAxisThickness
+                : pointerStripHeight,
               marginTop: pointerStripUptoDataPoint
                 ? 0
                 : containerHeight - pointerStripHeight,
-            }}
-          />
+            }}>
+            <Svg>
+              <Line
+                stroke={pointerStripColor}
+                strokeWidth={pointerStripWidth}
+                strokeDasharray={
+                  pointerConfig.strokeDashArray
+                    ? pointerConfig.strokeDashArray
+                    : ''
+                }
+                x1={0}
+                y1={0}
+                x2={0}
+                // strokeLinecap="round"
+                y2={
+                  pointerStripUptoDataPoint
+                    ? containerHeight - pointerYLocal + 5 - xAxisThickness
+                    : pointerStripHeight
+                }
+              />
+            </Svg>
+          </View>
         )}
 
         {pointerLabelComponent && (
@@ -2783,7 +2838,6 @@ export const LineChart = (props: propTypes) => {
           endOpacity,
           strokeDashArray,
         )}
-        {pointerX ? renderPointer(lineNumber) : null}
       </View>
     );
   };
@@ -2985,7 +3039,6 @@ export const LineChart = (props: propTypes) => {
           endOpacity,
           strokeDashArray,
         )}
-        {pointerX ? renderPointer(lineNumber) : null}
       </Animated.View>
     );
   };
@@ -3220,6 +3273,24 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray5,
               )
           : null}
+        {pointerX ? (
+          <View
+            style={{
+              position: 'absolute',
+              height:
+                containerHeight + 10 + horizSectionsBelow.length * stepHeight,
+              bottom: 60 + labelsExtraHeight,
+              width: totalWidth,
+              zIndex: 20,
+            }}>
+            {renderPointer(1)}
+            {points2 ? renderPointer(2) : null}
+            {points3 ? renderPointer(3) : null}
+            {points4 ? renderPointer(4) : null}
+            {points5 ? renderPointer(5) : null}
+            {renderStripAndLabel()}
+          </View>
+        ) : null}
         {data.map((item: itemType, index: number) => {
           // console.log('item', item)
           return (