react-native-gifted-charts 1.3.7 → 1.3.8

package/package.json

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

@@ -149,6 +149,8 @@ export const BarChart = (props: BarChartPropsType) => {
             defaultLineConfig.arrowConfig?.showArrowBase,
         },
         customDataPoint: props.lineConfig.customDataPoint,
+        isSecondary:
+          props.lineConfig.isSecondary ?? defaultLineConfig.isSecondary,
       }
     : defaultLineConfig;
   const noOfSections = props.noOfSections ?? AxesAndRulesDefaults.noOfSections;
@@ -200,6 +202,20 @@ export const BarChart = (props: BarChartPropsType) => {
     });
   }
 
+  let secondaryMaxItem = 0,
+    secondaryMinItem = 0;
+
+  if (lineConfig.isSecondary) {
+    lineData.forEach((item: itemType) => {
+      if (item.value > secondaryMaxItem) {
+        secondaryMaxItem = item.value;
+      }
+      if (item.value < secondaryMinItem) {
+        secondaryMinItem = item.value;
+      }
+    });
+  }
+
   const maxAndMin = maxAndMinUtil(
     maxItem,
     minItem,
@@ -207,7 +223,17 @@ export const BarChart = (props: BarChartPropsType) => {
     props.showFractionalValues,
   );
 
+  const secondaryMaxAndMin = maxAndMinUtil(
+    secondaryMaxItem,
+    secondaryMinItem,
+    props.roundToDigits,
+    props.showFractionalValues,
+  );
+
   const maxValue = props.maxValue ?? maxAndMin.maxItem;
+  const secondaryMaxValue = lineConfig.isSecondary
+    ? secondaryMaxAndMin.maxItem
+    : maxValue;
   const mostNegativeValue = props.mostNegativeValue ?? maxAndMin.minItem;
 
   const stepValue = props.stepValue ?? maxValue / noOfSections;
@@ -300,7 +326,7 @@ export const BarChart = (props: BarChartPropsType) => {
               currentValue,
               lineConfig.shiftY,
               containerHeight,
-              maxValue,
+              lineConfig.isSecondary ? secondaryMaxValue : maxValue,
             ) +
             ' ';
         }
@@ -353,7 +379,7 @@ export const BarChart = (props: BarChartPropsType) => {
               currentValue,
               lineConfig.shiftY,
               containerHeight,
-              maxValue,
+              lineConfig.isSecondary ? secondaryMaxValue : maxValue,
             ),
           ]);
           let xx = svgPath(p1Array, lineConfig.curveType, lineConfig.curvature);
@@ -554,7 +580,11 @@ export const BarChart = (props: BarChartPropsType) => {
     noOfSections,
     showFractionalValues,
 
-    axesAndRulesProps: getAxesAndRulesProps(props, stepValue),
+    axesAndRulesProps: getAxesAndRulesProps(
+      props,
+      stepValue,
+      secondaryMaxValue,
+    ),
 
     yAxisLabelTexts: props.yAxisLabelTexts,
     yAxisOffset: props.yAxisOffset,

package/src/BarChart/types.ts

@@ -74,7 +74,7 @@ export type BarChartPropsType = {
   verticalLinesThickness?: number;
   verticalLinesHeight?: number;
   verticalLinesColor?: ColorValue;
-  verticalLinesType?: RuleType;
+  verticalLinesStrokeDashArray?: Array<number>;
   verticalLinesShift?: number;
   verticalLinesZIndex?: number;
   noOfVerticalLines?: number;
@@ -175,6 +175,7 @@ type lineConfigType = {
   showArrow?: boolean;
   arrowConfig?: arrowType;
   customDataPoint?: Function;
+  isSecondary?: boolean;
 };
 export type defaultLineConfigType = {
   initialSpacing: number;
@@ -203,6 +204,7 @@ export type defaultLineConfigType = {
   showArrow: boolean;
   arrowConfig: arrowType;
   customDataPoint?: Function;
+  isSecondary: boolean;
 };
 type arrowType = {
   length?: number;

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -145,9 +145,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
   const verticalLinesColor =
     axesAndRulesProps.verticalLinesColor ??
     AxesAndRulesDefaults.verticalLinesColor;
-  const verticalLinesType =
-    axesAndRulesProps.verticalLinesType ??
-    AxesAndRulesDefaults.verticalLinesType;
+  const verticalLinesStrokeDashArray =
+    axesAndRulesProps.verticalLinesStrokeDashArray ??
+    AxesAndRulesDefaults.verticalLinesStrokeDashArray;
   const verticalLinesShift =
     axesAndRulesProps.verticalLinesShift ??
     AxesAndRulesDefaults.verticalLinesShift;
@@ -233,7 +233,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     spacing,
     containerHeight,
     lineConfig,
-    maxValue,
+    maxValue: secondaryYAxis?.maxValue ?? maxValue,
     animatedWidth,
     lineBehindBars,
     points,
@@ -256,7 +256,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     verticalLinesHeight,
     verticalLinesThickness,
     verticalLinesColor,
-    verticalLinesType,
+    verticalLinesStrokeDashArray,
     verticalLinesShift,
     verticalLinesUptoDataPoint,
     xAxisThickness,
@@ -268,6 +268,8 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     maxValue,
     chartType,
     containerHeightIncludingBelowXAxis,
+    yAxisLabelWidth,
+    totalWidth,
   };
 
   const actualContainerHeight =
@@ -384,7 +386,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
         }}
         {...remainingScrollViewProps}>
         <Fragment>
-          {showVerticalLines && <RenderVerticalLines {...verticalLinesProps} />}
+          {showVerticalLines ? (
+            <RenderVerticalLines {...verticalLinesProps} />
+          ) : null}
           {
             // Only For Bar Charts-
             showLine ? <RenderLineInBarChart {...lineInBarChartProps} /> : null

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -800,13 +800,11 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         /***********************************************************************************************/
         /*************************      Render the secondary Y Axis                *********************/
         /***********************************************************************************************/
-        secondaryYAxis && (
+        secondaryYAxis ? (
           <View
             style={{
               width: secondaryYAxisConfig.yAxisLabelWidth,
-              left: width
-                ? yAxisLabelWidth
-                : yAxisLabelWidth - (chartType === chartTypes.BAR ? 4 : 16),
+              left: width ? yAxisLabelWidth : yAxisLabelWidth - spacing,
               borderColor: secondaryYAxisConfig.yAxisColor,
               borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
             }}>
@@ -817,7 +815,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
               ? renderSecondaryYaxisLabels(secondaryHorizSectionsBelow, true)
               : null}
           </View>
-        )
+        ) : null
       }
     </View>
   );

