react-native-gifted-charts 1.3.19 → 1.3.20

package/package.json

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

package/src/BarChart/RenderBars.tsx

@@ -22,6 +22,7 @@ type Props = {
   topColor?: ColorValue;
   topLabelComponent?: Component;
   topLabelContainerStyle?: any;
+  topLabelTextStyle?: any;
   opacity?: number;
   side?: String;
   labelTextStyle?: any;
@@ -59,6 +60,7 @@ type Props = {
   horizontal: boolean;
   rtl: boolean;
   intactTopLabel: boolean;
+  showValuesAsTopLabel?: boolean;
   barBorderRadius?: number;
   barBorderTopLeftRadius?: number;
   barBorderTopRightRadius?: number;
@@ -121,6 +123,10 @@ const RenderBars = (props: Props) => {
     xAxisThickness,
     horizontal,
     rtl,
+    intactTopLabel,
+    showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
     pointerConfig,
   } = props;
 
@@ -315,7 +321,7 @@ const RenderBars = (props: Props) => {
             patternIdFromProps={props.patternId}
           />
         )}
-        {item.topLabelComponent && (
+        {(item.topLabelComponent || showValuesAsTopLabel) && (
           <View
             style={[
               {
@@ -324,17 +330,21 @@ const RenderBars = (props: Props) => {
                 height: item.barWidth || props.barWidth || 30,
                 width: item.barWidth || props.barWidth || 30,
                 justifyContent:
-                  (horizontal && !props.intactTopLabel) || item.value < 0
+                  (horizontal && !intactTopLabel) || item.value < 0
                     ? 'center'
                     : 'flex-end',
                 alignItems: 'center',
               },
               item.value < 0 && {transform: [{rotate: '180deg'}]},
               horizontal &&
-                !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
-              item.topLabelContainerStyle,
+                !intactTopLabel && {transform: [{rotate: '270deg'}]},
+              topLabelContainerStyle ?? item.topLabelContainerStyle,
             ]}>
-            {item.topLabelComponent()}
+            {showValuesAsTopLabel ? (
+              <Text style={topLabelTextStyle}>{item.value}</Text>
+            ) : (
+              item.topLabelComponent?.()
+            )}
           </View>
         )}
       </>
@@ -395,6 +405,41 @@ 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) && (
@@ -420,7 +465,6 @@ 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}
@@ -435,11 +479,13 @@ 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={props.intactTopLabel}
+              intactTopLabel={intactTopLabel}
+              showValuesAsTopLabel={!!showValuesAsTopLabel}
+              topLabelContainerStyle={topLabelContainerStyle}
+              topLabelTextStyle={topLabelTextStyle}
               horizontal={horizontal}
             />
           ) : (
@@ -450,7 +496,6 @@ const RenderBars = (props: Props) => {
               patternId={item.patternId || props.patternId}
               style={{}}
               color={''}
-              topLabelContainerStyle={item.topLabelContainerStyle}
               width={item.barWidth || props.barWidth || 30}
               sideWidth={
                 item.sideWidth ||
@@ -465,111 +510,26 @@ 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={props.intactTopLabel}
+              intactTopLabel={intactTopLabel}
+              showValuesAsTopLabel={!!showValuesAsTopLabel}
+              topLabelContainerStyle={topLabelContainerStyle}
+              topLabelTextStyle={topLabelTextStyle}
               height={barHeight}
               value={item.value}
             />
           )
         ) : item.showGradient || props.showGradient ? (
           isAnimated ? (
-            <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}
-            />
+            animated2DWithGradient(false)
           ) : (
             static2DWithGradient(item)
           )
         ) : isAnimated ? (
-          <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}
-          />
+          animated2DWithGradient(true)
         )}
         {isAnimated
           ? renderAnimatedLabel(label, labelTextStyle, item.value)

package/src/BarChart/index.tsx

@@ -303,6 +303,7 @@ export const BarChart = (props: BarChartPropsType) => {
     pointerConfig?.persistPointer ?? defaultPointerConfig.persistPointer;
   const hidePointer1 =
     pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1;
+  const pointerEvents = pointerConfig?.pointerEvents;
 
   const disableScroll =
     props.disableScroll ||
@@ -612,6 +613,7 @@ export const BarChart = (props: BarChartPropsType) => {
       pointerConfig,
       pointerLabelComponent,
       scrollX: 0,
+      pointerEvents,
     });
   };
 
