react-native-gifted-charts 1.3.21 → 1.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.3.21",
+  "version": "1.3.23",
   "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,42 @@ const RenderBars = (props: Props) => {
     (pointerConfig && pointerConfig.barTouchable !== true);
 
   const barContent = () => {
+    const animated2DWithGradient = (noGradient, noAnimation) => (
+      <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}
+        noAnimation={noAnimation}
+        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 +466,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 +480,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 +497,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 +511,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, 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, 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}
-            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, 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,8 @@ 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 +336,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

@@ -38,10 +38,17 @@ import {
   getCurvePathWithSegments,
   getSegmentedPathObjects,
   getSegmentString,
+  getRegionPathObjects,
+  getPathWithHighlight,
 } from '../utils';
 import {
   AxesAndRulesDefaults,
   LineDefaults,
+  RANGE_ENTER,
+  RANGE_EXIT,
+  SEGMENT_END,
+  SEGMENT_START,
+  STOP,
   chartTypes,
   defaultArrowConfig,
   defaultPointerConfig,
@@ -258,17 +265,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 +889,29 @@ 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 getSegmentPath = (data, i, lineSegment, startIndex, endIndex) => {
+    let path =
+      'L' +
+      getX(i) +
+      ' ' +
+      getY(data[i].value) +
+      ' ' +
+      getSegmentString(lineSegment, i, SEGMENT_START, SEGMENT_END);
+
+    if (highlightedRange) {
+      path += getPathWithHighlight(
+        data,
+        i,
+        highlightedRange,
+        startIndex,
+        endIndex,
+        getX,
+        getY,
+      );
+    }
+    return path;
+  };
 
   useEffect(() => {
     if (dataSet) {
@@ -907,8 +927,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)]);
             }
@@ -918,7 +938,14 @@ export const LineChart = (props: LineChartPropsType) => {
             set.curveType ?? curveType,
             set.curvature ?? curvature,
           );
-          pointsArray.push(getCurvePathWithSegments(xx, set.lineSegments));
+          pointsArray.push(
+            getCurvePathWithSegments(
+              xx,
+              set.lineSegments,
+              SEGMENT_START,
+              SEGMENT_END,
+            ),
+          );
 
           // For Arrow-
           if (setData.length > 1 && (set.showArrow ?? props.showArrows)) {
@@ -953,13 +980,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 +1051,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 +1065,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,
+              );
             }
           }
         }
