react-native-gifted-charts 0.2.0 → 0.2.4

package/README.md

@@ -19,12 +19,13 @@ The most complete library for Bar, Line, Area, Pie, and Donut charts in React Na
 
 ![alt text](/demos/altBars.svg)
 ![alt text](/demos/barPairs.svg)
+<img src='/demos/animatedDataLineChart.gif' alt='' width=300/>
+<img src='/demos/pielabbelled.svg' alt='' height=280 width=270/>
 <img src='/demos/movingBars.gif' alt='' width=300/>
 <img src='/demos/lineLabelled.png' alt='' height=370 width=360/>
 ![alt text](/demos/lineArea.png)
 <img src='/demos/cappedCombined.png' alt='' height=280 width=280/>
-<img src='/demos/line.gif' alt='' height=280 width=270/>
-<img src='/demos/pielabbelled.svg' alt='' height=280 width=270/>
+<img src='/demos/line.gif' alt='' height=300 width=290/>
 
 ---
 
@@ -98,6 +99,7 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 | Issue                                                                                                                        | Solution                                                                                                                   |
 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
 | [BarChart - Value and section line don't match](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/35) | [Comment by the owner](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/35#issuecomment-972673281) |
+| **Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.** | install `react-native-webview`  |
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues"
   },
-  "homepage": "https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts#readme",
+  "homepage": "https://gifted-charts.web.app/",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/BarChart/index.tsx

