Merge pull request #242 from Abhinandan-Kushwaha/abhi

Added leftShiftForTooltip to Bar and stack charts

docs/BarChart/BarChartProps.md

@@ -30,6 +30,7 @@
 | scrollAnimation | Boolean | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | true |
 | initialSpacing         | number     | distance of the first bar from the Y axis                                      | 40 |
 | renderTooltip          | Function   | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | null |
+| leftShiftForTooltip    | number     | The distance by which the tooltip component should shift towards left                   | 0 |
 | leftShiftForLastIndexTooltip | number | The distance by which the tooltip component of the last bar should shift towards left | 0 |
 
 ---
@@ -109,6 +110,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
 | spacing                | number     | Distance of the next Bar from the currennt Bar                                 |
 | barBackgroundPattern   | Component  | A svg component containing the background pattern for bars                     |
 | patternId              | String     | ID of the pattern component                                                    | 
+| leftShiftForTooltip    | number     | The distance by which the tooltip component should shift towards left         |
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.37",
+  "version": "1.2.38",
   "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/BarChart/RenderBars.tsx

@@ -64,6 +64,7 @@ type Props = {
   onPress?: Function;
   xAxisTextNumberOfLines: number;
   renderTooltip: Function;
+  leftShiftForTooltip?: number;
   leftShiftForLastIndexTooltip: number;
   initialSpacing: number;
   selectedIndex: number;
@@ -95,6 +96,7 @@ type itemType = {
   barBackgroundPattern?: Function;
   patternId?: String;
   barMarginBottom?: number;
+  leftShiftForTooltip?: number;
 };
 const RenderBars = (props: Props) => {
   const {
@@ -120,6 +122,7 @@ const RenderBars = (props: Props) => {
     labelTextStyle,
     xAxisTextNumberOfLines,
     renderTooltip,
+    leftShiftForTooltip,
     leftShiftForLastIndexTooltip,
     initialSpacing,
     selectedIndex,
@@ -580,7 +583,8 @@ const RenderBars = (props: Props) => {
             left:
               index === data.length - 1
                 ? leftSpacing - leftShiftForLastIndexTooltip
-                : leftSpacing,
+                : leftSpacing -
+                  (item.leftShiftForTooltip ?? leftShiftForTooltip),
             zIndex: 1000,
           }}>
           {renderTooltip(item, index)}

src/BarChart/RenderStackBars.tsx

@@ -39,6 +39,7 @@ type Props = {
   patternId?: String;
   xAxisTextNumberOfLines: number;
   renderTooltip: Function;
+  leftShiftForTooltip?: number;
   leftShiftForLastIndexTooltip: number;
   initialSpacing: number;
   selectedIndex: number;
@@ -70,6 +71,7 @@ type itemType = {
   barBackgroundPattern?: Function;
   barBorderRadius?: Number;
   patternId?: String;
+  leftShiftForTooltip?: number;
 };
 const RenderStackBars = (props: Props) => {
   const {
@@ -87,13 +89,13 @@ const RenderStackBars = (props: Props) => {
     labelTextStyle,
     xAxisTextNumberOfLines,
     renderTooltip,
+    leftShiftForTooltip,
     leftShiftForLastIndexTooltip,
     initialSpacing,
     selectedIndex,
     setSelectedIndex,
     activeOpacity,
     stackData,
-    data,
   } = props;
   let leftSpacing = initialSpacing;
   for (let i = 0; i < index; i++) {
@@ -328,9 +330,10 @@ const RenderStackBars = (props: Props) => {
             position: 'absolute',
             bottom: totalHeight + 60,
             left:
-              index === data.length - 1
+              index === stackData.length - 1
                 ? leftSpacing - leftShiftForLastIndexTooltip
-                : leftSpacing,
+                : leftSpacing -
+                  (item.leftShiftForTooltip ?? leftShiftForTooltip),
             zIndex: 1000,
           }}>
           {renderTooltip(item, index)}

src/BarChart/index.tsx

@@ -144,6 +144,7 @@ type PropTypes = {
   barMarginBottom?: number;
   onPress?: Function;
   renderTooltip?: Function;
+  leftShiftForTooltip?: number;
   leftShiftForLastIndexTooltip?: number;
 };
 type lineConfigType = {
@@ -1542,6 +1543,7 @@ export const BarChart = (props: PropTypes) => {
                     onPress={props.onPress}
                     xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                     renderTooltip={props.renderTooltip}
+                    leftShiftForTooltip={props.leftShiftForTooltip || 0}
                     leftShiftForLastIndexTooltip={
                       props.leftShiftForLastIndexTooltip || 0
                     }
@@ -1610,6 +1612,7 @@ export const BarChart = (props: PropTypes) => {
                   onPress={props.onPress}
                   xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                   renderTooltip={props.renderTooltip}
+                  leftShiftForTooltip={props.leftShiftForTooltip || 0}
                   leftShiftForLastIndexTooltip={
                     props.leftShiftForLastIndexTooltip || 0
                   }