@@ -712,7 +714,7 @@ export const BarChart = (props: BarChartPropsType) => {
           {renderChart()}
           {pointerX > 0 ? (
             <View
-              pointerEvents="none"
+              pointerEvents={pointerEvents ?? 'none'}
               style={{
                 position: 'absolute',
                 height:
@@ -755,6 +757,9 @@ 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,6 +126,9 @@ 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,6 +6,7 @@ import {
   LayoutAnimation,
   Platform,
   UIManager,
+  Text,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
@@ -32,12 +33,13 @@ 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;
@@ -107,9 +109,18 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
-  const {item, width, sideWidth, barStyle} = props;
-
-  const {barBackgroundPattern, patternId} = props;
+  const {
+    item,
+    width,
+    sideWidth,
+    barStyle,
+    barBackgroundPattern,
+    patternId,
+    intactTopLabel,
+    showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
+  } = props;
 
   const showGradient = props.showGradient || false;
   const gradientColor = props.gradientColor || 'white';
@@ -118,9 +129,6 @@ 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 (
@@ -194,16 +202,17 @@ 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
@@ -230,7 +239,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
 
           {/*******************          Top Label            *****************/}
 
-          {topLabelComponent && (
+          {(item.topLabelComponent || showValuesAsTopLabel) && (
             <View
               style={[
                 {
@@ -243,11 +252,15 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
                   opacity: opacity,
                 },
                 props.horizontal &&
-                  !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
+                  !intactTopLabel && {transform: [{rotate: '270deg'}]},
                 props.side === 'right' && {transform: [{rotateY: '180deg'}]},
-                topLabelContainerStyle,
+                topLabelContainerStyle ?? item.topLabelContainerStyle,
               ]}>
-              {topLabelComponent()}
+              {showValuesAsTopLabel ? (
+                <Text style={topLabelTextStyle}>{item.value}</Text>
+              ) : (
+                item.topLabelComponent?.()
+              )}
             </View>
           )}
 

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -103,6 +103,9 @@ 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;
@@ -334,7 +337,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
       stepHeight / 2 +
       xAxisLabelsVerticalShift +
       50,
-    marginBottom: 15, //This is to not let the Things that should be rendered below the chart overlap with it
+    marginBottom: (xAxisLabelsHeight ?? xAxisTextNumberOfLines*18) - 50, //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} from 'react-native';
+import {View, StyleSheet, ColorValue, Text} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {styles} from './styles';
@@ -15,12 +15,13 @@ 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;
@@ -80,8 +81,12 @@ const ThreeDBar = (props: PropTypes) => {
   const sideColor = props.sideColor || '#cc2233';
   const topColor = props.topColor || '#ff4433';
 
-  const topLabelComponent = props.topLabelComponent || null;
-  const topLabelContainerStyle = props.topLabelContainerStyle || {};
+  const {
+    intactTopLabel,
+    showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
+  } = props;
 
   const opacity = props.opacity || 1;
   return (
@@ -184,7 +189,7 @@ const ThreeDBar = (props: PropTypes) => {
 
       {/*******************          Top Label            *****************/}
 
-      {topLabelComponent && (
+      {(item.topLabelComponent || showValuesAsTopLabel) && (
         <View
           style={[
             {
@@ -197,13 +202,17 @@ const ThreeDBar = (props: PropTypes) => {
             },
             value < 0 && {transform: [{rotate: '180deg'}]},
             props.horizontal &&
-              !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
+              !intactTopLabel && {transform: [{rotate: '270deg'}]},
             props.side === 'right'
               ? {right: (-1 * width) / 4}
               : {left: (-1 * width) / 4},
-            topLabelContainerStyle,
+            topLabelContainerStyle ?? item.topLabelContainerStyle,
           ]}>
-          {topLabelComponent()}
+          {showValuesAsTopLabel ? (
+            <Text style={topLabelTextStyle}>{item.value}</Text>
+          ) : (
+            item.topLabelComponent?.()
+          )}
         </View>
       )}
 

package/src/Components/common/StripAndLabel.tsx

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

package/src/LineChart/index.tsx

@@ -45,6 +45,7 @@ import {
   chartTypes,
   defaultArrowConfig,
   defaultPointerConfig,
+  loc,
   screenWidth,
 } from '../utils/constants';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
@@ -258,17 +259,14 @@ 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));
@@ -885,13 +883,57 @@ export const LineChart = (props: LineChartPropsType) => {
       getNextPoint(data, i, around)
     );
   };
-  const getSegmentPath = (data, i, lineSegment) =>
-    'L' +
-    getX(i) +
-    ' ' +
-    getY(data[i].value) +
-    ' ' +
-    getSegmentString(lineSegment, i);
+
+  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;
+  };
 
   useEffect(() => {
     if (dataSet) {
@@ -907,8 +949,8 @@ export const LineChart = (props: LineChartPropsType) => {
           const pArray: Array<Array<number>> = [];
           for (let i = 0; i < setData.length; i++) {
             if (
-              i >= (startIndicesFromSet?.[index] ?? 0) &&
-              i <= (endIndicesFromSet?.[index] ?? -1)
+              i >= (set.startIndex ?? 0) &&
+              i <= (set.endIndex ?? set.data.length - 1)
             ) {
               pArray.push([getX(i), getY(setData[i].value)]);
             }
@@ -953,13 +995,19 @@ export const LineChart = (props: LineChartPropsType) => {
           let pp = '';
           for (let i = 0; i < setData.length; i++) {
             if (
-              i >= (startIndicesFromSet?.[index] ?? 0) &&
-              i <= (endIndicesFromSet?.[index] ?? -1)
+              i >= (set.startIndex ?? 0) &&
+              i <= (set.endIndex ?? set.data.length - 1)
             ) {
               if (set.stepChart || stepChart) {
                 pp += getStepPath(setData, i);
               } else {
-                pp += getSegmentPath(setData, i, set.lineSegments);
+                pp += getSegmentPath(
+                  setData,
+                  i,
+                  set.lineSegments,
+                  set.startIndex ?? 0,
+                  set.endIndex ?? set.data.length - 1,
+                );
               }
             }
           }
@@ -1018,7 +1066,13 @@ export const LineChart = (props: LineChartPropsType) => {
             if (stepChart || stepChart1) {
               pp += getStepPath(data, i);
             } else {
-              pp += getSegmentPath(data, i, lineSegments);
+              pp += getSegmentPath(
+                data,
+                i,
+                lineSegments,
+                startIndex1,
+                endIndex1,
+              );
             }
           }
           if (data2.length && i >= startIndex2 && i <= endIndex2) {
@@ -1026,28 +1080,52 @@ export const LineChart = (props: LineChartPropsType) => {
               pp2 += getStepPath(data2, i);
               (' ');
             } else {
-              pp2 += getSegmentPath(data2, i, lineSegments2);
+              pp2 += getSegmentPath(
+                data2,
+                i,
+                lineSegments2,
+                startIndex2,
+                endIndex2,
+              );
             }
           }
           if (data3.length && i >= startIndex3 && i <= endIndex3) {
             if (stepChart || stepChart3) {
               pp3 += getStepPath(data3, i);
             } else {
-              pp3 += getSegmentPath(data2, i, lineSegments2);
+              pp3 += getSegmentPath(
+                data2,
+                i,
+                lineSegments2,
+                startIndex3,
+                endIndex3,
+              );
             }
           }
           if (data4.length && i >= startIndex4 && i <= endIndex4) {
             if (stepChart || stepChart4) {
               pp4 += getStepPath(data4, i);
             } else {
-              pp4 += getSegmentPath(data4, i, lineSegments4);
+              pp4 += getSegmentPath(
+                data4,
+                i,
+                lineSegments4,
+                startIndex4,
+                endIndex4,
+              );
             }
           }
           if (data5.length && i >= startIndex5 && i <= endIndex5) {
             if (stepChart || stepChart5) {
               pp5 += getStepPath(data5, i);
             } else {
-              pp5 += getSegmentPath(data5, i, lineSegments5);
+              pp5 += getSegmentPath(
+                data5,
+                i,
+                lineSegments5,
+                startIndex5,
+                endIndex4,
+              );
             }
           }
         }
@@ -1691,6 +1769,7 @@ export const LineChart = (props: LineChartPropsType) => {
   const hideSecondaryPointer =
     pointerConfig?.hideSecondaryPointer ??
     defaultPointerConfig.hideSecondaryPointer;
+  const pointerEvents = pointerConfig?.pointerEvents;
   const disableScroll =
     props.disableScroll ||
     (pointerConfig
@@ -2263,6 +2342,7 @@ export const LineChart = (props: LineChartPropsType) => {
       pointerLabelComponent,
       secondaryPointerItem,
       scrollX,
+      pointerEvents,
     });
   };
 
@@ -2330,7 +2410,7 @@ export const LineChart = (props: LineChartPropsType) => {
     if (!points) return null;
     const isCurved = points.includes('C');
     let ar: [any] = [{}];
-    if (points.includes('segmentStart')) {
+    if (points.includes('RangeStart')) {
       ar = getSegmentedPathObjects(
         points,
         color,
@@ -2338,6 +2418,19 @@ 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 = {
@@ -2358,10 +2451,12 @@ export const LineChart = (props: LineChartPropsType) => {
     ) {
       lineSvgPropsOuter.strokeDasharray = strokeDashArray;
     }
+
+    return null;
     return (
       <Svg>
         {lineGradient && getLineGradientComponent()}
-        {points.includes('segmentStart') ? (
+        {points.includes('segmentStart') || points.includes('RangeStart') ? (
           ar.map((item, index) => {
             const lineSvgProps: LineSvgProps = {
               d: item.d,
@@ -3387,14 +3482,15 @@ export const LineChart = (props: LineChartPropsType) => {
           : null}
         {pointerX > 0 ? (
           <View
-            pointerEvents="none"
+            pointerEvents={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,6 +4,7 @@ import {
   CurveType,
   DataSet,
   EdgePosition,
+  HighlightedRange,
   LineSegment,
   Pointer,
   RuleType,
@@ -310,6 +311,7 @@ export type LineChartPropsType = {
   lineSegments3?: Array<LineSegment>;
   lineSegments4?: Array<LineSegment>;
   lineSegments5?: Array<LineSegment>;
+  highlightedRange?: HighlightedRange;
 };
 
 type referenceConfigType = {

package/src/utils/constants.ts

@@ -24,12 +24,18 @@ 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',
@@ -239,6 +245,7 @@ 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 ? 'segmentStart' + JSON.stringify(segment) + 'segmentEnd' : '';
+  return segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : '';
 };
 
 export const getCurvePathWithSegments = (
@@ -183,7 +183,7 @@ export const getCurvePathWithSegments = (
     newPath +=
       (pathArray[i].startsWith('M') ? '' : 'C') +
       pathArray[i] +
-      (segment ? 'segmentStart' + JSON.stringify(segment) + 'segmentEnd' : '');
+      (segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : '');
   }
   return newPath;
 };
@@ -200,6 +200,17 @@ export const getPreviousSegmentsLastPoint = (isCurved, previousSegment) => {
   );
 };
 
+// export const getRegionPathObjects = (
+//   points,
+//   color,
+//   currentLineThickness,
+//   thickness,
+//   strokeDashArray,
+//   isCurved,
+// ) => {
+
+// }
+
 export const getSegmentedPathObjects = (
   points,
   color,
@@ -207,15 +218,17 @@ export const getSegmentedPathObjects = (
   thickness,
   strokeDashArray,
   isCurved,
+  startDelimeter,
+  endDelimeter,
 ) => {
   const ar: [any] = [{}];
   let tempStr = points;
 
-  if (!points.startsWith('segmentStart')) {
+  if (!points.startsWith(startDelimeter)) {
     /**********************            line upto first segment                 *****************/
 
     const lineSvgProps: LineProperties = {
-      d: points.substring(0, points.indexOf('segmentStart')),
+      d: points.substring(0, points.indexOf(startDelimeter)),
       color,
       strokeWidth: currentLineThickness || thickness,
     };
@@ -225,20 +238,20 @@ export const getSegmentedPathObjects = (
     ar.push(lineSvgProps);
   }
 
-  while (tempStr.includes('segmentStart')) {
-    const startDelimeterIndex = tempStr.indexOf('segmentStart');
-    const endDelimeterIndex = tempStr.indexOf('segmentEnd');
+  while (tempStr.includes(startDelimeter)) {
+    const startDelimeterIndex = tempStr.indexOf(startDelimeter);
+    const endDelimeterIndex = tempStr.indexOf(endDelimeter);
 
     const segmentConfig = JSON.parse(
       tempStr.substring(
-        startDelimeterIndex + 'segmentStart'.length,
+        startDelimeterIndex + startDelimeter.length,
         endDelimeterIndex,
       ),
     );
 
     const {startIndex, endIndex} = segmentConfig;
     const segmentLength = endIndex - startIndex;
-    let segment = tempStr.substring(endDelimeterIndex + 'segmentEnd'.length);
+    let segment = tempStr.substring(endDelimeterIndex + endDelimeter.length);
     let c = 0,
       s = 0,
       i;
@@ -270,9 +283,9 @@ export const getSegmentedPathObjects = (
     }
     ar.push(lineSvgProps);
 
-    tempStr = tempStr.substring(endDelimeterIndex + 'segmentEnd'.length + i);
+    tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length + i);
 
-    const nextDelimiterIndex = tempStr.indexOf('segmentStart');
+    const nextDelimiterIndex = tempStr.indexOf(startDelimeter);
     const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex);
 
     /**********************            line upto the next segment            *****************/
@@ -318,6 +331,7 @@ export const getSegmentedPathObjects = (
   }
 
   ar.shift();
+  console.log('ar...',ar)
   return ar;
 };
 
@@ -380,6 +394,7 @@ 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,6 +29,8 @@ export type RulesConfig = {
   dashGap?: number;
 };
 
+export type PointerEvents = "box-none" | "none" | "box-only" | "auto";
+
 export type secondaryYAxisType = {
   noOfSections?: number;
   maxValue?: number;
@@ -274,8 +276,17 @@ 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;