react-native-gifted-charts 1.3.20 → 1.3.21

package/package.json

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

@@ -5,7 +5,6 @@ import {
   LayoutAnimation,
   Platform,
   UIManager,
-  Text,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
@@ -36,9 +35,6 @@ type propTypes = {
   capRadius?: number;
   horizontal: boolean;
   intactTopLabel: boolean;
-  showValuesAsTopLabel: boolean;
-  topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
   barBorderRadius?: number;
   barBorderTopLeftRadius?: number;
   barBorderTopRightRadius?: number;
@@ -71,10 +67,6 @@ const Animated2DWithGradient = (props: propTypes) => {
     barBorderTopRightRadius,
     barBorderBottomLeftRadius,
     barBorderBottomRightRadius,
-    intactTopLabel,
-    showValuesAsTopLabel,
-    topLabelContainerStyle,
-    topLabelTextStyle,
   } = props;
   const [height, setHeight] = useState(noAnimation ? props.height : 0.2);
   const [initialRender, setInitialRender] = useState(
@@ -307,7 +299,7 @@ const Animated2DWithGradient = (props: propTypes) => {
               </Svg>
             )}
           </View>
-          {(item.topLabelComponent || showValuesAsTopLabel) && (
+          {item.topLabelComponent && (
             <View
               style={[
                 {
@@ -316,7 +308,8 @@ const Animated2DWithGradient = (props: propTypes) => {
                   height: item.barWidth || barWidth || 30,
                   width: item.barWidth || barWidth || 30,
                   justifyContent:
-                    (props.horizontal && !intactTopLabel) || item.value < 0
+                    (props.horizontal && !props.intactTopLabel) ||
+                    item.value < 0
                       ? 'center'
                       : 'flex-end',
                   alignItems: 'center',
@@ -324,14 +317,10 @@ const Animated2DWithGradient = (props: propTypes) => {
                 },
                 item.value < 0 && {transform: [{rotate: '180deg'}]},
                 props.horizontal &&
-                  !intactTopLabel && {transform: [{rotate: '270deg'}]},
-                topLabelContainerStyle ?? item.topLabelContainerStyle,
+                  !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
+                item.topLabelContainerStyle,
               ]}>
-              {showValuesAsTopLabel ? (
-                <Text style={topLabelTextStyle}>{item.value}</Text>
-              ) : (
-                item.topLabelComponent?.()
-              )}
+              {item.topLabelComponent()}
             </View>
           )}
         </View>

package/src/BarChart/RenderBars.tsx

@@ -22,7 +22,6 @@ type Props = {
   topColor?: ColorValue;
   topLabelComponent?: Component;
   topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
   opacity?: number;
   side?: String;
   labelTextStyle?: any;
@@ -60,7 +59,6 @@ type Props = {
   horizontal: boolean;
   rtl: boolean;
   intactTopLabel: boolean;
-  showValuesAsTopLabel?: boolean;
   barBorderRadius?: number;
   barBorderTopLeftRadius?: number;
   barBorderTopRightRadius?: number;
@@ -123,10 +121,6 @@ const RenderBars = (props: Props) => {
     xAxisThickness,
     horizontal,
     rtl,
-    intactTopLabel,
-    showValuesAsTopLabel,
-    topLabelContainerStyle,
-    topLabelTextStyle,
     pointerConfig,
   } = props;
 
@@ -321,7 +315,7 @@ const RenderBars = (props: Props) => {
             patternIdFromProps={props.patternId}
           />
         )}
-        {(item.topLabelComponent || showValuesAsTopLabel) && (
+        {item.topLabelComponent && (
           <View
             style={[
               {
@@ -330,21 +324,17 @@ const RenderBars = (props: Props) => {
                 height: item.barWidth || props.barWidth || 30,
                 width: item.barWidth || props.barWidth || 30,
                 justifyContent:
-                  (horizontal && !intactTopLabel) || item.value < 0
+                  (horizontal && !props.intactTopLabel) || item.value < 0
                     ? 'center'
                     : 'flex-end',
                 alignItems: 'center',
               },
               item.value < 0 && {transform: [{rotate: '180deg'}]},
               horizontal &&
-                !intactTopLabel && {transform: [{rotate: '270deg'}]},
-              topLabelContainerStyle ?? item.topLabelContainerStyle,
+                !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
+              item.topLabelContainerStyle,
             ]}>
-            {showValuesAsTopLabel ? (
-              <Text style={topLabelTextStyle}>{item.value}</Text>
-            ) : (
-              item.topLabelComponent?.()
-            )}
+            {item.topLabelComponent()}
           </View>
         )}
       </>
@@ -405,41 +395,6 @@ const RenderBars = (props: Props) => {
     (pointerConfig && pointerConfig.barTouchable !== true);
 
   const barContent = () => {
-    const animated2DWithGradient = noGradient => (
-      <Animated2DWithGradient
-        barBackgroundPattern={props.barBackgroundPattern}
-        patternId={props.patternId}
-        barWidth={props.barWidth || 30}
-        barStyle={barStyle}
-        item={item}
-        opacity={opacity}
-        animationDuration={animationDuration || 800}
-        roundedBottom={props.roundedBottom || false}
-        roundedTop={props.roundedTop || false}
-        noGradient={noGradient}
-        gradientColor={noGradient ? undefined : props.gradientColor}
-        frontColor={props.frontColor || 'black'}
-        containerHeight={containerHeight}
-        maxValue={maxValue}
-        height={barHeight}
-        minHeight={minHeight ?? 0}
-        barMarginBottom={barMarginBottom}
-        cappedBars={props.cappedBars}
-        capThickness={props.capThickness}
-        capColor={props.capColor}
-        capRadius={props.capRadius}
-        horizontal={horizontal}
-        intactTopLabel={intactTopLabel}
-        showValuesAsTopLabel={!!showValuesAsTopLabel}
-        topLabelContainerStyle={topLabelContainerStyle}
-        topLabelTextStyle={topLabelTextStyle}
-        barBorderRadius={props.barBorderRadius || 0}
-        barBorderTopLeftRadius={barBorderTopLeftRadius}
-        barBorderTopRightRadius={barBorderTopRightRadius}
-        barBorderBottomLeftRadius={barBorderBottomLeftRadius}
-        barBorderBottomRightRadius={barBorderBottomRightRadius}
-      />
-    );
     return (
       <>
         {(props.showXAxisIndices || item.showXAxisIndex) && (
@@ -465,6 +420,7 @@ const RenderBars = (props: Props) => {
                 item.barBackgroundPattern || props.barBackgroundPattern
               }
               patternId={item.patternId || props.patternId}
+              topLabelContainerStyle={item.topLabelContainerStyle}
               width={item.barWidth || props.barWidth || 30}
               barStyle={barStyle}
               item={item}
@@ -479,13 +435,11 @@ const RenderBars = (props: Props) => {
               topColor={item.topColor || props.topColor || ''}
               showGradient={item.showGradient || props.showGradient || false}
               gradientColor={item.gradientColor || props.gradientColor}
+              topLabelComponent={item.topLabelComponent}
               opacity={opacity || 1}
               animationDuration={animationDuration || 800}
               height={barHeight}
-              intactTopLabel={intactTopLabel}
-              showValuesAsTopLabel={!!showValuesAsTopLabel}
-              topLabelContainerStyle={topLabelContainerStyle}
-              topLabelTextStyle={topLabelTextStyle}
+              intactTopLabel={props.intactTopLabel}
               horizontal={horizontal}
             />
           ) : (
@@ -496,6 +450,7 @@ const RenderBars = (props: Props) => {
               patternId={item.patternId || props.patternId}
               style={{}}
               color={''}
+              topLabelContainerStyle={item.topLabelContainerStyle}
               width={item.barWidth || props.barWidth || 30}
               sideWidth={
                 item.sideWidth ||
@@ -510,26 +465,111 @@ const RenderBars = (props: Props) => {
               topColor={item.topColor || props.topColor || ''}
               showGradient={item.showGradient || props.showGradient || false}
               gradientColor={item.gradientColor || props.gradientColor}
+              topLabelComponent={item.topLabelComponent || null}
               opacity={opacity || 1}
               horizontal={horizontal}
-              intactTopLabel={intactTopLabel}
-              showValuesAsTopLabel={!!showValuesAsTopLabel}
-              topLabelContainerStyle={topLabelContainerStyle}
-              topLabelTextStyle={topLabelTextStyle}
+              intactTopLabel={props.intactTopLabel}
               height={barHeight}
               value={item.value}
             />
           )
         ) : item.showGradient || props.showGradient ? (
           isAnimated ? (
-            animated2DWithGradient(false)
+            <Animated2DWithGradient
+              barBackgroundPattern={props.barBackgroundPattern}
+              patternId={props.patternId}
+              barWidth={props.barWidth || 30}
+              barStyle={barStyle}
+              item={item}
+              opacity={opacity}
+              animationDuration={animationDuration || 800}
+              roundedBottom={props.roundedBottom || false}
+              roundedTop={props.roundedTop || false}
+              gradientColor={props.gradientColor}
+              frontColor={props.frontColor || 'black'}
+              containerHeight={containerHeight}
+              maxValue={maxValue}
+              height={barHeight}
+              minHeight={minHeight ?? 0}
+              barMarginBottom={barMarginBottom}
+              cappedBars={props.cappedBars}
+              capThickness={props.capThickness}
+              capColor={props.capColor}
+              capRadius={props.capRadius}
+              horizontal={horizontal}
+              intactTopLabel={props.intactTopLabel}
+              barBorderRadius={props.barBorderRadius || 0}
+              barBorderTopLeftRadius={barBorderTopLeftRadius}
+              barBorderTopRightRadius={barBorderTopRightRadius}
+              barBorderBottomLeftRadius={barBorderBottomLeftRadius}
+              barBorderBottomRightRadius={barBorderBottomRightRadius}
+            />
           ) : (
             static2DWithGradient(item)
           )
         ) : isAnimated ? (
-          animated2DWithGradient(true)
+          <Animated2DWithGradient
+            barBackgroundPattern={props.barBackgroundPattern}
+            patternId={props.patternId}
+            barWidth={props.barWidth || 30}
+            barStyle={barStyle}
+            item={item}
+            opacity={opacity}
+            animationDuration={animationDuration || 800}
+            roundedBottom={props.roundedBottom || false}
+            roundedTop={props.roundedTop || false}
+            gradientColor={props.gradientColor}
+            noGradient
+            frontColor={props.frontColor || 'black'}
+            containerHeight={containerHeight}
+            maxValue={maxValue}
+            height={barHeight}
+            minHeight={minHeight || 0}
+            barMarginBottom={barMarginBottom}
+            cappedBars={props.cappedBars}
+            capThickness={props.capThickness}
+            capColor={props.capColor}
+            capRadius={props.capRadius}
+            horizontal={horizontal}
+            intactTopLabel={props.intactTopLabel}
+            barBorderRadius={props.barBorderRadius || 0}
+            barBorderTopLeftRadius={barBorderTopLeftRadius}
+            barBorderTopRightRadius={barBorderTopRightRadius}
+            barBorderBottomLeftRadius={barBorderBottomLeftRadius}
+            barBorderBottomRightRadius={barBorderBottomRightRadius}
+          />
         ) : (
-          animated2DWithGradient(true)
+          <Animated2DWithGradient
+            barBackgroundPattern={props.barBackgroundPattern}
+            patternId={props.patternId}
+            barWidth={props.barWidth || 30}
+            barStyle={barStyle}
+            item={item}
+            opacity={opacity}
+            animationDuration={animationDuration || 800}
+            roundedBottom={props.roundedBottom || false}
+            roundedTop={props.roundedTop || false}
+            gradientColor={props.gradientColor}
+            noGradient
+            noAnimation
+            frontColor={props.frontColor || 'black'}
+            containerHeight={containerHeight}
+            maxValue={maxValue}
+            height={barHeight}
+            minHeight={minHeight || 0}
+            barMarginBottom={barMarginBottom}
+            cappedBars={props.cappedBars}
+            capThickness={props.capThickness}
+            capColor={props.capColor}
+            capRadius={props.capRadius}
+            horizontal={horizontal}
+            intactTopLabel={props.intactTopLabel}
+            barBorderRadius={props.barBorderRadius || 0}
+            barBorderTopLeftRadius={barBorderTopLeftRadius}
+            barBorderTopRightRadius={barBorderTopRightRadius}
+            barBorderBottomLeftRadius={barBorderBottomLeftRadius}
+            barBorderBottomRightRadius={barBorderBottomRightRadius}
+          />
         )}
         {isAnimated
           ? renderAnimatedLabel(label, labelTextStyle, item.value)

package/src/BarChart/index.tsx

@@ -303,7 +303,6 @@ export const BarChart = (props: BarChartPropsType) => {
     pointerConfig?.persistPointer ?? defaultPointerConfig.persistPointer;
   const hidePointer1 =
     pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1;
-  const pointerEvents = pointerConfig?.pointerEvents;
 
   const disableScroll =
     props.disableScroll ||
@@ -613,7 +612,6 @@ export const BarChart = (props: BarChartPropsType) => {
       pointerConfig,
       pointerLabelComponent,
       scrollX: 0,
-      pointerEvents,
     });
   };
 
@@ -714,7 +712,7 @@ export const BarChart = (props: BarChartPropsType) => {
           {renderChart()}
           {pointerX > 0 ? (
             <View
-              pointerEvents={pointerEvents ?? 'none'}
+              pointerEvents="none"
               style={{
                 position: 'absolute',
                 height:
@@ -757,9 +755,6 @@ export const BarChart = (props: BarChartPropsType) => {
         horizontal: horizontal,
         rtl: rtl,
         intactTopLabel: intactTopLabel,
-        showValuesAsTopLabel: props.showValuesAsTopLabel,
-        topLabelContainerStyle: props.topLabelContainerStyle,
-        topLabelTextStyle: props.topLabelTextStyle,
         barBorderRadius: props.barBorderRadius,
         barBorderTopLeftRadius: props.barBorderTopLeftRadius,
         barBorderTopRightRadius: props.barBorderTopRightRadius,

package/src/BarChart/types.ts

@@ -126,9 +126,6 @@ export type BarChartPropsType = {
   yAxisAtTop?: boolean;
 
   intactTopLabel?: boolean;
-  showValuesAsTopLabel?: boolean;
-  topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
 
   horizSections?: Array<sectionType>;
   barBorderRadius?: number;

package/src/Components/AnimatedBar/index.tsx

@@ -6,7 +6,6 @@ import {
   LayoutAnimation,
   Platform,
   UIManager,
-  Text,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
@@ -33,13 +32,12 @@ type animatedBarPropTypes = {
   frontColor: ColorValue;
   sideColor: ColorValue;
   topColor: ColorValue;
+  topLabelComponent: any;
+  topLabelContainerStyle: any;
   opacity: number;
   side: String;
   horizontal: boolean;
   intactTopLabel: boolean;
-  showValuesAsTopLabel: boolean;
-  topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
   barBackgroundPattern?: Function;
   patternId?: String;
   barStyle?: object;
@@ -109,18 +107,9 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
-  const {
-    item,
-    width,
-    sideWidth,
-    barStyle,
-    barBackgroundPattern,
-    patternId,
-    intactTopLabel,
-    showValuesAsTopLabel,
-    topLabelContainerStyle,
-    topLabelTextStyle,
-  } = props;
+  const {item, width, sideWidth, barStyle} = props;
+
+  const {barBackgroundPattern, patternId} = props;
 
   const showGradient = props.showGradient || false;
   const gradientColor = props.gradientColor || 'white';
@@ -129,6 +118,9 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
   const sideColor = props.sideColor || '#cc2233';
   const topColor = props.topColor || '#ff4433';
 
+  const topLabelComponent = props.topLabelComponent || null;
+  const topLabelContainerStyle = props.topLabelContainerStyle || {};
+
   const opacity = props.opacity || 1;
 
   return (
@@ -202,17 +194,16 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
           ) : null}
 
           <View
-            style={[
-              {
-                width: width,
-                height: height, //animatedHeight
-                backgroundColor: frontColor,
-                borderLeftWidth: StyleSheet.hairlineWidth,
-                borderTopWidth: StyleSheet.hairlineWidth,
-                borderColor: 'white',
-                opacity: opacity,
-              },
-              item.barStyle || barStyle,
+            style={[{
+              width: width,
+              height: height, //animatedHeight
+              backgroundColor: frontColor,
+              borderLeftWidth: StyleSheet.hairlineWidth,
+              borderTopWidth: StyleSheet.hairlineWidth,
+              borderColor: 'white',
+              opacity: opacity,
+            },
+            item.barStyle || barStyle
             ]}>
             {showGradient && (
               <LinearGradient
@@ -239,7 +230,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
 
           {/*******************          Top Label            *****************/}
 
-          {(item.topLabelComponent || showValuesAsTopLabel) && (
+          {topLabelComponent && (
             <View
               style={[
                 {
@@ -252,15 +243,11 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
                   opacity: opacity,
                 },
                 props.horizontal &&
-                  !intactTopLabel && {transform: [{rotate: '270deg'}]},
+                  !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
                 props.side === 'right' && {transform: [{rotateY: '180deg'}]},
-                topLabelContainerStyle ?? item.topLabelContainerStyle,
+                topLabelContainerStyle,
               ]}>
-              {showValuesAsTopLabel ? (
-                <Text style={topLabelTextStyle}>{item.value}</Text>
-              ) : (
-                item.topLabelComponent?.()
-              )}
+              {topLabelComponent()}
             </View>
           )}
 

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -103,9 +103,6 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
   const xAxisLabelsVerticalShift =
     axesAndRulesProps.xAxisLabelsVerticalShift ??
     AxesAndRulesDefaults.xAxisLabelsVerticalShift;
-  const xAxisLabelsHeight =
-    axesAndRulesProps.xAxisLabelsHeight;
-  const xAxisTextNumberOfLines = axesAndRulesProps.xAxisTextNumberOfLines;
   const dashWidth =
     axesAndRulesProps.dashWidth ?? AxesAndRulesDefaults.dashWidth;
   const dashGap = axesAndRulesProps.dashGap ?? AxesAndRulesDefaults.dashGap;
@@ -337,7 +334,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
       stepHeight / 2 +
       xAxisLabelsVerticalShift +
       50,
-    marginBottom: (xAxisLabelsHeight ?? xAxisTextNumberOfLines*18) - 50, //This is to not let the Things that should be rendered below the chart overlap with it
+    marginBottom: 15, //This is to not let the Things that should be rendered below the chart overlap with it
   };
 
   return (

package/src/Components/ThreeDBar/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, StyleSheet, ColorValue, Text} from 'react-native';
+import {View, StyleSheet, ColorValue} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {styles} from './styles';
@@ -15,13 +15,12 @@ type PropTypes = {
   frontColor: ColorValue;
   sideColor: ColorValue;
   topColor: ColorValue;
+  topLabelComponent: any;
+  topLabelContainerStyle: any;
   opacity: number;
   side: String;
   horizontal: boolean;
   intactTopLabel: boolean;
-  showValuesAsTopLabel: boolean;
-  topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
   value: number;
   barBackgroundPattern?: Function;
   patternId?: String;
@@ -81,12 +80,8 @@ const ThreeDBar = (props: PropTypes) => {
   const sideColor = props.sideColor || '#cc2233';
   const topColor = props.topColor || '#ff4433';
 
-  const {
-    intactTopLabel,
-    showValuesAsTopLabel,
-    topLabelContainerStyle,
-    topLabelTextStyle,
-  } = props;
+  const topLabelComponent = props.topLabelComponent || null;
+  const topLabelContainerStyle = props.topLabelContainerStyle || {};
 
   const opacity = props.opacity || 1;
   return (
@@ -189,7 +184,7 @@ const ThreeDBar = (props: PropTypes) => {
 
       {/*******************          Top Label            *****************/}
 
-      {(item.topLabelComponent || showValuesAsTopLabel) && (
+      {topLabelComponent && (
         <View
           style={[
             {
@@ -202,17 +197,13 @@ const ThreeDBar = (props: PropTypes) => {
             },
             value < 0 && {transform: [{rotate: '180deg'}]},
             props.horizontal &&
-              !intactTopLabel && {transform: [{rotate: '270deg'}]},
+              !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
             props.side === 'right'
               ? {right: (-1 * width) / 4}
               : {left: (-1 * width) / 4},
-            topLabelContainerStyle ?? item.topLabelContainerStyle,
+            topLabelContainerStyle,
           ]}>
-          {showValuesAsTopLabel ? (
-            <Text style={topLabelTextStyle}>{item.value}</Text>
-          ) : (
-            item.topLabelComponent?.()
-          )}
+          {topLabelComponent()}
         </View>
       )}
 

package/src/Components/common/StripAndLabel.tsx

@@ -27,7 +27,6 @@ export const StripAndLabel = props => {
     pointerLabelComponent,
     secondaryPointerItem,
     scrollX,
-    pointerEvents,
   } = props;
   let left = 0,
     top = 0;
@@ -126,7 +125,7 @@ export const StripAndLabel = props => {
 
       {pointerLabelComponent && (
         <View
-          pointerEvents={pointerEvents ?? 'none'}
+          pointerEvents="none"
           style={[
             {
               position: 'absolute',

package/src/LineChart/index.tsx

@@ -45,7 +45,6 @@ import {
   chartTypes,
   defaultArrowConfig,
   defaultPointerConfig,
-  loc,
   screenWidth,
 } from '../utils/constants';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
@@ -259,14 +258,17 @@ export const LineChart = (props: LineChartPropsType) => {
   const startIndex5 = props.startIndex5 || 0;
   const endIndex5 = props.endIndex5 ?? data5.length - 1;
 
+  const startIndicesFromSet = dataSet?.map(set => set.startIndex ?? 0);
+  const endIndicesFromSet = dataSet?.map(
+    set => set.endIndex ?? set.data.length - 1,
+  );
+
   const lineSegments = props.lineSegments;
   const lineSegments2 = props.lineSegments2;
   const lineSegments3 = props.lineSegments3;
   const lineSegments4 = props.lineSegments4;
   const lineSegments5 = props.lineSegments5;
 
-  const highlightedRange = props.highlightedRange;
-
   if (!initialData) {
     initialData = data0 ?? [...data];
     animations = initialData.map(item => new Animated.Value(item.value));
@@ -883,57 +885,13 @@ export const LineChart = (props: LineChartPropsType) => {
       getNextPoint(data, i, around)
     );
   };
-
-  const getRegionPrefix = (currentPointRegion, nextPointRegion) =>
-    currentPointRegion === loc.OUT && nextPointRegion === loc.IN
-      ? 'RangeEnter' + JSON.stringify(highlightedRange)
-      : 'RangeExit';
-
-  const getSegmentPath = (data, i, lineSegment, startIndex, endIndex) => {
-    let path =
-      'L' +
-      getX(i) +
-      ' ' +
-      getY(data[i].value) +
-      ' ' +
-      getSegmentString(lineSegment, i);
-
-    if (highlightedRange && i !== endIndex) {
-      const {from, to} = highlightedRange;
-      console.log('from..',from);
-      console.log('to..',to);
-      const currentPointRegion =
-        data[i].value >= from && data[i].value <= to ? loc.IN : loc.OUT;
-      const nextPointRegion =
-        data[i + 1].value >= from && data[i + 1].value <= to ? loc.IN : loc.OUT;
-      console.log('currentPointRegion..',currentPointRegion);
-      console.log('nextPointRegion..',nextPointRegion);
-      if (currentPointRegion !== nextPointRegion) {
-        const x1 = getX(i),
-          y1 = getY(data[i].value),
-          x2 = getX(i + 1),
-          y2 = getY(data[i + 1].value);
-
-        if (x2 - x1 === 0) {
-        } else {
-          const y = data[i + 1].value > data[i].value ? getY(from) : getY(to);
-          const m = (y2 - y1) / (x2 - x1);
-          const x = (y - y1) / m + x1;
-
-          path +=
-            getRegionPrefix(currentPointRegion, nextPointRegion) +
-            'L' +
-            x +
-            ' ' +
-            y +
-            ' ';
-        }
-      } else {
-      }
-    }
-    console.log('path..',path);
-    return path;
-  };
+  const getSegmentPath = (data, i, lineSegment) =>
+    'L' +
+    getX(i) +
+    ' ' +
+    getY(data[i].value) +
+    ' ' +
+    getSegmentString(lineSegment, i);
 
   useEffect(() => {
     if (dataSet) {
@@ -949,8 +907,8 @@ export const LineChart = (props: LineChartPropsType) => {
           const pArray: Array<Array<number>> = [];
           for (let i = 0; i < setData.length; i++) {
             if (
-              i >= (set.startIndex ?? 0) &&
-              i <= (set.endIndex ?? set.data.length - 1)
+              i >= (startIndicesFromSet?.[index] ?? 0) &&
+              i <= (endIndicesFromSet?.[index] ?? -1)
             ) {
               pArray.push([getX(i), getY(setData[i].value)]);
             }
@@ -995,19 +953,13 @@ export const LineChart = (props: LineChartPropsType) => {
           let pp = '';
           for (let i = 0; i < setData.length; i++) {
             if (
-              i >= (set.startIndex ?? 0) &&
-              i <= (set.endIndex ?? set.data.length - 1)
+              i >= (startIndicesFromSet?.[index] ?? 0) &&
+              i <= (endIndicesFromSet?.[index] ?? -1)
             ) {
               if (set.stepChart || stepChart) {
                 pp += getStepPath(setData, i);
               } else {
-                pp += getSegmentPath(
-                  setData,
-                  i,
-                  set.lineSegments,
-                  set.startIndex ?? 0,
-                  set.endIndex ?? set.data.length - 1,
-                );
+                pp += getSegmentPath(setData, i, set.lineSegments);
               }
             }
           }
@@ -1066,13 +1018,7 @@ export const LineChart = (props: LineChartPropsType) => {
             if (stepChart || stepChart1) {
               pp += getStepPath(data, i);
             } else {
-              pp += getSegmentPath(
-                data,
-                i,
-                lineSegments,
-                startIndex1,
-                endIndex1,
-              );
+              pp += getSegmentPath(data, i, lineSegments);
             }
           }
           if (data2.length && i >= startIndex2 && i <= endIndex2) {
@@ -1080,52 +1026,28 @@ export const LineChart = (props: LineChartPropsType) => {
               pp2 += getStepPath(data2, i);
               (' ');
             } else {
-              pp2 += getSegmentPath(
-                data2,
-                i,
-                lineSegments2,
-                startIndex2,
-                endIndex2,
-              );
+              pp2 += getSegmentPath(data2, i, lineSegments2);
             }
           }
           if (data3.length && i >= startIndex3 && i <= endIndex3) {
             if (stepChart || stepChart3) {
               pp3 += getStepPath(data3, i);
             } else {
-              pp3 += getSegmentPath(
-                data2,
-                i,
-                lineSegments2,
-                startIndex3,
-                endIndex3,
-              );
+              pp3 += getSegmentPath(data2, i, lineSegments2);
             }
           }
           if (data4.length && i >= startIndex4 && i <= endIndex4) {
             if (stepChart || stepChart4) {
               pp4 += getStepPath(data4, i);
             } else {
-              pp4 += getSegmentPath(
-                data4,
-                i,
-                lineSegments4,
-                startIndex4,
-                endIndex4,
-              );
+              pp4 += getSegmentPath(data4, i, lineSegments4);
             }
           }
           if (data5.length && i >= startIndex5 && i <= endIndex5) {
             if (stepChart || stepChart5) {
               pp5 += getStepPath(data5, i);
             } else {
-              pp5 += getSegmentPath(
-                data5,
-                i,
-                lineSegments5,
-                startIndex5,
-                endIndex4,
-              );
+              pp5 += getSegmentPath(data5, i, lineSegments5);
             }
           }
         }
@@ -1769,7 +1691,6 @@ export const LineChart = (props: LineChartPropsType) => {
   const hideSecondaryPointer =
     pointerConfig?.hideSecondaryPointer ??
     defaultPointerConfig.hideSecondaryPointer;
-  const pointerEvents = pointerConfig?.pointerEvents;
   const disableScroll =
     props.disableScroll ||
     (pointerConfig
@@ -2342,7 +2263,6 @@ export const LineChart = (props: LineChartPropsType) => {
       pointerLabelComponent,
       secondaryPointerItem,
       scrollX,
-      pointerEvents,
     });
   };
 
@@ -2410,7 +2330,7 @@ export const LineChart = (props: LineChartPropsType) => {
     if (!points) return null;
     const isCurved = points.includes('C');
     let ar: [any] = [{}];
-    if (points.includes('RangeStart')) {
+    if (points.includes('segmentStart')) {
       ar = getSegmentedPathObjects(
         points,
         color,
@@ -2418,19 +2338,6 @@ export const LineChart = (props: LineChartPropsType) => {
         thickness,
         strokeDashArray,
         isCurved,
-        'RangeEnter',
-        'RangeExit',
-      );
-    } else if (points.includes('segmentStart')) {
-      ar = getSegmentedPathObjects(
-        points,
-        color,
-        currentLineThickness,
-        thickness,
-        strokeDashArray,
-        isCurved,
-        'segmentStart',
-        'segmentEnd',
       );
     }
     const lineSvgPropsOuter: LineSvgProps = {
@@ -2451,12 +2358,10 @@ export const LineChart = (props: LineChartPropsType) => {
     ) {
       lineSvgPropsOuter.strokeDasharray = strokeDashArray;
     }
-
-    return null;
     return (
       <Svg>
         {lineGradient && getLineGradientComponent()}
-        {points.includes('segmentStart') || points.includes('RangeStart') ? (
+        {points.includes('segmentStart') ? (
           ar.map((item, index) => {
             const lineSvgProps: LineSvgProps = {
               d: item.d,
@@ -3482,15 +3387,14 @@ export const LineChart = (props: LineChartPropsType) => {
           : null}
         {pointerX > 0 ? (
           <View
-            pointerEvents={pointerEvents ?? 'none'}
+            pointerEvents="none"
             style={{
               position: 'absolute',
               height:
                 extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
               bottom: 58 + labelsExtraHeight + xAxisLabelsVerticalShift,
-              // width: totalWidth,
+              width: totalWidth,
               zIndex: 20,
-              backgroundColor: 'orange',
             }}>
             {!stripOverPointer && renderStripAndLabel()}
             {dataSet ? (

package/src/LineChart/types.ts

@@ -4,7 +4,6 @@ import {
   CurveType,
   DataSet,
   EdgePosition,
-  HighlightedRange,
   LineSegment,
   Pointer,
   RuleType,
@@ -311,7 +310,6 @@ export type LineChartPropsType = {
   lineSegments3?: Array<LineSegment>;
   lineSegments4?: Array<LineSegment>;
   lineSegments5?: Array<LineSegment>;
-  highlightedRange?: HighlightedRange;
 };
 
 type referenceConfigType = {

package/src/utils/constants.ts

@@ -24,18 +24,12 @@ export enum yAxisSides {
   RIGHT,
 }
 
-export enum loc {
-  IN,
-  OUT
-}
-
 export const ruleTypes: RuleTypes = {
   SOLID: 'solid',
   DASHED: 'dashed',
   DOTTED: 'dotted',
 };
 
-
 export const AxesAndRulesDefaults = {
   yAxisSide: yAxisSides.LEFT,
   yAxisColor: 'black',
@@ -245,7 +239,6 @@ export const defaultPointerConfig = {
   hidePointer5: false,
   hideSecondaryPointer: false,
   barTouchable: false,
-  // pointerEvents: PointerEvent
 };
 
 // Pie chart specific

package/src/utils/index.tsx

@@ -168,7 +168,7 @@ export const bezierCommand = (
 
 export const getSegmentString = (lineSegment, index) => {
   const segment = lineSegment?.find(segment => segment.startIndex === index);
-  return segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : '';
+  return segment ? 'segmentStart' + JSON.stringify(segment) + 'segmentEnd' : '';
 };
 
 export const getCurvePathWithSegments = (
@@ -183,7 +183,7 @@ export const getCurvePathWithSegments = (
     newPath +=
       (pathArray[i].startsWith('M') ? '' : 'C') +
       pathArray[i] +
-      (segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : '');
+      (segment ? 'segmentStart' + JSON.stringify(segment) + 'segmentEnd' : '');
   }
   return newPath;
 };
@@ -200,17 +200,6 @@ export const getPreviousSegmentsLastPoint = (isCurved, previousSegment) => {
   );
 };
 
-// export const getRegionPathObjects = (
-//   points,
-//   color,
-//   currentLineThickness,
-//   thickness,
-//   strokeDashArray,
-//   isCurved,
-// ) => {
-
-// }
-
 export const getSegmentedPathObjects = (
   points,
   color,
@@ -218,17 +207,15 @@ export const getSegmentedPathObjects = (
   thickness,
   strokeDashArray,
   isCurved,
-  startDelimeter,
-  endDelimeter,
 ) => {
   const ar: [any] = [{}];
   let tempStr = points;
 
-  if (!points.startsWith(startDelimeter)) {
+  if (!points.startsWith('segmentStart')) {
     /**********************            line upto first segment                 *****************/
 
     const lineSvgProps: LineProperties = {
-      d: points.substring(0, points.indexOf(startDelimeter)),
+      d: points.substring(0, points.indexOf('segmentStart')),
       color,
       strokeWidth: currentLineThickness || thickness,
     };
@@ -238,20 +225,20 @@ export const getSegmentedPathObjects = (
     ar.push(lineSvgProps);
   }
 
-  while (tempStr.includes(startDelimeter)) {
-    const startDelimeterIndex = tempStr.indexOf(startDelimeter);
-    const endDelimeterIndex = tempStr.indexOf(endDelimeter);
+  while (tempStr.includes('segmentStart')) {
+    const startDelimeterIndex = tempStr.indexOf('segmentStart');
+    const endDelimeterIndex = tempStr.indexOf('segmentEnd');
 
     const segmentConfig = JSON.parse(
       tempStr.substring(
-        startDelimeterIndex + startDelimeter.length,
+        startDelimeterIndex + 'segmentStart'.length,
         endDelimeterIndex,
       ),
     );
 
     const {startIndex, endIndex} = segmentConfig;
     const segmentLength = endIndex - startIndex;
-    let segment = tempStr.substring(endDelimeterIndex + endDelimeter.length);
+    let segment = tempStr.substring(endDelimeterIndex + 'segmentEnd'.length);
     let c = 0,
       s = 0,
       i;
@@ -283,9 +270,9 @@ export const getSegmentedPathObjects = (
     }
     ar.push(lineSvgProps);
 
-    tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length + i);
+    tempStr = tempStr.substring(endDelimeterIndex + 'segmentEnd'.length + i);
 
-    const nextDelimiterIndex = tempStr.indexOf(startDelimeter);
+    const nextDelimiterIndex = tempStr.indexOf('segmentStart');
     const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex);
 
     /**********************            line upto the next segment            *****************/
@@ -331,7 +318,6 @@ export const getSegmentedPathObjects = (
   }
 
   ar.shift();
-  console.log('ar...',ar)
   return ar;
 };
 
@@ -394,7 +380,6 @@ export const getAxesAndRulesProps = (
     xAxisColor: props.xAxisColor,
     xAxisLength: props.xAxisLength,
     xAxisType: props.xAxisType,
-    xAxisTextNumberOfLines: props.xAxisTextNumberOfLines ?? 1,
     xAxisLabelsHeight: props.xAxisLabelsHeight,
     xAxisLabelsVerticalShift: props.xAxisLabelsVerticalShift,
     dashWidth: props.dashWidth,

package/src/utils/types.ts

@@ -29,8 +29,6 @@ export type RulesConfig = {
   dashGap?: number;
 };
 
-export type PointerEvents = "box-none" | "none" | "box-only" | "auto";
-
 export type secondaryYAxisType = {
   noOfSections?: number;
   maxValue?: number;
@@ -276,17 +274,8 @@ export type Pointer = {
   hideSecondaryPointer?: boolean;
   strokeDashArray?: Array<number>;
   barTouchable?: boolean;
-  pointerEvents?: PointerEvents;
 };
 
-export type HighlightedRange = {
-  from: number;
-  to: number;
-  color?: string | ColorValue;
-  thickness?: number;
-  strokeDashArray?: Array<number>;
-}
-
 export type LineSegment = {
   startIndex: number;
   endIndex: number;