react-native-gifted-charts 1.2.29 → 1.2.32

package/package.json

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

@@ -40,10 +40,12 @@ type PropTypes = {
   // animationEasing?: any;
   opacity?: number;
   isThreeD?: Boolean;
+  xAxisLength?: number;
   xAxisThickness?: number;
   xAxisColor?: ColorValue;
   yAxisThickness?: number;
   yAxisColor?: ColorValue;
+  xAxisType?: String;
   yAxisLabelContainerStyle?: any;
   horizontalRulesStyle?: any;
   yAxisTextStyle?: any;
@@ -52,6 +54,7 @@ type PropTypes = {
   yAxisLabelWidth?: number;
   hideYAxisText?: Boolean;
   yAxisSide?: string;
+  yAxisOffset?: number;
   initialSpacing?: number;
   barWidth?: number;
   sideWidth?: number;
@@ -66,6 +69,7 @@ type PropTypes = {
 
   hideAxesAndRules?: Boolean;
   hideRules?: Boolean;
+  rulesLength?: number;
   rulesColor?: ColorValue;
   rulesThickness?: number;
   rulesType?: String;
@@ -103,6 +107,7 @@ type PropTypes = {
 
   disableScroll?: Boolean;
   showScrollIndicator?: Boolean;
+  indicatorColor?: 'black' | 'default' | 'white';
   roundedTop?: Boolean;
   roundedBottom?: Boolean;
   disablePress?: boolean;
@@ -200,7 +205,18 @@ export const BarChart = (props: PropTypes) => {
   const showLine = props.showLine || false;
   const initialSpacing =
     props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
-  const data = useMemo(() => props.data || [], [props.data]);
+  const data = useMemo(() => {
+    if (!props.data) {
+      return [];
+    }
+    if (props.yAxisOffset) {
+      return props.data.map(item => {
+        item.value = item.value - props.yAxisOffset;
+        return item;
+      });
+    }
+    return props.data;
+  }, [props.yAxisOffset, props.data]);
   const lineData = props.lineData || data;
   const defaultLineConfig = {
     initialSpacing: initialSpacing,
@@ -346,6 +362,7 @@ export const BarChart = (props: PropTypes) => {
   const showVerticalLines = props.showVerticalLines || false;
   const rulesThickness =
     props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
+  const rulesLength = props.rulesLength;
   const rulesColor = props.rulesColor || 'lightgray';
   const verticalLinesThickness =
     props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
@@ -377,6 +394,7 @@ export const BarChart = (props: PropTypes) => {
     props.xAxisThickness === 0
       ? props.xAxisThickness
       : props.xAxisThickness || 1;
+  const xAxisLength = props.xAxisLength;
   const xAxisColor = props.xAxisColor || 'black';
 
   const hideRules = props.hideRules || false;
@@ -402,6 +420,7 @@ export const BarChart = (props: PropTypes) => {
   const hideOrigin = props.hideOrigin || false;
 
   const rulesType = props.rulesType || 'line';
+  const xAxisType = props.xAxisType || 'solid';
   const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
   const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
 
@@ -650,15 +669,20 @@ export const BarChart = (props: PropTypes) => {
       (props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
     ) {
       if (val) {
-        label = val;
+        label = props.yAxisOffset
+          ? (Number(val) + props.yAxisOffset).toString()
+          : val;
       } else {
-        label = '0';
+        label = props.yAxisOffset ? props.yAxisOffset.toString() : '0';
       }
     } else {
       if (val) {
         label = val.toString().split('.')[0];
+        if (props.yAxisOffset) {
+          label = (Number(label) + props.yAxisOffset).toString();
+        }
       } else {
-        label = '0';
+        label = props.yAxisOffset ? props.yAxisOffset.toString() : '0';
       }
     }
 
@@ -715,20 +739,30 @@ export const BarChart = (props: PropTypes) => {
                   {backgroundColor: backgroundColor},
                 ]}>
                 {index === noOfSections ? (
-                  <View
-                    style={[
-                      styles.lastLine,
-                      {height: xAxisThickness, backgroundColor: xAxisColor},
-                    ]}
+                  <Rule
+                    config={{
+                      thickness: xAxisThickness,
+                      color: xAxisColor,
+                      width:
+                        xAxisLength ||
+                        (horizontal
+                          ? props.width || Math.min(300, totalWidth)
+                          : (props.width || totalWidth) + 11),
+                      dashWidth: dashWidth,
+                      dashGap: dashGap,
+                      type: xAxisType,
+                    }}
                   />
                 ) : hideRules ? null : (
                   <Rule
                     config={{
                       thickness: rulesThickness,
                       color: rulesColor,
-                      width: horizontal
-                        ? props.width || Math.min(300, totalWidth)
-                        : (props.width || totalWidth) + 11,
+                      width:
+                        rulesLength ||
+                        (horizontal
+                          ? props.width || Math.min(300, totalWidth)
+                          : (props.width || totalWidth) + 11),
                       dashWidth: dashWidth,
                       dashGap: dashGap,
                       type: rulesType,
@@ -846,9 +880,11 @@ export const BarChart = (props: PropTypes) => {
                     config={{
                       thickness: rulesThickness,
                       color: rulesColor,
-                      width: horizontal
-                        ? props.width || totalWidth
-                        : (props.width || totalWidth) + 11,
+                      width:
+                        rulesLength ||
+                        (horizontal
+                          ? props.width || totalWidth
+                          : (props.width || totalWidth) + 11),
                       dashWidth: dashWidth,
                       dashGap: dashGap,
                       type: rulesType,
@@ -1379,6 +1415,7 @@ export const BarChart = (props: PropTypes) => {
           !props.width && {width: totalWidth},
         ]}
         showsHorizontalScrollIndicator={showScrollIndicator}
+        indicatorStyle={props.indicatorColor}
         horizontal
         // data={props.stackData || data}
         keyExtractor={(item, index) => index.toString()}>

package/src/LineChart/index.tsx

@@ -69,9 +69,12 @@ type propTypes = {
   onDataChangeAnimationDuration?: number;
   animationEasing?: any;
   animateTogether?: boolean;
+  xAxisLength?: number;
   xAxisThickness?: number;
   xAxisColor?: ColorValue;
+  xAxisType?: String;
   hideRules?: Boolean;
+  rulesLength?: number;
   rulesColor?: ColorValue;
   rulesThickness?: number;
   pressEnabled?: Boolean;
@@ -119,6 +122,7 @@ type propTypes = {
   disableScroll?: Boolean;
   pointerConfig?: Pointer;
   showScrollIndicator?: Boolean;
+  indicatorColor?: 'black' | 'default' | 'white';
 
   //Indices
 
@@ -369,6 +373,7 @@ type Pointer = {
 
 export const LineChart = (props: propTypes) => {
   const scrollRef = useRef();
+  const [scrollX, setScrollX] = useState(0);
   const [pointerIndex, setPointerIndex] = useState(-1);
   const [pointerX, setPointerX] = useState(0);
   const [pointerY, setPointerY] = useState(0);
@@ -546,6 +551,7 @@ export const LineChart = (props: propTypes) => {
           ? ((props.width || 200) - initialSpacing) / data.length
           : 60);
 
+  const xAxisLength = props.xAxisLength;
   const xAxisThickness =
     props.xAxisThickness === 0 ? 0 : props.xAxisThickness || 1;
   const dataPointsHeight1 =
@@ -1367,6 +1373,7 @@ export const LineChart = (props: propTypes) => {
 
   const rulesThickness =
     props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
+  const rulesLength = props.rulesLength;
   const rulesColor = props.rulesColor || 'lightgray';
   const verticalLinesThickness =
     props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
@@ -1554,6 +1561,7 @@ export const LineChart = (props: propTypes) => {
   const hideOrigin = props.hideOrigin || false;
 
   const rulesType = props.rulesType || 'line';
+  const xAxisType = props.xAxisType || 'solid';
   const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
   const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
 
@@ -1855,18 +1863,22 @@ export const LineChart = (props: propTypes) => {
                     },
                   ]}>
                   {index === noOfSections ? (
-                    <View
-                      style={[
-                        styles.lastLine,
-                        {height: xAxisThickness, backgroundColor: xAxisColor},
-                      ]}
+                    <Rule
+                      config={{
+                        thickness: xAxisThickness,
+                        color: xAxisColor,
+                        width: xAxisLength || (props.width || totalWidth) + 11,
+                        dashWidth: dashWidth,
+                        dashGap: dashGap,
+                        type: xAxisType,
+                      }}
                     />
                   ) : hideRules ? null : (
                     <Rule
                       config={{
                         thickness: rulesThickness,
                         color: rulesColor,
-                        width: (props.width || totalWidth) + 11,
+                        width: rulesLength || (props.width || totalWidth) + 11,
                         dashWidth: dashWidth,
                         dashGap: dashGap,
                         type: rulesType,
@@ -1979,7 +1991,7 @@ export const LineChart = (props: propTypes) => {
                     config={{
                       thickness: rulesThickness,
                       color: rulesColor,
-                      width: (props.width || totalWidth) + 11,
+                      width: rulesLength || (props.width || totalWidth) + 11,
                       dashWidth: dashWidth,
                       dashGap: dashGap,
                       type: rulesType,
@@ -2550,6 +2562,11 @@ export const LineChart = (props: propTypes) => {
     if (autoAdjustPointerLabelPosition) {
       if (pointerX < pointerLabelWidth / 2) {
         left = 7;
+      } else if (
+        activatePointersOnLongPress &&
+        pointerX - scrollX < pointerLabelWidth / 2 - 10
+      ) {
+        left = 7;
       } else {
         if (
           !activatePointersOnLongPress &&
@@ -2561,7 +2578,10 @@ export const LineChart = (props: propTypes) => {
           left = -pointerLabelWidth - 4;
         } else if (
           activatePointersOnLongPress &&
-          pointerX > totalWidth - yAxisLabelWidth - pointerLabelWidth / 2
+          pointerX - scrollX >
+            (props.width + 10 ||
+              Dimensions.get('window').width - yAxisLabelWidth - 15) -
+              pointerLabelWidth / 2
         ) {
           left = -pointerLabelWidth - 4;
         } else {
@@ -3286,7 +3306,17 @@ export const LineChart = (props: propTypes) => {
             scrollRef.current.scrollToEnd({animated: scrollAnimation});
           }
         }}
+        onScroll={ev => {
+          if (
+            pointerConfig &&
+            pointerConfig.activatePointersOnLongPress &&
+            pointerConfig.autoAdjustPointerLabelPosition
+          ) {
+            setScrollX(ev.nativeEvent.contentOffset.x);
+          }
+        }}
         showsHorizontalScrollIndicator={showScrollIndicator}
+        indicatorStyle={props.indicatorColor}
         style={[
           {
             marginLeft:

package/src/todos.md

@@ -4,19 +4,16 @@
 
 ## To-dos in documentation-
 
-1. Prepare a doc for Bar chart with negative values
-2. Prepare a doc for Line chart with negative values
-3. Prepare a doc for Bar chart with y axis on right side
-4. Prepare a doc for Line chart with y axis on right side
-5. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart
-6. Prepare a doc for Line chart with smoothly scrolling data pointer and strip (along with pointerShiftX)
-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
-10. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
-11. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
+1. Prepare a doc for Line chart with negative values
+2. Prepare a doc for Line chart with y axis on right side
+3. Prepare a doc for Line chart with gaps in the line https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/100
+4. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart
+5. Prepare a doc for Line chart with smoothly scrolling data pointer and strip (along with pointerShiftX)
+6. Prepare a doc for labelsPosition in Pie and Donut charts
+7. Prepare a doc for adjustToWidth in Line and Area charts
+8. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
+9. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
+10. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
 
 
 ## Architecture Enhancement