Added multi-pointer support to Line and Area Charts

App.js

@@ -670,6 +670,19 @@ const App = () => {
     {value: -6, label: 'Wed'},
     {value: 30, label: 'Thu'},
   ];
+  const barData3 = [
+    {
+      value: 15,
+      label: 'Mon',
+    },
+    {value: 10, label: 'Tue'},
+    {value: -3, label: 'Wed'},
+    {value: 20, label: 'Thu'},
+    {value: -6, label: 'Wed'},
+    {value: 20, label: 'Thu'},
+    {value: -6, label: 'Wed'},
+    {value: 20, label: 'Thu'},
+  ];
 
   const sdata = [
     {
@@ -1229,7 +1242,13 @@ const App = () => {
       <LineChart
         // width={200}
         // height={300}
-        pointerConfig={{}}
+        pointerConfig={{
+          activatePointersOnLongPress: true,
+          pointerColor: 'green',
+          pointer3Color: 'red',
+          pointer2Color: 'orange',
+          hidePointer2: true,
+        }}
         // isAnimated
         // rotateLabel
         // barWidth={32}
@@ -1240,9 +1259,12 @@ const App = () => {
         // data2={lineData2}
         data={barData}
         data2={barData2}
+        data3={barData3}
         hideDataPoints
-        color2='red'
-        // curved
+        color2="red"
+        color3="green"
+        thickness3={3}
+        curved
         // initialSpacing={90}
         // stackData={stackData}
         // horizontal

docs/LineChart/LineChartProps.md

@@ -276,7 +276,12 @@ type Pointer = {
   height?: number; // default: 0
   width?: number; // default: 0
   radius?: number; // default: 5
-  color?: ColorValue; // default: 'red'
+  pointerColor?: ColorValue; // default: 'red
+  pointer1Color?: ColorValue; // default: 'red
+  pointer2Color?: ColorValue; // default: 'red
+  pointer3Color?: ColorValue; // default: 'red
+  pointer4Color?: ColorValue; // default: 'red
+  pointer5Color?: ColorValue; // default: 'red
   pointerComponent?: Function; // default: null
   showPointerStrip?: boolean; // default: true
   pointerStripWidth?: number; // default: containerHeight
@@ -290,6 +295,11 @@ type Pointer = {
   pointerVanishDelay?: number; // default: 150
   activatePointersOnLongPress?: boolean; // default: false
   activatePointersDelay?: number; // default: 150
+  hidePointer1?: boolean; // default: false
+  hidePointer2?: boolean; // default: false
+  hidePointer3?: boolean; // default: false
+  hidePointer4?: boolean; // default: false
+  hidePointer5?: boolean; // default: false
 };
 ```
 

package.json

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