react-native-gifted-charts 1.3.15 → 1.3.17

package/package.json

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

@@ -70,6 +70,8 @@ type Props = {
   barMarginBottom?: number;
   onPress?: Function;
   xAxisTextNumberOfLines: number;
+  xAxisLabelsHeight?: number;
+  xAxisLabelsVerticalShift: number;
   renderTooltip: Function | undefined;
   leftShiftForTooltip?: number;
   leftShiftForLastIndexTooltip: number;
@@ -109,6 +111,7 @@ const RenderBars = (props: Props) => {
     label,
     labelTextStyle,
     xAxisTextNumberOfLines,
+    xAxisLabelsVerticalShift,
     renderTooltip,
     leftShiftForTooltip,
     leftShiftForLastIndexTooltip,
@@ -139,7 +142,12 @@ const RenderBars = (props: Props) => {
                 30) + spacing,
             left: spacing / -2,
             position: 'absolute',
-            bottom: (rotateLabel ? -40 : -25) - barMarginBottom,
+            height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
+            bottom:
+              (rotateLabel
+                ? -40
+                : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
+              barMarginBottom,
           },
           rotateLabel
             ? horizontal
@@ -196,7 +204,12 @@ const RenderBars = (props: Props) => {
                 30) + spacing,
             left: spacing / -2,
             position: 'absolute',
-            bottom: (rotateLabel ? -40 : -25) - barMarginBottom,
+            height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
+            bottom:
+              (rotateLabel
+                ? -40
+                : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
+              barMarginBottom,
             opacity: appearingOpacity,
           },
           value < 0 && {transform: [{rotate: '180deg'}]},
@@ -344,7 +357,7 @@ const RenderBars = (props: Props) => {
   const barWrapperStyle = [
     {
       // overflow: 'visible',
-      marginBottom: 60 + barMarginBottom,
+      marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift,
       width: item.barWidth || props.barWidth || 30,
       height: barHeight,
       marginRight: spacing,
@@ -364,7 +377,9 @@ const RenderBars = (props: Props) => {
       ? {
           transform: [
             {
-              translateY: (containerHeight || 200) - (barHeight - 10),
+              translateY:
+                (containerHeight || 200) -
+                (barHeight - 10 + xAxisLabelsVerticalShift),
             },
           ],
         }

package/src/BarChart/RenderStackBars.tsx

@@ -52,6 +52,8 @@ type Props = {
   barBackgroundPattern?: Function;
   patternId?: String;
   xAxisTextNumberOfLines: number;
+  xAxisLabelsHeight?: number;
+  xAxisLabelsVerticalShift: number;
   renderTooltip: Function | undefined;
   leftShiftForTooltip?: number;
   leftShiftForLastIndexTooltip: number;
@@ -118,6 +120,7 @@ const RenderStackBars = (props: Props) => {
     label,
     labelTextStyle,
     xAxisTextNumberOfLines,
+    xAxisLabelsVerticalShift,
     renderTooltip,
     leftShiftForTooltip,
     leftShiftForLastIndexTooltip,
@@ -147,7 +150,7 @@ const RenderStackBars = (props: Props) => {
             width:
               (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
             position: 'absolute',
-            bottom: rotateLabel ? -40 : -25,
+            bottom: rotateLabel ? -40 : -6 - xAxisTextNumberOfLines * 18,
           },
           rotateLabel
             ? props.horizontal
@@ -365,7 +368,7 @@ const RenderStackBars = (props: Props) => {
         style={[
           {
             // overflow: 'visible',
-            marginBottom: 60,
+            marginBottom: 60 + xAxisLabelsVerticalShift,
             width: item.stacks[0].barWidth || props.barWidth || 30,
             height: totalHeight,
             marginRight: spacing,

package/src/BarChart/index.tsx

@@ -265,6 +265,9 @@ export const BarChart = (props: BarChartPropsType) => {
 
   const xAxisTextNumberOfLines =
     props.xAxisTextNumberOfLines ?? AxesAndRulesDefaults.xAxisTextNumberOfLines;
+  const xAxisLabelsVerticalShift =
+    props.xAxisLabelsVerticalShift ??
+    AxesAndRulesDefaults.xAxisLabelsVerticalShift;
   const horizontalRulesStyle = props.horizontalRulesStyle;
   const yAxisLabelWidth =
     props.yAxisLabelWidth ??
@@ -277,6 +280,8 @@ export const BarChart = (props: BarChartPropsType) => {
   const widthValue = useMemo(() => new Animated.Value(0), []);
   const autoShiftLabels = props.autoShiftLabels ?? false;
 
+  const barWidth = props.barWidth || BarDefaults.barWidth;
+
   const extendedContainerHeight = getExtendedContainerHeightWithPadding(
     containerHeight,
     0,
@@ -347,6 +352,16 @@ export const BarChart = (props: BarChartPropsType) => {
   const activatePointersDelay =
     pointerConfig?.activatePointersDelay ??
     defaultPointerConfig.activatePointersDelay;
+  const initialPointerIndex =
+    pointerConfig?.initialPointerIndex ??
+    defaultPointerConfig.initialPointerIndex;
+  const initialPointerAppearDelay =
+    pointerConfig?.initialPointerAppearDelay ??
+    (isAnimated
+      ? animationDuration
+      : defaultPointerConfig.initialPointerAppearDelay);
+  const persistPointer =
+    pointerConfig?.persistPointer ?? defaultPointerConfig.persistPointer;
   const hidePointer1 =
     pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1;
 
@@ -505,6 +520,36 @@ export const BarChart = (props: BarChartPropsType) => {
     lineConfig.arrowConfig.showArrowBase,
   ]);
 
+  useEffect(() => {
+    if (initialPointerIndex !== -1) {
+      const item = data[initialPointerIndex];
+      const x =
+        initialSpacing +
+        (spacing + barWidth) * initialPointerIndex -
+        (pointerRadius || pointerWidth / 2) +
+        barWidth / 2;
+      const y =
+        containerHeight -
+        (item.value * containerHeight) / maxValue -
+        (pointerRadius || pointerHeight / 2) +
+        10;
+      if (initialPointerAppearDelay) {
+        setTimeout(() => {
+          setPointerConfig(initialPointerIndex, item, x, y);
+        }, initialPointerAppearDelay);
+      } else {
+        setPointerConfig(initialPointerIndex, item, x, y);
+      }
+    }
+  }, []);
+
+  const setPointerConfig = (initialPointerIndex, item, x, y) => {
+    setPointerIndex(initialPointerIndex);
+    setPointerItem(item);
+    setPointerX(x);
+    setPointerY(y);
+  };
+
   const animatedHeight = heightValue.interpolate({
     inputRange: [0, 1],
     outputRange: ['0%', '100%'],
@@ -571,7 +616,6 @@ export const BarChart = (props: BarChartPropsType) => {
 
   const renderChartContent = () => {
     if (pointerConfig) {
-      const barWidth = props.barWidth || BarDefaults.barWidth;
       return (
         <View
           onStartShouldSetResponder={evt => (pointerConfig ? true : false)}
@@ -652,7 +696,8 @@ export const BarChart = (props: BarChartPropsType) => {
             setResponderStartTime(0);
             setPointerIndex(-1);
             setResponderActive(false);
-            setTimeout(() => setPointerX(0), pointerVanishDelay);
+            if (!persistPointer)
+              setTimeout(() => setPointerX(0), pointerVanishDelay);
           }}
           onResponderTerminationRequest={evt => false}
           style={{
@@ -671,7 +716,7 @@ export const BarChart = (props: BarChartPropsType) => {
                 position: 'absolute',
                 height:
                   extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
-                bottom: 0 + labelsExtraHeight,
+                bottom: xAxisLabelsVerticalShift + labelsExtraHeight,
                 width: totalWidth,
                 zIndex: 20,
               }}>
@@ -721,6 +766,8 @@ export const BarChart = (props: BarChartPropsType) => {
         patternId: props.patternId,
         onPress: props.onPress,
         xAxisTextNumberOfLines: xAxisTextNumberOfLines,
+        xAxisLabelsHeight: props.xAxisLabelsHeight,
+        xAxisLabelsVerticalShift,
         renderTooltip: props.renderTooltip,
         leftShiftForTooltip: props.leftShiftForTooltip || 0,
         initialSpacing: initialSpacing,

package/src/BarChart/types.ts

@@ -1,7 +1,13 @@
 import {ColorValue, View} from 'react-native';
 import {stackItemType} from '../BarChart/RenderStackBars';
 import {yAxisSides} from '../utils/constants';
-import {CurveType, Pointer, RuleType, secondaryYAxisType} from '../utils/types';
+import {
+  CurveType,
+  Pointer,
+  RuleType,
+  RulesConfig,
+  secondaryYAxisType,
+} from '../utils/types';
 
 export type BarChartPropsType = {
   width?: number;
@@ -34,6 +40,8 @@ export type BarChartPropsType = {
   yAxisTextStyle?: any;
   yAxisTextNumberOfLines?: number;
   xAxisTextNumberOfLines?: number;
+  xAxisLabelsHeight?: number;
+  xAxisLabelsVerticalShift?: number;
   yAxisLabelWidth?: number;
   hideYAxisText?: boolean;
   rotateYAxisTexts?: number;
@@ -61,6 +69,7 @@ export type BarChartPropsType = {
   rulesType?: RuleType;
   dashWidth?: number;
   dashGap?: number;
+  rulesConfigArray?: Array<RulesConfig>;
   showReferenceLine1?: boolean;
   referenceLine1Config?: referenceConfigType;
   referenceLine1Position?: number;

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -97,6 +97,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
   const xAxisLength = axesAndRulesProps.xAxisLength;
   const xAxisType =
     axesAndRulesProps.xAxisType ?? AxesAndRulesDefaults.xAxisType;
+  const xAxisLabelsVerticalShift =
+    axesAndRulesProps.xAxisLabelsVerticalShift ??
+    AxesAndRulesDefaults.xAxisLabelsVerticalShift;
   const dashWidth =
     axesAndRulesProps.dashWidth ?? AxesAndRulesDefaults.dashWidth;
   const dashGap = axesAndRulesProps.dashGap ?? AxesAndRulesDefaults.dashGap;
@@ -111,6 +114,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     axesAndRulesProps.rulesThickness ?? AxesAndRulesDefaults.rulesThickness;
   const rulesColor =
     axesAndRulesProps.rulesColor ?? AxesAndRulesDefaults.rulesColor;
+  const rulesConfigArray = axesAndRulesProps.rulesConfigArray ?? AxesAndRulesDefaults.rulesConfigArray;
   const showYAxisIndices = axesAndRulesProps.showYAxisIndices ?? false;
   const yAxisIndicesHeight =
     axesAndRulesProps.yAxisIndicesHeight ??
@@ -192,6 +196,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     rulesType,
     rulesThickness,
     rulesColor,
+    rulesConfigArray,
     spacing,
     showYAxisIndices,
     yAxisIndicesHeight,
@@ -243,6 +248,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     barWidth,
     labelsExtraHeight,
     scrollEventThrottle,
+    xAxisLabelsVerticalShift,
   };
   const extendedContainerHeight = containerHeight + 10;
   const containerHeightIncludingBelowXAxis =
@@ -270,6 +276,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     containerHeightIncludingBelowXAxis,
     yAxisLabelWidth,
     totalWidth,
+    xAxisLabelsVerticalShift,
   };
 
   const actualContainerHeight =
@@ -311,8 +318,13 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
 
   const container = {
     width: '100%',
-    height: actualContainerHeight,
-    marginBottom: 40, //This is to not let the Things that should be rendered below the chart overlap with it
+    height:
+      containerHeightIncludingBelowXAxis +
+      labelsExtraHeight +
+      stepHeight / 2 +
+      xAxisLabelsVerticalShift +
+      50,
+    marginBottom: 15, //This is to not let the Things that should be rendered below the chart overlap with it
   };
 
   return (
@@ -345,8 +357,6 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
                 : yAxisLabelWidth + yAxisThickness,
             position: 'absolute',
             bottom:
-              stepHeight * -0.5 -
-              60 +
               (chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness),
           },
           !!props.width && {width: props.width},
@@ -361,7 +371,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
               containerHeightIncludingBelowXAxis +
               labelsExtraHeight +
               stepHeight / 2 +
-              50,
+              (50 + xAxisLabelsVerticalShift),
             width: totalWidth - spacing + endSpacing,
             paddingLeft: initialSpacing,
             paddingBottom:

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -37,6 +37,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     rulesType,
     rulesThickness,
     rulesColor,
+    rulesConfigArray,
     spacing,
     showYAxisIndices,
     yAxisIndicesHeight,
@@ -382,62 +383,71 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     );
   };
 
-  const renderAxesAndRules = (index: number) => (
-    <View
-      style={[
-        index === noOfSections ? styles.lastLeftPart : styles.leftPart,
-        {
-          borderColor: yAxisColor,
-          backgroundColor: backgroundColor,
-          width: (props.width || totalWidth - spacing) + endSpacing,
-        },
-        yAxisSide === yAxisSides.RIGHT
-          ? {borderRightWidth: yAxisThickness}
-          : {borderLeftWidth: yAxisThickness},
-      ]}>
-      {index === noOfSections ? (
-        <Rule
-          config={{
-            thickness: xAxisThickness,
-            color: xAxisColor,
-            width:
-              xAxisLength || (props.width || totalWidth - spacing) + endSpacing,
-            dashWidth: dashWidth,
-            dashGap: dashGap,
-            type: xAxisType,
-          }}
-        />
-      ) : hideRules ? null : (
-        <Rule
-          config={{
-            thickness: rulesThickness,
-            color: rulesColor,
-            width:
-              rulesLength || (props.width || totalWidth - spacing) + endSpacing,
-            dashWidth: dashWidth,
-            dashGap: dashGap,
-            type: rulesType,
-          }}
-        />
-      )}
-      {showYAxisIndices && index !== noOfSections ? (
-        <View
-          style={{
-            height: yAxisIndicesHeight,
-            width: yAxisIndicesWidth,
-            left:
-              yAxisIndicesWidth / -2 +
-              (yAxisSide === yAxisSides.RIGHT
-                ? (width ?? totalWidth) +
-                  yAxisLabelWidth / 2 +
-                  yAxisIndicesWidth / 4
-                : 0),
-            backgroundColor: yAxisIndicesColor,
-          }}
-        />
-      ) : null}
-    </View>
-  );
+  const renderAxesAndRules = (index: number) => {
+    const invertedIndex = horizSections.length - index - 1;
+    return (
+      <View
+        style={[
+          index === noOfSections ? styles.lastLeftPart : styles.leftPart,
+          {
+            borderColor: yAxisColor,
+            backgroundColor: backgroundColor,
+            width: (props.width || totalWidth - spacing) + endSpacing,
+          },
+          yAxisSide === yAxisSides.RIGHT
+            ? {borderRightWidth: yAxisThickness}
+            : {borderLeftWidth: yAxisThickness},
+        ]}>
+        {index === noOfSections ? (
+          <Rule
+            config={{
+              thickness: xAxisThickness,
+              color: xAxisColor,
+              width:
+                xAxisLength ||
+                (props.width || totalWidth - spacing) + endSpacing,
+              dashWidth: dashWidth,
+              dashGap: dashGap,
+              type: xAxisType,
+            }}
+          />
+        ) : hideRules ? null : (
+          <Rule
+            config={{
+              thickness:
+                rulesConfigArray[invertedIndex]?.rulesThickness ??
+                rulesThickness,
+              color: rulesConfigArray[invertedIndex]?.rulesColor ?? rulesColor,
+              width:
+                rulesConfigArray[invertedIndex]?.rulesLength ??
+                rulesLength ??
+                (props.width || totalWidth - spacing) + endSpacing,
+              dashWidth:
+                rulesConfigArray[invertedIndex]?.dashWidth ?? dashWidth,
+              dashGap: rulesConfigArray[invertedIndex]?.dashGap ?? dashGap,
+              type: rulesConfigArray[invertedIndex]?.rulesType ?? rulesType,
+            }}
+          />
+        )}
+        {showYAxisIndices && index !== noOfSections ? (
+          <View
+            style={{
+              height: yAxisIndicesHeight,
+              width: yAxisIndicesWidth,
+              left:
+                yAxisIndicesWidth / -2 +
+                (yAxisSide === yAxisSides.RIGHT
+                  ? (width ?? totalWidth) +
+                    yAxisLabelWidth / 2 +
+                    yAxisIndicesWidth / 4
+                  : 0),
+              backgroundColor: yAxisIndicesColor,
+            }}
+          />
+        ) : null}
+      </View>
+    );
+  };
 
   const renderSecondaryYaxisLabels = (
     horizSections: HorizSectionsType,

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart.tsx

@@ -20,6 +20,7 @@ const RenderLineInBarChart = props => {
     totalWidth,
     barWidth,
     labelsExtraHeight,
+    xAxisLabelsVerticalShift,
   } = props;
 
   const firstBarWidth = data[0].barWidth ?? barWidth;
@@ -322,7 +323,7 @@ const RenderLineInBarChart = props => {
           position: 'absolute',
           height: containerHeight + 10,
           left: 34 - yAxisLabelWidth,
-          bottom: 50, //stepHeight * -0.5 + xAxisThickness,
+          bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
           width: animatedWidth,
           zIndex: lineBehindBars ? -1 : 100000,
           // backgroundColor: 'wheat',
@@ -361,7 +362,7 @@ const RenderLineInBarChart = props => {
           position: 'absolute',
           height: containerHeight + 10 + labelsExtraHeight,
           left: 34 - yAxisLabelWidth,
-          bottom: 50, //stepHeight * -0.5 + xAxisThickness,
+          bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
           width: totalWidth,
           zIndex: lineBehindBars ? -1 : 100000,
           // backgroundColor: 'rgba(200,150,150,0.1)'

package/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx

@@ -25,8 +25,8 @@ const RenderVerticalLines = props => {
     maxValue,
     chartType,
     containerHeightIncludingBelowXAxis,
-    yAxisLabelWidth,
     totalWidth,
+    xAxisLabelsVerticalShift,
   } = props;
 
   const getHeightOfVerticalLine = index => {
@@ -53,7 +53,7 @@ const RenderVerticalLines = props => {
       style={{
         position: 'absolute',
         height: extendedContainerHeight,
-        bottom: 60, //stepHeight * -0.5 + xAxisThickness,
+        bottom: 60 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
         width: totalWidth,
         zIndex: verticalLinesZIndex || -1,
       }}>
@@ -103,6 +103,7 @@ const RenderVerticalLines = props => {
 
           const x =
             verticalLinesShift +
+            1 +
             (chartType === chartTypes.BAR
               ? totalSpacing - 1
               : verticalLinesSpacing

package/src/Components/common/Pointer.tsx

@@ -17,7 +17,7 @@ export const Pointer = props => {
       style={{
         position: 'absolute',
         left: pointerX + (pointerX.pointerShiftX || 0),
-        top: pointerYLocal,
+        top: pointerYLocal - 2,
       }}>
       {pointerComponent ? (
         pointerComponent()

package/src/LineChart/index.tsx

@@ -380,6 +380,13 @@ export const LineChart = (props: LineChartPropsType) => {
     areaChart4 ||
     areaChart5;
 
+  const stepChart = props.stepChart ?? false;
+  const stepChart1 = props.stepChart1 ?? false;
+  const stepChart2 = props.stepChart2 ?? false;
+  const stepChart3 = props.stepChart3 ?? false;
+  const stepChart4 = props.stepChart4 ?? false;
+  const stepChart5 = props.stepChart5 ?? false;
+
   const textFontSize1 =
     props.textFontSize1 ?? props.textFontSize ?? LineDefaults.textFontSize;
   const textFontSize2 =
@@ -794,19 +801,84 @@ export const LineChart = (props: LineChartPropsType) => {
     if (!props.curved) {
       for (let i = 0; i < data.length; i++) {
         if (i >= startIndex1 && i <= endIndex1 && !animateOnDataChange) {
-          pp += 'L' + getX(i) + ' ' + getY(data[i].value) + ' ';
+          if (stepChart || stepChart1) {
+            pp +=
+              'L' +
+              (getX(i) - spacing / 2) +
+              ' ' +
+              getY(data[i].value) +
+              ' L' +
+              (getX(i) + spacing / 2) +
+              ' ' +
+              getY(data[i].value) +
+              ' ';
+          } else {
+            pp += 'L' + getX(i) + ' ' + getY(data[i].value) + ' ';
+          }
         }
         if (data2.length && i >= startIndex2 && i <= endIndex2) {
-          pp2 += 'L' + getX(i) + ' ' + getY(data2[i].value) + ' ';
+          if (stepChart || stepChart2) {
+            pp2 +=
+              'L' +
+              (getX(i) - spacing / 2) +
+              ' ' +
+              getY(data2[i].value) +
+              ' L' +
+              (getX(i) + spacing / 2) +
+              ' ' +
+              getY(data2[i].value) +
+              ' ';
+          } else {
+            pp2 += 'L' + getX(i) + ' ' + getY(data2[i].value) + ' ';
+          }
         }
         if (data3.length && i >= startIndex3 && i <= endIndex3) {
-          pp3 += 'L' + getX(i) + ' ' + getY(data3[i].value) + ' ';
+          if (stepChart || stepChart3) {
+            pp3 +=
+              'L' +
+              (getX(i) - spacing / 2) +
+              ' ' +
+              getY(data3[i].value) +
+              ' L' +
+              (getX(i) + spacing / 2) +
+              ' ' +
+              getY(data3[i].value) +
+              ' ';
+          } else {
+            pp3 += 'L' + getX(i) + ' ' + getY(data3[i].value) + ' ';
+          }
         }
         if (data4.length && i >= startIndex4 && i <= endIndex4) {
-          pp4 += 'L' + getX(i) + ' ' + getY(data4[i].value) + ' ';
+          if (stepChart || stepChart4) {
+            pp4 +=
+              'L' +
+              (getX(i) - spacing / 2) +
+              ' ' +
+              getY(data4[i].value) +
+              ' L' +
+              (getX(i) + spacing / 2) +
+              ' ' +
+              getY(data4[i].value) +
+              ' ';
+          } else {
+            pp4 += 'L' + getX(i) + ' ' + getY(data4[i].value) + ' ';
+          }
         }
         if (data5.length && i >= startIndex5 && i <= endIndex5) {
-          pp5 += 'L' + getX(i) + ' ' + getY(data5[i].value) + ' ';
+          if (stepChart || stepChart5) {
+            pp5 +=
+              'L' +
+              (getX(i) - spacing / 2) +
+              ' ' +
+              getY(data5[i].value) +
+              ' L' +
+              (getX(i) + spacing / 2) +
+              ' ' +
+              getY(data5[i].value) +
+              ' ';
+          } else {
+            pp5 += 'L' + getX(i) + ' ' + getY(data5[i].value) + ' ';
+          }
         }
       }
       setPoints2(pp2.replace('L', 'M'));
@@ -1346,6 +1418,9 @@ export const LineChart = (props: LineChartPropsType) => {
   // const yAxisThickness = props.yAxisThickness ?? 1;
   const xAxisTextNumberOfLines =
     props.xAxisTextNumberOfLines ?? AxesAndRulesDefaults.xAxisTextNumberOfLines;
+  const xAxisLabelsVerticalShift =
+    props.xAxisLabelsVerticalShift ??
+    AxesAndRulesDefaults.xAxisLabelsVerticalShift;
   const horizontalRulesStyle = props.horizontalRulesStyle;
   const showFractionalValues =
     props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues;
@@ -1407,6 +1482,16 @@ export const LineChart = (props: LineChartPropsType) => {
   const activatePointersDelay =
     pointerConfig?.activatePointersDelay ??
     defaultPointerConfig.activatePointersDelay;
+  const initialPointerIndex =
+    pointerConfig?.initialPointerIndex ??
+    defaultPointerConfig.initialPointerIndex;
+  const initialPointerAppearDelay =
+    pointerConfig?.initialPointerAppearDelay ??
+    (isAnimated
+      ? animationDuration
+      : defaultPointerConfig.initialPointerAppearDelay);
+  const persistPointer =
+    pointerConfig?.persistPointer ?? defaultPointerConfig.persistPointer;
   const hidePointer1 =
     pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1;
   const hidePointer2 =
@@ -1457,6 +1542,36 @@ export const LineChart = (props: LineChartPropsType) => {
   const lineGradientEndColor =
     props.lineGradientEndColor ?? LineDefaults.lineGradientEndColor;
 
+  useEffect(() => {
+    if (initialPointerIndex !== -1) {
+      const item = data[initialPointerIndex];
+      const x =
+        initialSpacing +
+        spacing * initialPointerIndex -
+        (pointerRadius || pointerWidth / 2) -
+        1;
+      const y =
+        containerHeight -
+        (item.value * containerHeight) / maxValue -
+        (pointerRadius || pointerHeight / 2) +
+        10;
+      if (initialPointerAppearDelay) {
+        setTimeout(() => {
+          setPointerConfig(initialPointerIndex, item, x, y);
+        }, initialPointerAppearDelay);
+      } else {
+        setPointerConfig(initialPointerIndex, item, x, y);
+      }
+    }
+  }, []);
+
+  const setPointerConfig = (initialPointerIndex, item, x, y) => {
+    setPointerIndex(initialPointerIndex);
+    setPointerItem(item);
+    setPointerX(x);
+    setPointerY(y);
+  };
+
   const renderLabel = (
     index: number,
     label: String,
@@ -1468,14 +1583,14 @@ export const LineChart = (props: LineChartPropsType) => {
         style={[
           {
             position: 'absolute',
-            bottom: 30,
+            bottom: 54 - xAxisTextNumberOfLines * 18,
             zIndex: 10,
             width: spacing + labelsExtraHeight,
             left:
               index === 0 && initialSpacing < 10
                 ? initialSpacing / 2 + spacing * index - spacing / 2 + 4
                 : initialSpacing / 2 + spacing * index - spacing / 2 - 10,
-            justifyContent: 'center',
+            height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
           },
           rotateLabel && {transform: [{rotate: '60deg'}]},
         ]}>
@@ -1502,9 +1617,11 @@ export const LineChart = (props: LineChartPropsType) => {
       <Animated.View
         style={[
           {
-            height: rotateLabel ? 40 : 20,
+            height: rotateLabel
+              ? 40
+              : props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
             position: 'absolute',
-            bottom: rotateLabel ? 10 : 30,
+            bottom: rotateLabel ? 10 : 54 - xAxisTextNumberOfLines * 18,
             zIndex: 10,
             width: spacing,
             left:
@@ -1677,22 +1794,22 @@ export const LineChart = (props: LineChartPropsType) => {
           {item.showStrip ||
           (focusEnabled && index === selectedIndex && showStripOnFocus) ? (
             <Rect
-              x={initialSpacing + (spacing * index - dataPointsWidth / 2)}
+              x={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
               y={
                 currentStripHeight
                   ? containerHeight - currentStripHeight + 8
                   : containerHeight -
                     dataPointsHeight / 2 +
-                    20 -
+                    14 -
                     (item.value * containerHeight) / maxValue
               }
               width={currentStripWidth}
               height={
                 currentStripHeight ||
-                containerHeight - dataPointsHeight / 2 + 20
+                (item.value * containerHeight) / maxValue - 2
               }
               opacity={currentStripOpacity}
-              fill={currentStripColor}
+              fill={stripColor}
             />
           ) : null}
           {hideDataPoints ? null : (
@@ -2445,7 +2562,8 @@ export const LineChart = (props: LineChartPropsType) => {
           setResponderStartTime(0);
           setPointerIndex(-1);
           setResponderActive(false);
-          setTimeout(() => setPointerX(0), pointerVanishDelay);
+          if (!persistPointer)
+            setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
         onResponderTerminationRequest={evt => false}
         // onResponderTerminate={evt => {
@@ -2463,11 +2581,12 @@ export const LineChart = (props: LineChartPropsType) => {
             (props.overflowBottom ?? dataPointsRadius1),
           bottom:
             60 +
+            xAxisLabelsVerticalShift +
             labelsExtraHeight -
             (props.overflowBottom ?? dataPointsRadius1),
-          width: totalWidth,
           zIndex: zIndex,
           transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],
+          width: totalWidth,
         }}>
         {lineSvgComponent(
           points,
@@ -2710,7 +2829,8 @@ export const LineChart = (props: LineChartPropsType) => {
           setResponderStartTime(0);
           setPointerIndex(-1);
           setResponderActive(false);
-          setTimeout(() => setPointerX(0), pointerVanishDelay);
+          if (!persistPointer)
+            setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
         onResponderTerminationRequest={evt => false}
         // onResponderTerminate={evt => {
@@ -2728,12 +2848,12 @@ export const LineChart = (props: LineChartPropsType) => {
             (props.overflowBottom ?? dataPointsRadius1),
           bottom:
             60 +
+            xAxisLabelsVerticalShift +
             labelsExtraHeight -
             (props.overflowBottom ?? dataPointsRadius1),
-          width: animatedWidth,
           zIndex: zIndex,
           transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],
-          // backgroundColor: 'wheat',
+          width: animatedWidth,
         }}>
         {lineSvgComponent(
           points,
@@ -3003,7 +3123,7 @@ export const LineChart = (props: LineChartPropsType) => {
               position: 'absolute',
               height:
                 extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
-              bottom: 60 + labelsExtraHeight,
+              bottom: 58 + labelsExtraHeight + xAxisLabelsVerticalShift,
               width: totalWidth,
               zIndex: 20,
             }}>

package/src/LineChart/types.ts

@@ -4,6 +4,7 @@ import {
   CurveType,
   Pointer,
   RuleType,
+  RulesConfig,
   arrowConfigType,
   secondaryLineConfigType,
   secondaryYAxisType,
@@ -75,6 +76,7 @@ export type LineChartPropsType = {
   rulesType?: RuleType;
   dashWidth?: number;
   dashGap?: number;
+  rulesConfigArray?: Array<RulesConfig>;
   showReferenceLine1?: boolean;
   referenceLine1Config?: referenceConfigType;
   referenceLine1Position?: number;
@@ -102,6 +104,12 @@ export type LineChartPropsType = {
   areaChart3?: boolean;
   areaChart4?: boolean;
   areaChart5?: boolean;
+  stepChart?: boolean;
+  stepChart1?: boolean;
+  stepChart2?: boolean;
+  stepChart3?: boolean;
+  stepChart4?: boolean;
+  stepChart5?: boolean;
 
   disableScroll?: boolean;
   pointerConfig?: Pointer;
@@ -255,6 +263,8 @@ export type LineChartPropsType = {
   yAxisLabelTexts?: Array<string>;
   xAxisLabelTexts?: Array<string>;
   xAxisLabelTextStyle?: any;
+  xAxisLabelsHeight?: number;
+  xAxisLabelsVerticalShift?: number;
   width?: number;
   yAxisLabelPrefix?: String;
   yAxisLabelSuffix?: String;

package/src/PieChart/index.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {View, ColorValue} from 'react-native';
 import {PieChartMain} from './main';
 import {FontStyle} from 'react-native-svg';
@@ -81,21 +81,56 @@ export const PieChart = (props: propTypes) => {
       ? radius / 10
       : 0;
   const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
-  const [selectedIndex, setSelectedIndex] = useState(
-    props.data.findIndex(item => item.focused === true),
+  const [selectedIndex, setSelectedIndex] = useState(-1); // at the start, nothing is selected
+  // because we're going to use a useEffect, we need startAngle and total to be state variables
+  const [startAngle, setStartAngle] = useState(
+    props.initialAngle || (props.semiCircle ? -pi : 0),
   );
-  let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
-  let total = 0;
-  props.data.forEach(item => {
-    total += item.value;
-  });
-  if (selectedIndex !== 0) {
-    let start = 0;
-    for (let i = 0; i < selectedIndex; i++) {
-      start += props.data[i].value;
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    // Update the total, this could be use to replace the forEach : const newTotal = props.data.reduce((acc, item) => acc + item.value, 0);
+    let newTotal = 0;
+    props.data.forEach(item => {
+      newTotal += item.value;
+    });
+    setTotal(newTotal);
+
+    // Update selectedIndex based on focused item
+    const newSelectedIndex = props.data.findIndex(
+      item => item.focused === true,
+    );
+    setSelectedIndex(newSelectedIndex);
+
+    // Calculate the new start angle
+    let newStartAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
+    if (newSelectedIndex !== -1) {
+      // it was !== 0 here before, which would not work, it's either !==-1 or >=0
+      // This could be used to replace the for loop that was used before
+      const sumBeforeSelectedIndex = props.data
+        .slice(0, newSelectedIndex)
+        .reduce((acc, item) => acc + item.value, 0);
+      setStartAngle(
+        newStartAngle + (2 * pi * sumBeforeSelectedIndex) / newTotal,
+      );
+    } else {
+      setStartAngle(newStartAngle);
     }
-    startAngle += (2 * pi * start) / total;
-  }
+  }, [props.data, props.initialAngle, props.semiCircle]);
+
+  useEffect(() => {
+    if (selectedIndex !== -1) {
+      const newStartAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
+      let start = 0;
+      for (let i = 0; i < selectedIndex; i++) {
+        start += props.data[i].value;
+      }
+      if (total) {
+        setStartAngle(newStartAngle + (2 * pi * start) / total);
+      }
+    }
+  }, [selectedIndex]);
+
   return (
     <View
       style={{
@@ -105,6 +140,7 @@ export const PieChart = (props: propTypes) => {
         marginTop: extraRadiusForFocused * 2,
       }}>
       {props.data.length > 1 &&
+        props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
         (props.focusOnPress || props.sectionAutoFocus) &&
         selectedIndex !== -1 && (
           <View

package/src/PieChart/main.tsx

@@ -88,7 +88,12 @@ export const PieChartMain = (props: propTypes) => {
       if (propData[i].value !== 0) {
         data.push(propData[i]);
       } else {
-        data.push({...propData[i], value: 0.0000009});
+        data.push({
+          ...propData[i],
+          value:
+            props.data.map(item => item.value).reduce((v, a) => v + a) /
+            36000000,
+        });
       }
     }
   }
@@ -149,7 +154,6 @@ export const PieChartMain = (props: propTypes) => {
     total = 0;
 
   data.forEach((item: any) => {
-    total += item.value;
     if (item.shiftX || item.shiftY) {
       isDataShifted = true;
       if (minShiftX > item.shiftX) {

package/src/utils/constants.ts

@@ -38,6 +38,7 @@ export const AxesAndRulesDefaults = {
   xAxisThickness: 1,
   xAxisType: ruleTypes.SOLID,
   xAxisTextNumberOfLines: 1,
+  xAxisLabelsVerticalShift: 0,
   dashWidth: 4,
   dashGap: 8,
   backgroundColor: 'transparent',
@@ -46,6 +47,7 @@ export const AxesAndRulesDefaults = {
   rulesType: ruleTypes.DASHED,
   rulesThickness: 1,
   rulesColor: 'lightgray',
+  rulesConfigArray: [],
 
   rotateLabel: false,
 
@@ -226,6 +228,9 @@ export const defaultPointerConfig = {
   pointerVanishDelay: 150,
   activatePointersOnLongPress: false,
   activatePointersDelay: 150,
+  initialPointerIndex: -1,
+  initialPointerAppearDelay: 0,
+  persistPointer: false,
   hidePointer1: false,
   hidePointer2: false,
   hidePointer3: false,

package/src/utils/index.tsx

@@ -224,6 +224,8 @@ export const getAxesAndRulesProps = (
     xAxisColor: props.xAxisColor,
     xAxisLength: props.xAxisLength,
     xAxisType: props.xAxisType,
+    xAxisLabelsHeight: props.xAxisLabelsHeight,
+    xAxisLabelsVerticalShift: props.xAxisLabelsVerticalShift,
     dashWidth: props.dashWidth,
     dashGap: props.dashGap,
     backgroundColor: props.backgroundColor,
@@ -232,6 +234,7 @@ export const getAxesAndRulesProps = (
     rulesType: props.rulesType,
     rulesThickness: props.rulesThickness,
     rulesColor: props.rulesColor,
+    rulesConfigArray: props.rulesConfigArray,
     showYAxisIndices: props.showYAxisIndices,
     yAxisIndicesHeight: props.yAxisIndicesHeight,
     yAxisIndicesWidth: props.yAxisIndicesWidth,

package/src/utils/types.ts

@@ -14,6 +14,15 @@ export enum CurveType {
   QUADRATIC,
 }
 
+export type RulesConfig = {
+  rulesLength?: number;
+  rulesColor?: ColorValue;
+  rulesThickness?: number;
+  rulesType?: RuleType;
+  dashWidth?: number;
+  dashGap?: number;
+}
+
 export type secondaryYAxisType = {
   noOfSections?: number;
   maxValue?: number;
@@ -103,6 +112,7 @@ export type horizSectionPropTypes = {
   xAxisType: RuleType;
   dashWidth: number;
   dashGap: number;
+  rulesConfigArray: Array<RulesConfig>;
   backgroundColor: string;
   hideRules: boolean;
   rulesLength: number;
@@ -243,6 +253,9 @@ export type Pointer = {
   pointerVanishDelay?: number;
   activatePointersOnLongPress?: boolean;
   activatePointersDelay?: number;
+  initialPointerIndex?: number;
+  initialPointerAppearDelay?: number;
+  persistPointer?: boolean;
   hidePointer1?: boolean;
   hidePointer2?: boolean;
   hidePointer3?: boolean;