package/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import {chartTypes, ruleTypes} from '../../utils/constants';
+import {chartTypes} from '../../utils/constants';
+import {Line, Svg} from 'react-native-svg';
 
 const RenderVerticalLines = props => {
   const {
@@ -12,7 +13,7 @@ const RenderVerticalLines = props => {
     verticalLinesHeight,
     verticalLinesThickness,
     verticalLinesColor,
-    verticalLinesType,
+    verticalLinesStrokeDashArray,
     verticalLinesShift,
     verticalLinesUptoDataPoint,
     xAxisThickness,
@@ -24,6 +25,8 @@ const RenderVerticalLines = props => {
     maxValue,
     chartType,
     containerHeightIncludingBelowXAxis,
+    yAxisLabelWidth,
+    totalWidth,
   } = props;
 
   const getHeightOfVerticalLine = index => {
@@ -43,82 +46,86 @@ const RenderVerticalLines = props => {
     }
   };
 
-  return verticalLinesAr.map((item: any, index: number) => {
-    let totalSpacing = initialSpacing;
-    if (verticalLinesSpacing) {
-      totalSpacing = verticalLinesSpacing * (index + 1);
-    } else {
-      if (stackData) {
-        totalSpacing += (stackData[0].barWidth || barWidth || 30) / 2;
-      } else {
-        totalSpacing += (data[0].barWidth || barWidth || 30) / 2;
-      }
-      for (let i = 0; i < index; i++) {
-        let actualSpacing = spacing;
-        if (stackData) {
-          if (i >= stackData.length - 1) {
-            actualSpacing += (barWidth || 30) / 2;
+  const extendedContainerHeight = containerHeight + 10 + labelsExtraHeight;
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        height: extendedContainerHeight,
+        left: 36 - yAxisLabelWidth,
+        bottom: 60, //stepHeight * -0.5 + xAxisThickness,
+        width: totalWidth,
+        zIndex: verticalLinesZIndex || -1,
+      }}>
+      <Svg>
+        {verticalLinesAr.map((item: any, index: number) => {
+          let totalSpacing = initialSpacing;
+          if (verticalLinesSpacing) {
+            totalSpacing = verticalLinesSpacing * (index + 1);
           } else {
-            if (stackData[i].spacing || stackData[i].spacing === 0) {
-              actualSpacing = stackData[i].spacing;
-            }
-            if (stackData[i + 1].barWidth) {
-              actualSpacing += stackData[i + 1].barWidth;
+            if (stackData) {
+              totalSpacing += (stackData[0].barWidth || barWidth || 30) / 2;
             } else {
-              actualSpacing += barWidth || 30;
-            }
-          }
-        } else {
-          if (i >= data.length - 1) {
-            actualSpacing += (barWidth || 30) / 2;
-          } else {
-            if (data[i].spacing || data[i].spacing === 0) {
-              actualSpacing = data[i].spacing;
+              totalSpacing += (data[0].barWidth || barWidth || 30) / 2;
             }
-            if (data[i + 1].barWidth) {
-              actualSpacing += data[i + 1].barWidth;
-            } else {
-              actualSpacing += barWidth || 30;
+            for (let i = 0; i < index; i++) {
+              let actualSpacing = spacing;
+              if (stackData) {
+                if (i >= stackData.length - 1) {
+                  actualSpacing += (barWidth || 30) / 2;
+                } else {
+                  if (stackData[i].spacing || stackData[i].spacing === 0) {
+                    actualSpacing = stackData[i].spacing;
+                  }
+                  if (stackData[i + 1].barWidth) {
+                    actualSpacing += stackData[i + 1].barWidth;
+                  } else {
+                    actualSpacing += barWidth || 30;
+                  }
+                }
+              } else {
+                if (i >= data.length - 1) {
+                  actualSpacing += (barWidth || 30) / 2;
+                } else {
+                  if (data[i].spacing || data[i].spacing === 0) {
+                    actualSpacing = data[i].spacing;
+                  }
+                  if (data[i + 1].barWidth) {
+                    actualSpacing += data[i + 1].barWidth;
+                  } else {
+                    actualSpacing += barWidth || 30;
+                  }
+                }
+              }
+              totalSpacing += actualSpacing;
             }
           }
-        }
-        totalSpacing += actualSpacing;
-      }
-    }
 
-    return (
-      <View
-        key={index}
-        style={[
-          {
-            position: 'absolute',
-            zIndex: verticalLinesZIndex || -1,
-            height: getHeightOfVerticalLine(index),
-            width: verticalLinesThickness,
-            bottom: 60 + labelsExtraHeight,
-            left:
-              verticalLinesShift +
-              (chartType === chartTypes.BAR
-                ? totalSpacing
-                : verticalLinesSpacing
-                ? verticalLinesSpacing * (index + 1)
-                : index * spacing + (initialSpacing - 4 / 2)) -
-              verticalLinesThickness / 2,
-          },
-          verticalLinesType === ruleTypes.DASHED ||
-          verticalLinesType === ruleTypes.DOTTED
-            ? {
-                borderWidth: verticalLinesThickness,
-                borderStyle: verticalLinesType,
-                borderColor: verticalLinesColor,
-              }
-            : {
-                backgroundColor: verticalLinesColor,
-              },
-        ]}
-      />
-    );
-  });
+          const x =
+            verticalLinesShift +
+            (chartType === chartTypes.BAR
+              ? totalSpacing - 1
+              : verticalLinesSpacing
+              ? verticalLinesSpacing * (index + 1)
+              : index * spacing + (initialSpacing - 2));
+
+          return (
+            <Line
+              key={index}
+              x1={x}
+              y1={extendedContainerHeight - getHeightOfVerticalLine(index)}
+              x2={x}
+              y2={extendedContainerHeight}
+              stroke={verticalLinesColor || 'lightgray'}
+              strokeWidth={verticalLinesThickness || 2}
+              strokeDasharray={verticalLinesStrokeDashArray ?? ''}
+            />
+          );
+        })}
+      </Svg>
+    </View>
+  );
 };
 
 export default RenderVerticalLines;

package/src/LineChart/LineChartBicolor.tsx

@@ -90,7 +90,7 @@ type propTypes = {
   verticalLinesThickness?: number;
   verticalLinesHeight?: number;
   verticalLinesColor?: ColorValue;
-  verticalLinesType?: string;
+  verticalLinesStrokeDashArray?: Array<number>;
   verticalLinesShift?: number;
   verticalLinesZIndex?: number;
   noOfVerticalLines?: number;
@@ -1361,7 +1361,7 @@ export const LineChartBicolor = (props: propTypes) => {
     noOfSections,
     showFractionalValues,
 
-    axesAndRulesProps: getAxesAndRulesProps(props, stepValue),
+    axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
 
     yAxisLabelTexts: props.yAxisLabelTexts,
     yAxisOffset: props.yAxisOffset,

package/src/LineChart/index.tsx

@@ -1809,6 +1809,31 @@ export const LineChart = (props: LineChartPropsType) => {
   const renderSpecificVerticalLines = (dataForRender: any) => {
     return dataForRender.map((item: itemType, index: number) => {
       if (item.showVerticalLine) {
+        const x = getX(index);
+        return (
+          <Line
+            key={index}
+            x1={x}
+            y1={extendedContainerHeight}
+            x2={x}
+            y2={
+              item.verticalLineUptoDataPoint ?? props.verticalLinesUptoDataPoint
+                ? getY(item.value)
+                : -xAxisThickness
+            }
+            stroke={
+              item.verticalLineColor || props.verticalLinesColor || 'lightgray'
+            }
+            strokeWidth={
+              item.verticalLineThickness || props.verticalLinesThickness || 2
+            }
+            strokeDasharray={
+              item.verticalLineStrokeDashArray ??
+              props.verticalLinesStrokeDashArray ??
+              ''
+            }
+          />
+        );
         return (
           <Rect
             key={index}
@@ -1824,7 +1849,7 @@ export const LineChart = (props: LineChartPropsType) => {
                 ? getY(item.value)
                 : -xAxisThickness
             }
-            width={item.verticalLineThickness || 1}
+            width={item.verticalLineThickness || 10}
             height={
               item.verticalLineUptoDataPoint
                 ? (item.value * containerHeight) / maxValue - xAxisThickness
@@ -3103,7 +3128,7 @@ export const LineChart = (props: LineChartPropsType) => {
     noOfSections,
     showFractionalValues,
 
-    axesAndRulesProps: getAxesAndRulesProps(props, stepValue),
+    axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
 
     yAxisLabelTexts: props.yAxisLabelTexts,
     yAxisOffset: props.yAxisOffset,

package/src/LineChart/types.ts

@@ -89,7 +89,7 @@ export type LineChartPropsType = {
   verticalLinesThickness?: number;
   verticalLinesHeight?: number;
   verticalLinesColor?: ColorValue;
-  verticalLinesType?: string;
+  verticalLinesStrokeDashArray?: Array<number>;
   verticalLinesShift?: number;
   verticalLinesZIndex?: number;
   noOfVerticalLines?: number;
@@ -333,6 +333,7 @@ export type itemType = {
   verticalLineUptoDataPoint?: boolean;
   verticalLineColor?: string;
   verticalLineThickness?: number;
+  verticalLineStrokeDashArray?: Array<number>;
   pointerShiftX?: number;
   pointerShiftY?: number;
   onPress?: Function;

package/src/utils/constants.ts

@@ -66,7 +66,7 @@ export const AxesAndRulesDefaults = {
   showVerticalLines: false,
   verticalLinesThickness: 1,
   verticalLinesColor: 'lightgray',
-  verticalLinesType: 'solid',
+  verticalLinesStrokeDashArray: '',
   verticalLinesShift: 0,
   verticalLinesZIndex: -1,
   verticalLinesSpacing: 0,
@@ -153,6 +153,7 @@ export const defaultLineConfig: defaultLineConfigType = {
   endIndex: 0, // gets updated to lineData.length - 1
   showArrow: false,
   arrowConfig: defaultArrowConfig,
+  isSecondary: false,
 };
 
 // Line chart specific

package/src/utils/index.tsx

@@ -211,8 +211,8 @@ export const getArrowPoints = (
   return arrowPoints;
 };
 
-export const getAxesAndRulesProps = (props, stepValue) => {
-  return {
+export const getAxesAndRulesProps = (props, stepValue, maxValue) => {
+  const axesAndRulesProps = {
     yAxisSide: props.yAxisSide,
     yAxisLabelContainerStyle: props.yAxisLabelContainerStyle,
     yAxisColor: props.yAxisColor,
@@ -255,7 +255,6 @@ export const getAxesAndRulesProps = (props, stepValue) => {
     verticalLinesThickness: props.verticalLinesThickness,
     verticalLinesHeight: props.verticalLinesHeight,
     verticalLinesColor: props.verticalLinesColor,
-    verticalLinesType: props.verticalLinesType,
     verticalLinesShift: props.verticalLinesShift,
     verticalLinesZIndex: props.verticalLinesZIndex,
     verticalLinesSpacing: props.verticalLinesSpacing,
@@ -269,6 +268,11 @@ export const getAxesAndRulesProps = (props, stepValue) => {
 
     secondaryYAxis: props.secondaryYAxis,
   };
+  if (props.secondaryYAxis && maxValue !== undefined) {
+    axesAndRulesProps.secondaryYAxis = {...props.secondaryYAxis, maxValue};
+  }
+
+  return axesAndRulesProps;
 };
 
 export const getExtendedContainerHeightWithPadding = (

package/src/utils/types.ts

@@ -71,6 +71,7 @@ export type secondaryLineConfigType = {
   textColor?: string;
   showArrow?: boolean;
   arrowConfig?: arrowConfigType;
+  isSecondary?: boolean;
 };
 
 export type arrowConfigType = {