@@ -1271,11 +1334,46 @@ export const LineChart = (props: LineChartPropsType) => {
         let xx4 = svgPath(p4Array, curveType, curvature);
         let xx5 = svgPath(p5Array, curveType, curvature);
 
-        setPoints(getCurvePathWithSegments(xx, lineSegments));
-        setPoints2(getCurvePathWithSegments(xx2, lineSegments2));
-        setPoints3(getCurvePathWithSegments(xx3, lineSegments3));
-        setPoints4(getCurvePathWithSegments(xx4, lineSegments4));
-        setPoints5(getCurvePathWithSegments(xx5, lineSegments5));
+        setPoints(
+          getCurvePathWithSegments(
+            xx,
+            lineSegments,
+            SEGMENT_START,
+            SEGMENT_END,
+          ),
+        );
+        setPoints2(
+          getCurvePathWithSegments(
+            xx2,
+            lineSegments2,
+            SEGMENT_START,
+            SEGMENT_END,
+          ),
+        );
+        setPoints3(
+          getCurvePathWithSegments(
+            xx3,
+            lineSegments3,
+            SEGMENT_START,
+            SEGMENT_END,
+          ),
+        );
+        setPoints4(
+          getCurvePathWithSegments(
+            xx4,
+            lineSegments4,
+            SEGMENT_START,
+            SEGMENT_END,
+          ),
+        );
+        setPoints5(
+          getCurvePathWithSegments(
+            xx5,
+            lineSegments5,
+            SEGMENT_START,
+            SEGMENT_END,
+          ),
+        );
 
         if (data.length > 1 && (props.showArrow1 || props.showArrows)) {
           let arrowTipY = p1Array[p1Array.length - 1][1];
@@ -1691,6 +1789,7 @@ export const LineChart = (props: LineChartPropsType) => {
   const hideSecondaryPointer =
     pointerConfig?.hideSecondaryPointer ??
     defaultPointerConfig.hideSecondaryPointer;
+  const pointerEvents = pointerConfig?.pointerEvents;
   const disableScroll =
     props.disableScroll ||
     (pointerConfig
@@ -2263,6 +2362,7 @@ export const LineChart = (props: LineChartPropsType) => {
       pointerLabelComponent,
       secondaryPointerItem,
       scrollX,
+      pointerEvents,
     });
   };
 
@@ -2330,7 +2430,19 @@ export const LineChart = (props: LineChartPropsType) => {
     if (!points) return null;
     const isCurved = points.includes('C');
     let ar: [any] = [{}];
-    if (points.includes('segmentStart')) {
+    if (points.includes(RANGE_ENTER)) {
+      ar = getRegionPathObjects(
+        points,
+        color,
+        currentLineThickness,
+        thickness,
+        strokeDashArray,
+        isCurved,
+        RANGE_ENTER,
+        STOP,
+        RANGE_EXIT,
+      );
+    } else if (points.includes(SEGMENT_START)) {
       ar = getSegmentedPathObjects(
         points,
         color,
@@ -2338,6 +2450,8 @@ export const LineChart = (props: LineChartPropsType) => {
         thickness,
         strokeDashArray,
         isCurved,
+        SEGMENT_START,
+        SEGMENT_END,
       );
     }
     const lineSvgPropsOuter: LineSvgProps = {
@@ -2361,7 +2475,7 @@ export const LineChart = (props: LineChartPropsType) => {
     return (
       <Svg>
         {lineGradient && getLineGradientComponent()}
-        {points.includes('segmentStart') ? (
+        {points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (
           ar.map((item, index) => {
             const lineSvgProps: LineSvgProps = {
               d: item.d,
@@ -3387,13 +3501,13 @@ 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,
             }}>
             {!stripOverPointer && renderStripAndLabel()}

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,25 @@ export enum yAxisSides {
   RIGHT,
 }
 
+export enum loc {
+  IN,
+  UP,
+  DOWN
+}
+
+export const SEGMENT_START = 'segmentStart';
+export const SEGMENT_END = 'segmentEnd';
+export const RANGE_ENTER = 'RangeEnter';
+export const RANGE_EXIT = 'RangeExit';
+export const STOP = 'stop';
+
 export const ruleTypes: RuleTypes = {
   SOLID: 'solid',
   DASHED: 'dashed',
   DOTTED: 'dotted',
 };
 
+
 export const AxesAndRulesDefaults = {
   yAxisSide: yAxisSides.LEFT,
   yAxisColor: 'black',
@@ -239,6 +252,7 @@ export const defaultPointerConfig = {
   hidePointer5: false,
   hideSecondaryPointer: false,
   barTouchable: false,
+  // pointerEvents: PointerEvent
 };
 
 // Pie chart specific

package/src/utils/index.tsx

@@ -1,4 +1,10 @@
-import {defaultLineConfig} from './constants';
+import {
+  RANGE_ENTER,
+  RANGE_EXIT,
+  STOP,
+  defaultLineConfig,
+  loc,
+} from './constants';
 import {arrowConfigType, CurveType, LineProperties, LineSegment} from './types';
 
 export const getCumulativeWidth = (
@@ -25,9 +31,6 @@ export const getLighterColor = (color: String) => {
       r = parseInt(color[1], 16);
       g = parseInt(color[2], 16);
       b = parseInt(color[3], 16);
-      // console.log('r', r);
-      // console.log('g', g);
-      // console.log('b', b);
       if (r < 14) {
         r += 2;
         lighter += r.toString(16);
@@ -40,14 +43,10 @@ export const getLighterColor = (color: String) => {
         b += 2;
         lighter += b.toString(16);
       }
-      // console.log('lighter', lighter);
     } else {
       r = parseInt(color[1] + color[2], 16);
       g = parseInt(color[3] + color[4], 16);
       b = parseInt(color[5] + color[6], 16);
-      // console.log('r', r);
-      // console.log('g', g);
-      // console.log('b', b);
 
       if (r < 224) {
         r += 32;
@@ -61,7 +60,6 @@ export const getLighterColor = (color: String) => {
         b += 32;
         lighter += b.toString(16);
       }
-      // console.log('lighter', lighter);
     }
   }
   return lighter;
@@ -166,14 +164,21 @@ export const bezierCommand = (
   return `C${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`;
 };
 
-export const getSegmentString = (lineSegment, index) => {
+export const getSegmentString = (
+  lineSegment,
+  index,
+  startDelimeter,
+  endDelimeter,
+) => {
   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 = (
   path: string,
   lineSegment: LineSegment[] | undefined,
+  startDelimeter,
+  endDelimeter,
 ) => {
   if (!lineSegment?.length) return path;
   let newPath = '';
@@ -183,7 +188,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 +205,249 @@ export const getPreviousSegmentsLastPoint = (isCurved, previousSegment) => {
   );
 };
 
+export const getPathWithHighlight = (
+  data,
+  i,
+  highlightedRange,
+  startIndex,
+  endIndex,
+  getX,
+  getY,
+) => {
+  let path = '';
+  const {from, to} = highlightedRange;
+  const currentPointRegion =
+    data[i].value < from ? loc.DOWN : data[i].value > to ? loc.UP : loc.IN;
+
+  if (i !== endIndex) {
+    const nextPointRegion =
+      data[i + 1].value < from
+        ? loc.DOWN
+        : data[i + 1].value > to
+        ? loc.UP
+        : loc.IN;
+    if (
+      currentPointRegion !== nextPointRegion ||
+      (i === startIndex && currentPointRegion === loc.IN)
+    ) {
+      const x1 = getX(i),
+        y1 = getY(data[i].value),
+        x2 = getX(i + 1),
+        y2 = getY(data[i + 1].value);
+
+      let m = (y2 - y1) / (x2 - x1),
+        x,
+        y;
+      if (i === startIndex && currentPointRegion === loc.IN) {
+        // If the 1st point lies IN
+        y = y1;
+        x = x1;
+
+        path +=
+          'L' +
+          x +
+          ' ' +
+          y +
+          ' ' +
+          RANGE_ENTER +
+          JSON.stringify(highlightedRange) +
+          STOP;
+
+        if (nextPointRegion === loc.UP) {
+          y = getY(to);
+          x = (y - y1) / m + x1;
+
+          path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT;
+        } else if (nextPointRegion === loc.DOWN) {
+          y = getY(from);
+          x = (y - y1) / m + x1;
+
+          path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT;
+        }
+      } else if (currentPointRegion !== nextPointRegion) {
+        if (currentPointRegion === loc.DOWN && nextPointRegion === loc.UP) {
+          // if current point is in DOWN and next point is in UP, then we will add 2 points to the the path
+          y = getY(from);
+          x = (y - y1) / m + x1;
+
+          path +=
+            'L' +
+            x +
+            ' ' +
+            y +
+            ' ' +
+            RANGE_ENTER +
+            JSON.stringify(highlightedRange) +
+            STOP;
+          y = getY(to);
+          x = (y - y1) / m + x1;
+
+          path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT;
+        } else if (
+          currentPointRegion === loc.UP &&
+          nextPointRegion === loc.DOWN
+        ) {
+          // if current point is in UP and next point is in DOWN, then we will add 2 points to the the path
+          y = getY(to);
+          x = (y - y1) / m + x1;
+
+          path +=
+            'L' +
+            x +
+            ' ' +
+            y +
+            ' ' +
+            RANGE_ENTER +
+            JSON.stringify(highlightedRange) +
+            STOP;
+          y = getY(from);
+          x = (y - y1) / m + x1;
+
+          path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT;
+        } else {
+          if (
+            (currentPointRegion === loc.UP && nextPointRegion === loc.IN) ||
+            (currentPointRegion === loc.IN && nextPointRegion === loc.UP)
+          ) {
+            y = getY(to);
+          } else if (
+            (currentPointRegion === loc.IN && nextPointRegion === loc.DOWN) ||
+            (currentPointRegion === loc.DOWN && nextPointRegion === loc.IN)
+          ) {
+            y = getY(from);
+          }
+          m = (y2 - y1) / (x2 - x1);
+          x = (y - y1) / m + x1;
+
+          const prefix =
+            nextPointRegion === loc.IN
+              ? RANGE_ENTER + JSON.stringify(highlightedRange) + STOP
+              : RANGE_EXIT;
+
+          path += 'L' + x + ' ' + y + ' ' + prefix;
+        }
+      }
+    }
+  } else if (currentPointRegion === loc.IN) {
+    // If the last point lies IN, add RANGE_EXIT
+    path += RANGE_EXIT;
+  }
+
+  return path;
+};
+
+export const getRegionPathObjects = (
+  points,
+  color,
+  currentLineThickness,
+  thickness,
+  strokeDashArray,
+  isCurved,
+  startDelimeter,
+  stop,
+  endDelimeter,
+) => {
+  const ar: [any] = [{}];
+  let tempStr = points;
+
+  if (!points.startsWith(startDelimeter)) {
+    /**********************            line upto first segment                 *****************/
+
+    const lineSvgProps: LineProperties = {
+      d: points.substring(0, points.indexOf(startDelimeter)),
+      color,
+      strokeWidth: currentLineThickness || thickness,
+    };
+    if (strokeDashArray) {
+      lineSvgProps.strokeDashArray = strokeDashArray;
+    }
+    ar.push(lineSvgProps);
+  }
+
+  while (tempStr.includes(startDelimeter)) {
+    const startDelimeterIndex = tempStr.indexOf(startDelimeter);
+    const stopIndex = tempStr.indexOf(stop);
+    const endDelimeterIndex = tempStr.indexOf(endDelimeter);
+
+    const segmentConfigString = tempStr.substring(
+      startDelimeterIndex + startDelimeter.length,
+      stopIndex,
+    );
+
+    const segmentConfig = JSON.parse(segmentConfigString);
+
+    let segment = tempStr.substring(stopIndex + stop.length, endDelimeterIndex);
+
+    const previousSegment = ar[ar.length - 1].d;
+    const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
+      isCurved,
+      previousSegment,
+    );
+
+    /**********************            segment line                 *****************/
+
+    const lineSvgProps: LineProperties = {
+      d: moveToLastPointOfPreviousSegment + segment,
+      color: segmentConfig.color ?? color,
+      strokeWidth:
+        segmentConfig.thickness ?? (currentLineThickness || thickness),
+    };
+    if (segmentConfig.strokeDashArray) {
+      lineSvgProps.strokeDashArray = segmentConfig.strokeDashArray;
+    }
+    ar.push(lineSvgProps);
+
+    tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length);
+
+    const nextDelimiterIndex = tempStr.indexOf(startDelimeter);
+    const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex);
+
+    /**********************            line upto the next segment            *****************/
+
+    if (
+      nextDelimiterIndex !== -1 &&
+      stringUptoNextSegment.indexOf(isCurved ? 'C' : 'L') !== -1
+    ) {
+      const previousSegment = ar[ar.length - 1].d;
+      const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
+        isCurved,
+        previousSegment,
+      );
+      const lineSvgProps: LineProperties = {
+        d: moveToLastPointOfPreviousSegment + ' ' + stringUptoNextSegment,
+        color,
+        strokeWidth: currentLineThickness || thickness,
+      };
+      if (strokeDashArray) {
+        lineSvgProps.strokeDashArray = strokeDashArray;
+      }
+      ar.push(lineSvgProps);
+    }
+  }
+
+  /**********************            line after the last segment            *****************/
+
+  if (tempStr.length) {
+    const previousSegment = ar[ar.length - 1].d;
+    const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
+      isCurved,
+      previousSegment,
+    );
+    const lineSvgProps: LineProperties = {
+      d: moveToLastPointOfPreviousSegment + tempStr,
+      color,
+      strokeWidth: currentLineThickness || thickness,
+    };
+    if (strokeDashArray) {
+      lineSvgProps.strokeDashArray = strokeDashArray;
+    }
+    ar.push(lineSvgProps);
+  }
+
+  ar.shift();
+  return ar;
+};
+
 export const getSegmentedPathObjects = (
   points,
   color,
@@ -207,15 +455,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 +475,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,
-        endDelimeterIndex,
-      ),
+    const segmentConfigString = tempStr.substring(
+      startDelimeterIndex + startDelimeter.length,
+      endDelimeterIndex,
     );
 
+    const segmentConfig = JSON.parse(segmentConfigString);
+
     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 +520,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            *****************/
@@ -380,6 +630,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,6 +276,15 @@ 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 = {