@@ -966,7 +966,7 @@ export const BarChart = (props: PropTypes) => {
       <ScrollView
         style={[
           {
-            marginLeft: 36,
+            marginLeft: yAxisLabelWidth,
             position: 'absolute',
             bottom: stepHeight * -0.5 - 60 + xAxisThickness,
           },

package/src/LineChart/index.tsx

@@ -25,6 +25,9 @@ import Svg, {
 import {svgPath, bezierCommand} from '../utils';
 import Rule from '../Components/lineSvg';
 
+let initialData = null;
+let animations = [];
+
 type propTypes = {
   height?: number;
   noOfSections?: number;
@@ -42,7 +45,9 @@ type propTypes = {
   thickness3?: number;
   rotateLabel?: Boolean;
   isAnimated?: Boolean;
+  animateOnDataChange?: Boolean;
   animationDuration?: number;
+  onDataChangeAnimationDuration?: number;
   animationEasing?: any;
   animateTogether?: boolean;
   xAxisThickness?: number;
@@ -50,6 +55,17 @@ type propTypes = {
   hideRules?: Boolean;
   rulesColor?: ColorValue;
   rulesThickness?: number;
+  pressEnabled?: Boolean;
+  showDataPointOnPress?: Boolean;
+  showStripOnPress?: Boolean;
+  showTextOnPress?: Boolean;
+  stripHeight?: number;
+  stripWidth?: number;
+  stripColor?: ColorValue | String | any;
+  stripOpacity?: number;
+  onPress?: Function;
+  unFocusOnPressOut?: Boolean;
+  delayBeforeUnFocus?: number;
 
   rulesType?: String;
   dashWidth?: number;
@@ -127,6 +143,17 @@ type propTypes = {
   dataPointsRadius3?: number;
   dataPointsColor3?: string;
   dataPointsShape3?: string;
+  customDataPoint?: Function;
+
+  focusedDataPointShape?: String;
+  focusedDataPointWidth?: number;
+  focusedDataPointHeight?: number;
+  focusedDataPointColor?: ColorValue | String | any;
+  focusedDataPointRadius?: number;
+  focusedCustomDataPoint?: Function;
+  dataPointLabelWidth?: number;
+  dataPointLabelShiftX?: number;
+  dataPointLabelShiftY?: number;
 
   startFillColor?: string;
   endFillColor?: string;
@@ -171,6 +198,7 @@ type referenceConfigType = {
 type itemType = {
   value?: number;
   label: String;
+  labelComponent: Function;
   labelTextStyle?: any;
   dataPointText?: string;
   textShiftX?: number;
@@ -178,12 +206,32 @@ type itemType = {
   textColor?: string;
   textFontSize?: number;
 
-  showDataPoint?: Boolean;
+  hideDataPoint?: Boolean;
   dataPointHeight?: number;
   dataPointWidth?: number;
   dataPointRadius?: number;
   dataPointColor?: string;
   dataPointShape?: string;
+  customDataPoint?: Function;
+
+  stripHeight?: number;
+  stripWidth?: number;
+  stripColor?: ColorValue | String | any;
+  stripOpacity?: number;
+
+  focusedDataPointShape?: String;
+  focusedDataPointWidth?: number;
+  focusedDataPointHeight?: number;
+  focusedDataPointColor?: ColorValue | String | any;
+  focusedDataPointRadius?: number;
+  focusedCustomDataPoint?: Function;
+
+  dataPointLabelComponent?: Function;
+  focusedDataPointLabelComponent?: Function;
+  dataPointLabelWidth?: number;
+  dataPointLabelShiftX?: number;
+  dataPointLabelShiftY?: number;
+  showStrip?: Boolean;
 
   showVerticalLine?: Boolean;
   verticalLineColor?: string;
@@ -201,9 +249,10 @@ export const LineChart = (props: propTypes) => {
   const [fillPoints, setFillPoints] = useState('');
   const [fillPoints2, setFillPoints2] = useState('');
   const [fillPoints3, setFillPoints3] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(-1);
   const containerHeight = props.height || 200;
   const noOfSections = props.noOfSections || 10;
-  const data = useMemo(() => props.data || [], [props.data]);
+  let data = useMemo(() => props.data || [], [props.data]);
   const data2 = useMemo(() => props.data2 || [], [props.data2]);
   const data3 = useMemo(() => props.data3 || [], [props.data3]);
 
@@ -213,7 +262,93 @@ export const LineChart = (props: propTypes) => {
   const widthValue3 = useMemo(() => new Animated.Value(0), []);
 
   const animationDuration = props.animationDuration || 800;
+  const onDataChangeAnimationDuration =
+    props.onDataChangeAnimationDuration || 400;
   const animateTogether = props.animateTogether || false;
+  const animateOnDataChange = props.animateOnDataChange || false;
+
+  if (!initialData) {
+    initialData = [...data];
+    animations = initialData.map(item => new Animated.Value(item.value));
+  }
+
+  let newPoints = '',
+    newFillPoints = '';
+  let counter = 0;
+
+  if (animateOnDataChange) {
+    animations.forEach((item, index) => {
+      item.addListener(val => {
+        data[index].value = val.value;
+        let pp = '',
+          ppp = '';
+        if (!props.curved) {
+          for (let i = 0; i < data.length; i++) {
+            pp +=
+              'L' +
+              (initialSpacing - dataPointsWidth1 / 2 + spacing * i) +
+              ' ' +
+              (containerHeight +
+                10 -
+                (data[i].value * containerHeight) / maxValue) +
+              ' ';
+          }
+          if (areaChart) {
+            ppp =
+              'L' +
+              (initialSpacing - dataPointsWidth1 / 2) +
+              ' ' +
+              (containerHeight + 10 - xAxisThickness) +
+              ' ';
+            ppp += pp;
+            ppp +=
+              'L' +
+              (initialSpacing -
+                dataPointsWidth1 / 2 +
+                spacing * (data.length - 1)) +
+              ' ' +
+              (containerHeight + 10 - xAxisThickness);
+            ppp +=
+              'L' +
+              (initialSpacing - dataPointsWidth1 / 2) +
+              ' ' +
+              (containerHeight + 10 - xAxisThickness) +
+              ' ';
+          }
+          newPoints = pp;
+          newFillPoints = ppp;
+          setPointsOnChange();
+        }
+        counter++;
+      });
+    });
+  }
+
+  const setPointsOnChange = () => {
+    if (counter === data.length) {
+      // console.log('here.......');
+      if (!props.curved) {
+        setPoints(newPoints.replace('L', 'M'));
+        if (areaChart) {
+          setFillPoints(newFillPoints.replace('L', 'M'));
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (animateOnDataChange) {
+      Animated.parallel(
+        animations.map((anItem, index) =>
+          Animated.timing(anItem, {
+            toValue: data[index].value,
+            useNativeDriver: true,
+            duration: onDataChangeAnimationDuration,
+          }),
+        ),
+      ).start();
+    }
+  }, [animateOnDataChange, data, onDataChangeAnimationDuration]);
 
   const labelsAppear = useCallback(() => {
     opacValue.setValue(0);
@@ -348,14 +483,17 @@ export const LineChart = (props: propTypes) => {
       pp3 = '';
     if (!props.curved) {
       for (let i = 0; i < data.length; i++) {
-        pp +=
-          'L' +
-          (initialSpacing - dataPointsWidth1 / 2 + spacing * i) +
-          ' ' +
-          (containerHeight +
-            10 -
-            (data[i].value * containerHeight) / maxValue) +
-          ' ';
+        if (!animateOnDataChange) {
+          pp +=
+            'L' +
+            (initialSpacing - dataPointsWidth1 / 2 + spacing * i) +
+            ' ' +
+            (containerHeight +
+              10 -
+              (data[i].value * containerHeight) / maxValue) +
+            ' ';
+          setPoints(pp.replace('L', 'M'));
+        }
         if (data2.length) {
           pp2 +=
             'L' +
@@ -377,7 +515,6 @@ export const LineChart = (props: propTypes) => {
             ' ';
         }
       }
-      setPoints(pp.replace('L', 'M'));
       setPoints2(pp2.replace('L', 'M'));
       setPoints3(pp3.replace('L', 'M'));
 
@@ -387,26 +524,29 @@ export const LineChart = (props: propTypes) => {
           ppp2 = '',
           ppp3 = '';
 
-        ppp =
-          'L' +
-          (initialSpacing - dataPointsWidth1 / 2) +
-          ' ' +
-          (containerHeight + 10 - xAxisThickness) +
-          ' ';
-        ppp += pp;
-        ppp +=
-          'L' +
-          (initialSpacing -
-            dataPointsWidth1 / 2 +
-            spacing * (data.length - 1)) +
-          ' ' +
-          (containerHeight + 10 - xAxisThickness);
-        ppp +=
-          'L' +
-          (initialSpacing - dataPointsWidth1 / 2) +
-          ' ' +
-          (containerHeight + 10 - xAxisThickness) +
-          ' ';
+        if (!animateOnDataChange) {
+          ppp =
+            'L' +
+            (initialSpacing - dataPointsWidth1 / 2) +
+            ' ' +
+            (containerHeight + 10 - xAxisThickness) +
+            ' ';
+          ppp += pp;
+          ppp +=
+            'L' +
+            (initialSpacing -
+              dataPointsWidth1 / 2 +
+              spacing * (data.length - 1)) +
+            ' ' +
+            (containerHeight + 10 - xAxisThickness);
+          ppp +=
+            'L' +
+            (initialSpacing - dataPointsWidth1 / 2) +
+            ' ' +
+            (containerHeight + 10 - xAxisThickness) +
+            ' ';
+          setFillPoints(ppp.replace('L', 'M'));
+        }
 
         if (data2.length) {
           ppp2 =
@@ -455,8 +595,6 @@ export const LineChart = (props: propTypes) => {
             ' ';
           setFillPoints3(ppp3.replace('L', 'M'));
         }
-
-        setFillPoints(ppp.replace('L', 'M'));
       }
 
       // console.log('pp-------->', pp);
@@ -599,6 +737,7 @@ export const LineChart = (props: propTypes) => {
       /*************************************************************************************/
     }
   }, [
+    animateOnDataChange,
     areaChart,
     containerHeight,
     data,
@@ -701,6 +840,18 @@ export const LineChart = (props: propTypes) => {
   const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
   const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
 
+  const pressEnabled = props.pressEnabled || false;
+  const showDataPointOnPress = props.showDataPointOnPress || false;
+  const showStripOnPress = props.showStripOnPress || false;
+  const showTextOnPress = props.showTextOnPress || false;
+  const stripHeight = props.stripHeight;
+  const stripWidth = props.stripWidth === 0 ? 0 : props.stripWidth || 2;
+  const stripColor = props.stripColor || color1;
+  const stripOpacity = props.stripOpacity || (startOpacity1 + endOpacity1) / 2;
+  const unFocusOnPressOut = props.unFocusOnPressOut === false ? false : true;
+  const delayBeforeUnFocus =
+    props.delayBeforeUnFocus === 0 ? 0 : props.delayBeforeUnFocus || 300;
+
   const defaultReferenceConfig = {
     thickness: rulesThickness,
     width: (props.width || totalWidth) + 11,
@@ -775,7 +926,12 @@ export const LineChart = (props: propTypes) => {
     });
   }
 
-  const renderLabel = (index: number, label: String, labelTextStyle: any) => {
+  const renderLabel = (
+    index: number,
+    label: String,
+    labelTextStyle: any,
+    labelComponent: Function,
+  ) => {
     return (
       <View
         style={[
@@ -792,9 +948,15 @@ export const LineChart = (props: propTypes) => {
           },
           rotateLabel && {transform: [{rotate: '60deg'}]},
         ]}>
-        <Text style={[labelTextStyle, {textAlign: 'center'}]} numberOfLines={1}>
-          {label || ''}
-        </Text>
+        {labelComponent ? (
+          labelComponent()
+        ) : (
+          <Text
+            style={[labelTextStyle, {textAlign: 'center'}]}
+            numberOfLines={1}>
+            {label || ''}
+          </Text>
+        )}
       </View>
     );
   };
@@ -803,6 +965,7 @@ export const LineChart = (props: propTypes) => {
     index: number,
     label: String,
     labelTextStyle: any,
+    labelComponent: Function,
   ) => {
     // console.log('label', label);
     return (
@@ -823,9 +986,15 @@ export const LineChart = (props: propTypes) => {
           },
           rotateLabel && {transform: [{rotate: '60deg'}]},
         ]}>
-        <Text style={[labelTextStyle, {textAlign: 'center'}]} numberOfLines={1}>
-          {label || ''}
-        </Text>
+        {labelComponent ? (
+          labelComponent()
+        ) : (
+          <Text
+            style={[labelTextStyle, {textAlign: 'center'}]}
+            numberOfLines={1}>
+            {label || ''}
+          </Text>
+        )}
       </Animated.View>
     );
   };
@@ -996,124 +1165,232 @@ export const LineChart = (props: propTypes) => {
     );
   };
 
-  const renderSpecificDataPoints = dataForRender => {
-    return dataForRender.map((item: itemType, index: number) => {
-      if (item.showDataPoint) {
-        if (item.dataPointShape === 'rectangular') {
-          return (
-            <Fragment key={index}>
-              <Rect
-                x={
-                  initialSpacing -
-                  (item.dataPointWidth || 2) / 2 -
-                  1 +
-                  spacing * index
-                }
-                y={
-                  containerHeight -
-                  (item.dataPointHeight || 2) / 2 +
-                  10 -
-                  (item.value * containerHeight) / maxValue
-                }
-                width={item.dataPointWidth || 2}
-                height={item.dataPointHeight || 2}
-                fill={item.dataPointColor || 'black'}
-              />
-              {item.dataPointText && (
-                <CanvasText
-                  fill={item.textColor || 'black'}
-                  fontSize={item.textFontSize || 10}
-                  x={
-                    initialSpacing -
-                    (item.dataPointWidth || 2) +
-                    spacing * index +
-                    (item.textShiftX || props.textShiftX || 0)
-                  }
-                  y={
-                    containerHeight -
-                    (item.dataPointHeight || 2) / 2 +
-                    10 -
-                    (item.value * containerHeight) / maxValue +
-                    (item.textShiftY || props.textShiftY || 0)
-                  }>
-                  {item.dataPointText}
-                </CanvasText>
-              )}
-            </Fragment>
-          );
-        } else {
-          return (
-            <Fragment key={index}>
-              <Circle
-                cx={
-                  initialSpacing -
-                  (item.dataPointWidth || 2) / 2 +
-                  spacing * index
-                }
-                cy={
-                  containerHeight +
-                  10 -
-                  (item.value * containerHeight) / maxValue
-                }
-                r={item.dataPointRadius || 3}
-                fill={item.dataPointColor || 'black'}
-              />
-              {item.dataPointText && (
-                <CanvasText
-                  fill={item.textColor || 'black'}
-                  fontSize={item.textFontSize || 10}
-                  x={
-                    initialSpacing -
-                    (item.dataPointWidth || 2) +
-                    spacing * index +
-                    (item.textShiftX || props.textShiftX || 0)
-                  }
-                  y={
-                    containerHeight -
-                    (item.dataPointHeight || 2) / 2 +
-                    10 -
-                    (item.value * containerHeight) / maxValue +
-                    (item.textShiftY || props.textShiftY || 0)
-                  }>
-                  {item.dataPointText}
-                </CanvasText>
-              )}
-            </Fragment>
-          );
-        }
-      }
-      return null;
-    });
+  const onStripPress = (item, index) => {
+    setSelectedIndex(index);
+    if (props.onPress) {
+      props.onPress(item, index);
+    }
   };
 
   const renderDataPoints = (
     dataForRender,
-    dataPointsShape,
-    dataPointsWidth,
-    dataPointsHeight,
-    dataPointsColor,
-    dataPointsRadius,
+    dataPtsShape,
+    dataPtsWidth,
+    dataPtsHeight,
+    dataPtsColor,
+    dataPtsRadius,
     textColor,
     textFontSize,
   ) => {
     return dataForRender.map((item: itemType, index: number) => {
-      // console.log('comes in');
-      if (dataPointsShape === 'rectangular') {
-        return (
-          <Fragment key={index}>
+      if (item.hideDataPoint) {
+        return null;
+      }
+      let dataPointsShape,
+        dataPointsWidth,
+        dataPointsHeight,
+        dataPointsColor,
+        dataPointsRadius,
+        text,
+        customDataPoint,
+        dataPointLabelComponent;
+      if (index === selectedIndex) {
+        dataPointsShape =
+          item.focusedDataPointShape ||
+          props.focusedDataPointShape ||
+          item.dataPointShape ||
+          dataPtsShape;
+        dataPointsWidth =
+          item.focusedDataPointWidth ||
+          props.focusedDataPointWidth ||
+          item.dataPointWidth ||
+          dataPtsWidth;
+        dataPointsHeight =
+          item.focusedDataPointHeight ||
+          props.focusedDataPointHeight ||
+          item.dataPointHeight ||
+          dataPtsHeight;
+        dataPointsColor =
+          item.focusedDataPointColor ||
+          props.focusedDataPointColor ||
+          item.dataPointColor ||
+          dataPtsColor;
+        dataPointsRadius =
+          item.focusedDataPointRadius ||
+          props.focusedDataPointRadius ||
+          item.dataPointRadius ||
+          dataPtsRadius;
+        if (showTextOnPress) {
+          text = item.dataPointText;
+        }
+        customDataPoint =
+          item.focusedCustomDataPoint ||
+          props.focusedCustomDataPoint ||
+          item.customDataPoint ||
+          props.customDataPoint;
+        dataPointLabelComponent =
+          item.focusedDataPointLabelComponent || item.dataPointLabelComponent;
+      } else {
+        dataPointsShape = item.dataPointShape || dataPtsShape;
+        dataPointsWidth = item.dataPointWidth || dataPtsWidth;
+        dataPointsHeight = item.dataPointHeight || dataPtsHeight;
+        dataPointsColor = item.dataPointColor || dataPtsColor;
+        dataPointsRadius = item.dataPointRadius || dataPtsRadius;
+        if (showTextOnPress) {
+          text = '';
+        }
+        customDataPoint = item.customDataPoint || props.customDataPoint;
+        dataPointLabelComponent = item.dataPointLabelComponent;
+      }
+
+      const currentStripHeight =
+        item.stripHeight === 0 ? 0 : item.stripHeight || stripHeight;
+      const currentStripWidth =
+        item.stripWidth === 0 ? 0 : item.stripWidth || stripWidth;
+      const currentStripOpacity =
+        item.stripOpacity === 0 ? 0 : item.stripOpacity || stripOpacity;
+      const currentStripColor = item.stripColor || stripColor;
+
+      return (
+        <Fragment key={index}>
+          {pressEnabled ? (
+            <>
+              {unFocusOnPressOut ? (
+                <Rect
+                  onPressIn={() => onStripPress(item, index)}
+                  onPressOut={() =>
+                    setTimeout(() => setSelectedIndex(-1), delayBeforeUnFocus)
+                  }
+                  x={initialSpacing + (spacing * index - spacing / 2)}
+                  y={8}
+                  width={spacing}
+                  height={containerHeight - 0}
+                  fill={'none'}
+                />
+              ) : (
+                <Rect
+                  onPress={() => onStripPress(item, index)}
+                  x={initialSpacing + (spacing * index - spacing / 2)}
+                  y={8}
+                  width={spacing}
+                  height={containerHeight - 0}
+                  fill={'none'}
+                />
+              )}
+            </>
+          ) : null}
+          {item.showStrip ||
+          (pressEnabled && index === selectedIndex && showStripOnPress) ? (
             <Rect
-              x={initialSpacing - dataPointsWidth + spacing * index}
+              x={initialSpacing + (spacing * index - dataPointsWidth / 2)}
               y={
-                containerHeight -
-                dataPointsHeight / 2 +
-                10 -
-                (item.value * containerHeight) / maxValue
+                currentStripHeight
+                  ? containerHeight - currentStripHeight + 8
+                  : containerHeight -
+                    dataPointsHeight / 2 +
+                    20 -
+                    (item.value * containerHeight) / maxValue
               }
-              width={dataPointsWidth}
-              height={dataPointsHeight}
-              fill={dataPointsColor}
+              width={currentStripWidth}
+              height={
+                currentStripHeight ||
+                containerHeight - dataPointsHeight / 2 + 20
+              }
+              opacity={currentStripOpacity}
+              fill={currentStripColor}
             />
-            {item.dataPointText && (
+          ) : null}
+          {customDataPoint ? (
+            <View
+              style={[
+                styles.customDataPointContainer,
+                {
+                  height: dataPointsHeight,
+                  width: dataPointsWidth,
+                  top:
+                    containerHeight - (item.value * containerHeight) / maxValue,
+                  left: initialSpacing - dataPointsWidth + spacing * index,
+                },
+              ]}>
+              {customDataPoint()}
+            </View>
+          ) : null}
+          {dataPointsShape === 'rectangular' ? (
+            <Fragment key={index}>
+              {customDataPoint ? null : (
+                <Rect
+                  x={initialSpacing - dataPointsWidth + spacing * index}
+                  y={
+                    containerHeight -
+                    dataPointsHeight / 2 +
+                    10 -
+                    (item.value * containerHeight) / maxValue
+                  }
+                  width={dataPointsWidth}
+                  height={dataPointsHeight}
+                  fill={
+                    showDataPointOnPress
+                      ? index === selectedIndex
+                        ? dataPointsColor
+                        : 'none'
+                      : dataPointsColor
+                  }
+                />
+              )}
+            </Fragment>
+          ) : (
+            <Fragment key={index}>
+              {customDataPoint ? null : (
+                <Circle
+                  cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
+                  cy={
+                    containerHeight +
+                    10 -
+                    (item.value * containerHeight) / maxValue
+                  }
+                  r={dataPointsRadius}
+                  fill={
+                    showDataPointOnPress
+                      ? index === selectedIndex
+                        ? dataPointsColor
+                        : 'none'
+                      : dataPointsColor
+                  }
+                />
+              )}
+            </Fragment>
+          )}
+          {dataPointLabelComponent ? (
+            !showTextOnPress || index === selectedIndex ? (
+              <View
+                style={[
+                  styles.customDataPointContainer,
+                  {
+                    top:
+                      containerHeight +
+                      (item.dataPointLabelShiftY ||
+                        props.dataPointLabelShiftY ||
+                        0) -
+                      (item.value * containerHeight) / maxValue,
+                    left:
+                      initialSpacing +
+                      (item.dataPointLabelShiftX ||
+                        props.dataPointLabelShiftX ||
+                        0) -
+                      (item.dataPointLabelWidth
+                        ? item.dataPointLabelWidth + 20
+                        : props.dataPointLabelWidth
+                        ? props.dataPointLabelWidth + 20
+                        : 50) /
+                        2 +
+                      spacing * index,
+                  },
+                ]}>
+                {dataPointLabelComponent()}
+              </View>
+            ) : null
+          ) : text ? (
+            !showTextOnPress || index === selectedIndex ? (
               <CanvasText
                 fill={item.textColor || textColor}
                 fontSize={item.textFontSize || textFontSize}
@@ -1121,7 +1398,7 @@ export const LineChart = (props: propTypes) => {
                   initialSpacing -
                   dataPointsWidth +
                   spacing * index +
-                  (item.textShiftX || props.textShiftX || props.textShiftX || 0)
+                  (item.textShiftX || props.textShiftX || 0)
                 }
                 y={
                   containerHeight -
@@ -1130,42 +1407,10 @@ export const LineChart = (props: propTypes) => {
                   (item.value * containerHeight) / maxValue +
                   (item.textShiftY || props.textShiftY || 0)
                 }>
-                {item.dataPointText}
+                {text}
               </CanvasText>
-            )}
-          </Fragment>
-        );
-      }
-      return (
-        <Fragment key={index}>
-          <Circle
-            cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
-            cy={
-              containerHeight + 10 - (item.value * containerHeight) / maxValue
-            }
-            r={dataPointsRadius}
-            fill={dataPointsColor}
-          />
-          {item.dataPointText && (
-            <CanvasText
-              fill={item.textColor || textColor}
-              fontSize={item.textFontSize || textFontSize}
-              x={
-                initialSpacing -
-                dataPointsWidth +
-                spacing * index +
-                (item.textShiftX || props.textShiftX || 0)
-              }
-              y={
-                containerHeight -
-                dataPointsHeight / 2 +
-                10 -
-                (item.value * containerHeight) / maxValue +
-                (item.textShiftY || props.textShiftY || 0)
-              }>
-              {item.dataPointText}
-            </CanvasText>
-          )}
+            ) : null
+          ) : null}
         </Fragment>
       );
     });
@@ -1267,7 +1512,7 @@ export const LineChart = (props: propTypes) => {
                 textColor1,
                 textFontSize1,
               )
-            : renderSpecificDataPoints(data)}
+            : null}
           {!hideDataPoints2
             ? renderDataPoints(
                 data2,
@@ -1279,7 +1524,7 @@ export const LineChart = (props: propTypes) => {
                 textColor2,
                 textFontSize2,
               )
-            : renderSpecificDataPoints(data2)}
+            : null}
           {!hideDataPoints3
             ? renderDataPoints(
                 data3,
@@ -1291,7 +1536,7 @@ export const LineChart = (props: propTypes) => {
                 textColor3,
                 textFontSize3,
               )
-            : renderSpecificDataPoints(data3)}
+            : null}
         </Svg>
       </View>
     );
@@ -1374,7 +1619,7 @@ export const LineChart = (props: propTypes) => {
                 textColor1,
                 textFontSize1,
               )
-            : renderSpecificDataPoints(data)}
+            : null}
           {!hideDataPoints2
             ? renderDataPoints(
                 data2,
@@ -1386,7 +1631,7 @@ export const LineChart = (props: propTypes) => {
                 textColor2,
                 textFontSize2,
               )
-            : renderSpecificDataPoints(data2)}
+            : null}
           {!hideDataPoints3
             ? renderDataPoints(
                 data3,
@@ -1398,7 +1643,7 @@ export const LineChart = (props: propTypes) => {
                 textColor3,
                 textFontSize3,
               )
-            : renderSpecificDataPoints(data3)}
+            : null}
         </Svg>
       </Animated.View>
     );
@@ -1543,8 +1788,18 @@ export const LineChart = (props: propTypes) => {
           return (
             <View key={index}>
               {isAnimated
-                ? renderAnimatedLabel(index, item.label, item.labelTextStyle)
-                : renderLabel(index, item.label, item.labelTextStyle)}
+                ? renderAnimatedLabel(
+                    index,
+                    item.label,
+                    item.labelTextStyle,
+                    item.labelComponent,
+                  )
+                : renderLabel(
+                    index,
+                    item.label,
+                    item.labelTextStyle,
+                    item.labelComponent,
+                  )}
               {/* {renderLabel(index, item.label, item.labelTextStyle)} */}
             </View>
           );

package/src/LineChart/styles.tsx

@@ -39,4 +39,9 @@ export const styles = StyleSheet.create({
   bottomLabel: {
     width: '100%',
   },
+  customDataPointContainer: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });