react-native-gifted-charts 1.4.6 → 1.4.8

package/README.md

@@ -15,12 +15,14 @@ The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Popul
 7. Detailed [documentation](https://gifted-charts.web.app/) with examples
 8. Support for **_combined_** Bar and Line charts
 
-## [Release notes 🎉](release-notes/release-notes.md)
+## 📣 Announcement
+
+The web counterpart of this library is public now. Try out our new reactJS library- [react-gifted-charts](https://github.com/Abhinandan-Kushwaha/react-gifted-charts) <br />
+The exact same piece of code that you write to render charts in react-native, can be used to render charts in reactJS using this library!
 
-**Alert:**
 
-This library doesn't support web apps yet. Use this library if you are planning mobile first.</br>
-However, we are planning to add support for web which will be available soon.
+## [Release notes 🎉](release-notes/release-notes.md)
+
 
 <img src='/demos/bars.png' alt=''/>
 <img src='/demos/lineArea.png' alt=''/>
@@ -45,17 +47,19 @@ However, we are planning to add support for web which will be available soon.
 
 ## Installation
 
+### React Native CLI
+
 ```sh
 npm install react-native-gifted-charts react-native-linear-gradient react-native-svg
 ```
 
-For iOS-
+### Expo
 
 ```sh
-cd ios && pod install
+npx expo install react-native-gifted-charts expo-linear-gradient react-native-svg
 ```
 
-Please note that `react-native-svg` and `react-native-linear-gradient` are needed for the library to work, so make sure they are installed in your project.
+Please note that `react-native-svg` and `react-native-linear-gradient`/`expo-linear-gradient` are needed for the library to work, so make sure they are installed in your project.
 
 # Docs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -24,7 +24,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.0.18"
+    "gifted-charts-core": "^0.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
@@ -51,8 +51,17 @@
     "react": "*",
     "react-native": "*",
     "react-native-linear-gradient": "*",
+    "expo-linear-gradient": "*",
     "react-native-svg": "*"
   },
+  "peerDependenciesMeta": {
+    "react-native-linear-gradient": {
+      "optional": true
+    },
+    "expo-linear-gradient": {
+      "optional": true
+    }
+  },
   "keywords": [
     "chart",
     "charts",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -1,8 +1,8 @@
 import React, {useEffect, useState} from 'react';
 import {View, LayoutAnimation, Platform, UIManager, Text} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import Cap from '../Components/BarSpecificComponents/cap';
+import LinearGradient from "../Components/common/LinearGradient";
 import {Animated2DWithGradientPropsType} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
@@ -32,6 +32,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
     topLabelTextStyle,
     commonStyleForBar,
     barStyleWithBackground,
+    yAxisOffset,
   } = props;
   const [height, setHeight] = useState(noAnimation ? props.height : 0.2);
   const [initialRender, setInitialRender] = useState(
@@ -72,16 +73,12 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
         <View
           style={{
             position: 'absolute',
-            bottom: 0,
+            bottom: -0.5,
             width: '100%',
             overflow: 'hidden',
             height:
               (noAnimation
-                ? Math.max(
-                    props.minHeight,
-                    (Math.abs(item.value) * (containerHeight || 200)) /
-                      (maxValue || 200),
-                  )
+                ? Math.max(props.minHeight, Math.abs(height))
                 : height) - (barMarginBottom || 0),
           }}>
           <View
@@ -90,11 +87,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
                 width: '100%',
                 height:
                   (noAnimation
-                    ? Math.max(
-                        props.minHeight,
-                        (Math.abs(item.value) * (containerHeight || 200)) /
-                          (maxValue || 200),
-                      )
+                    ? Math.max(props.minHeight, Math.abs(height))
                     : height) - (barMarginBottom || 0),
               },
               item.barStyle || barStyle,
@@ -157,12 +150,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
                   x="1"
                   y="1"
                   width={item.barWidth || props.barWidth || 30}
-                  height={
-                    noAnimation
-                      ? (Math.abs(item.value) * (containerHeight || 200)) /
-                        (maxValue || 200)
-                      : height
-                  }
+                  height={noAnimation ? Math.abs(height) : height}
                   fill={`url(#${item.patternId || patternId})`}
                 />
               </Svg>
@@ -196,7 +184,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
             topLabelContainerStyle ?? item.topLabelContainerStyle,
           ]}>
           {showValuesAsTopLabel ? (
-            <Text style={topLabelTextStyle}>{item.value}</Text>
+            <Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
           ) : (
             item.topLabelComponent?.()
           )}

package/src/BarChart/RenderBars.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import {View, TouchableOpacity, Animated, Text} from 'react-native';
 import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
-import LinearGradient from 'react-native-linear-gradient';
 import Animated2DWithGradient from './Animated2DWithGradient';
 import Cap from '../Components/BarSpecificComponents/cap';
 import BarBackgroundPattern from '../Components/BarSpecificComponents/barBackgroundPattern';
+import LinearGradient from "../Components/common/LinearGradient";
 import {
   getPropsForAnimated2DWithGradient,
   RenderBarsPropsType,
   barDataItem,
+  AxesAndRulesDefaults,
 } from 'gifted-charts-core';
 
 const RenderBars = (props: RenderBarsPropsType) => {
@@ -40,7 +41,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
     initialSpacing,
     selectedIndex,
     setSelectedIndex,
-    xAxisThickness,
+    xAxisThickness = AxesAndRulesDefaults.xAxisThickness,
     horizontal,
     rtl,
     intactTopLabel,
@@ -49,12 +50,13 @@ const RenderBars = (props: RenderBarsPropsType) => {
     topLabelTextStyle,
     pointerConfig,
     noOfSectionsBelowXAxis,
+    yAxisOffset,
   } = props;
 
   const barHeight = Math.max(
     minHeight,
     (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200) -
-      (xAxisThickness ?? 0),
+      xAxisThickness,
   );
 
   const {
@@ -128,7 +130,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
           <Text
             style={[
               {textAlign: 'center'},
-              rtl && {transform: [{rotate: '180deg'}]},
+              rtl && horizontal && {transform: [{rotate: '180deg'}]},
               labelTextStyle,
             ]}
             numberOfLines={xAxisTextNumberOfLines}>
@@ -190,7 +192,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
           <Text
             style={[
               {textAlign: 'center'},
-              rtl && {transform: [{rotate: '180deg'}]},
+              rtl && horizontal && {transform: [{rotate: '180deg'}]},
               labelTextStyle,
             ]}
             numberOfLines={xAxisTextNumberOfLines}>
@@ -262,7 +264,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               topLabelContainerStyle ?? item.topLabelContainerStyle,
             ]}>
             {showValuesAsTopLabel ? (
-              <Text style={topLabelTextStyle}>{item.value}</Text>
+              <Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
             ) : (
               item.topLabelComponent?.()
             )}
@@ -280,7 +282,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
   const barWrapperStyle = [
     {
       // overflow: 'visible',
-      marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift,
+      marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift - 0.5,
       width: commonPropsFor2Dand3Dbars.barWidth,
       height: barHeight,
       marginRight: spacing,

package/src/BarChart/RenderStackBars.tsx

@@ -7,8 +7,8 @@ import {
   Platform,
   UIManager,
 } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
+import LinearGradient from "../Components/common/LinearGradient";
 import {
   useRenderStackBars,
   BarDefaults,

package/src/BarChart/index.tsx

@@ -3,9 +3,10 @@ import {Animated, Easing, View} from 'react-native';
 import RenderBars from './RenderBars';
 import RenderStackBars from './RenderStackBars';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
-import {BarChartPropsType, useBarChart, screenWidth} from 'gifted-charts-core';
+import {BarChartPropsType, useBarChart} from 'gifted-charts-core';
 import {StripAndLabel} from '../Components/common/StripAndLabel';
 import {Pointer} from '../Components/common/Pointer';
+import {screenWidth} from '../utils';
 
 export const BarChart = (props: BarChartPropsType) => {
   const heightValue = useMemo(() => new Animated.Value(0), []);

package/src/Components/AnimatedThreeDBar/index.tsx

@@ -7,9 +7,9 @@ import {
   UIManager,
   Text,
 } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {styles} from './styles';
+import LinearGradient from "../common/LinearGradient";
 import {
   useAnimatedThreeDBar,
   animatedBarPropTypes,
@@ -49,8 +49,9 @@ const triangleStyles = StyleSheet.create({
 });
 
 const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
+  const heightCopy = props.height;
   const [height, setHeight] = useState(
-    props.isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : props.height,
+    props.isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : heightCopy,
   );
 
   const {
@@ -134,7 +135,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
                 <View
                   style={{
                     width: barWidth,
-                    height: barWidth * 0.4,
+                    height: barWidth,
                     // left: width / 2,
                     backgroundColor: topColor,
                     opacity: opacity,
@@ -145,7 +146,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
                 style={{
                   position: 'absolute',
                   top: sideWidth / -2,
-                  left: barWidth,
+                  left: barWidth - 1,
                 }}>
                 <TriangleCorner
                   color={topColor}
@@ -158,7 +159,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
 
           {/*******************************************************************/}
 
-          <View style={{marginTop: sideWidth / -2}}>
+          <View style={{marginTop: sideWidth / -2 - 1}}>
             <TriangleCorner
               color={height ? sideColor : 'transparent'}
               width={sideWidth}
@@ -166,7 +167,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
             />
             <View
               style={{
-                width: sideWidth / 2,
+                width: sideWidth / 2 + 1,
                 height: height - sideWidth / 2, //animatedSideHeight
                 backgroundColor: sideColor,
                 opacity: opacity,
@@ -174,7 +175,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
             />
             <TriangleCorner
               color={height ? sideColor : 'transparent'}
-              width={sideWidth}
+              width={sideWidth + 1}
               style={{transform: [{rotate: '90deg'}], opacity: opacity}}
             />
           </View>

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -1,5 +1,5 @@
 import React, {Fragment, useEffect} from 'react';
-import {View, ScrollView, StyleSheet} from 'react-native';
+import {View, ScrollView, StyleSheet, I18nManager} from 'react-native';
 import {renderHorizSections} from './renderHorizSections';
 import RenderLineInBarChart from './renderLineInBarChart';
 import RenderVerticalLines from './renderVerticalLines';
@@ -77,7 +77,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     verticalLinesProps,
     lineInBarChartProps,
     lineInBarChartProps2,
-  } = useBarAndLineChartsWrapper(props);
+  } = useBarAndLineChartsWrapper({...props, isRTL:I18nManager.isRTL});
 
   useEffect(() => {
     if (pointerConfig && getPointerProps) {

package/src/Components/common/LinearGradient.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {ViewStyle} from "react-native";
+
+type LinearGradientProps = {
+  style?: ViewStyle;
+  start?: { x: number, y: number };
+  end?: { x: number, y: number };
+  colors: string[];
+}
+
+let LinearGradient: React.FC<LinearGradientProps>;
+
+try {
+  // for bare react-native projects
+  LinearGradient = require('react-native-linear-gradient').LinearGradient;
+} catch (e) {
+  try {
+    // for expo-based projects
+    LinearGradient = require('expo-linear-gradient').LinearGradient;
+  } catch (e) {
+    throw new Error(
+      'Gradient package was not found. Make sure "react-native-linear-gradient" or "expo-linear-gradient" is installed'
+    );
+  }
+}
+
+export default LinearGradient;

package/src/Components/common/StripAndLabel.tsx

@@ -31,7 +31,7 @@ export const StripAndLabel = props => {
     <View
       style={{
         position: 'absolute',
-        left: pointerX + (pointerItemLocal[0].pointerShiftX || 0),
+        left: pointerX + (pointerItemLocal[0]?.pointerShiftX || 0),
         top: pointerYLocal,
       }}>
       {(

package/src/LineChart/LineChartBicolor.tsx

@@ -18,8 +18,9 @@ import {
 
 export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
   const scrollRef = useRef();
-  const opacValue = useMemo(() => new Animated.Value(0), []);
+  // const heightValue = useMemo(() => new Animated.Value(0), []);
   const widthValue = useMemo(() => new Animated.Value(0), []);
+  const opacValue = useMemo(() => new Animated.Value(0), []);
 
   const {
     pointsArray,

package/src/LineChart/index.tsx

@@ -10,6 +10,7 @@ import {
   I18nManager,
 } from 'react-native';
 import {styles} from './styles';
+import {screenWidth} from '../utils';
 import Svg, {
   Path,
   LinearGradient,
@@ -31,23 +32,31 @@ import {
   lineDataItem,
   LineSvgProps,
   useLineChart,
+  adjustToOffset,
+  LineProperties,
 } from 'gifted-charts-core';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
 import {StripAndLabel} from '../Components/common/StripAndLabel';
 import {Pointer} from '../Components/common/Pointer';
 
 let initialData: Array<lineDataItem> | null = null;
-let animations: Array<any> = [];
+let animations: Array<Animated.Value> = [];
 
 export const LineChart = (props: LineChartPropsType) => {
   const scrollRef = props.scrollRef ?? useRef(null);
   const opacValue = useMemo(() => new Animated.Value(0), []);
+  const heightValue = useMemo(() => new Animated.Value(0), []);
   const widthValue = useMemo(() => new Animated.Value(0), []);
   const widthValue2 = useMemo(() => new Animated.Value(0), []);
   const widthValue3 = useMemo(() => new Animated.Value(0), []);
   const widthValue4 = useMemo(() => new Animated.Value(0), []);
   const widthValue5 = useMemo(() => new Animated.Value(0), []);
 
+  if (!initialData) {
+    initialData = props.dataSet?.[0]?.data ?? props.data ?? [];
+    animations = initialData.map(item => new Animated.Value(item.value));
+  }
+
   const {
     scrollX,
     setScrollX,
@@ -158,7 +167,7 @@ export const LineChart = (props: LineChartPropsType) => {
     dataPointsRadius5,
     dataPointsColor5,
     dataPointsShape5,
-    atLeastOneAreaChart,
+    getIsNthAreaChart,
     textFontSize1,
     textFontSize2,
     textFontSize3,
@@ -293,12 +302,7 @@ export const LineChart = (props: LineChartPropsType) => {
     lineGradientStartColor,
     lineGradientEndColor,
     barAndLineChartsWrapperProps,
-  } = useLineChart({...props, animations});
-
-  if (!initialData) {
-    initialData = data0 ?? [...data];
-    animations = initialData?.map(item => new Animated.Value(item.value));
-  }
+  } = useLineChart({...props, animations, screenWidth});
 
   const widthValuesFromSet = useMemo(
     () => dataSet?.map(set => new Animated.Value(0)),
@@ -889,7 +893,7 @@ export const LineChart = (props: LineChartPropsType) => {
 
     return Pointer({
       pointerX,
-      pointerYLocal,
+      pointerYLocal: pointerYLocal + xAxisThickness,
       pointerComponent,
       pointerHeight,
       pointerRadius,
@@ -1013,17 +1017,19 @@ export const LineChart = (props: LineChartPropsType) => {
     arrowStrokeWidth,
     arrowStrokeColor,
     arrowFillColor,
+    key,
   ) => {
     if (!points) return null;
     const isCurved = points.includes('C');
-    let ar: [any] = [{}];
+    const isNthAreaChart = getIsNthAreaChart(key ?? 0);
+    let ar: LineProperties[] = [{d: '', color: '', strokeWidth: 0}];
     if (points.includes(RANGE_ENTER)) {
       ar = getRegionPathObjects(
         points,
         color,
-        currentLineThickness,
+        currentLineThickness ?? 0,
         thickness,
-        strokeDashArray,
+        strokeDashArray ?? [],
         isCurved,
         RANGE_ENTER,
         STOP,
@@ -1033,9 +1039,9 @@ export const LineChart = (props: LineChartPropsType) => {
       ar = getSegmentedPathObjects(
         points,
         color,
-        currentLineThickness,
+        currentLineThickness ?? 0,
         thickness,
-        strokeDashArray,
+        strokeDashArray ?? [],
         isCurved,
         SEGMENT_START,
         SEGMENT_END,
@@ -1090,14 +1096,14 @@ export const LineChart = (props: LineChartPropsType) => {
 
         {/***********************      For Area Chart        ************/}
 
-        {atLeastOneAreaChart &&
+        {isNthAreaChart &&
           getAreaGradientComponent(
             startFillColor,
             endFillColor,
             startOpacity,
             endOpacity,
           )}
-        {atLeastOneAreaChart && (
+        {isNthAreaChart && (
           <Path
             d={fillPoints}
             fill={
@@ -1120,14 +1126,10 @@ export const LineChart = (props: LineChartPropsType) => {
 
         {dataSet?.map(set => renderSpecificVerticalLines(set?.data)) ?? null}
         {dataSet?.map(set => {
-          const setData = set.data.map(item => {
-            item.value = item.value - (props.yAxisOffset ?? 0);
-            return item;
-          });
           return renderDataPoints(
             set.hideDataPoints ?? hideDataPoints1,
-            setData,
             set.data,
+            adjustToOffset(set.data, -(props.yAxisOffset ?? 0)), // need the actual values passed by user
             set.dataPointsShape ?? dataPointsShape1,
             set.dataPointsWidth ?? dataPointsWidth1,
             set.dataPointsHeight ?? dataPointsHeight1,
@@ -1253,6 +1255,89 @@ export const LineChart = (props: LineChartPropsType) => {
     );
   };
 
+  const activatePointers = x => {
+    let factor = (x - initialSpacing) / spacing;
+    factor = Math.round(factor);
+    factor = Math.min(factor, (data0 ?? data).length - 1);
+    factor = Math.max(factor, 0);
+    let z =
+      initialSpacing +
+      spacing * factor -
+      (pointerRadius || pointerWidth / 2) -
+      1;
+    setPointerX(z);
+    setPointerIndex(factor);
+    let item, y;
+    item = (data0 ?? data)[factor];
+    y =
+      containerHeight -
+      (item.value * containerHeight) / maxValue -
+      (pointerRadius || pointerHeight / 2) +
+      10;
+    setPointerY(y);
+    setPointerItem(item);
+    if (data2 && data2.length) {
+      item = data2[factor];
+      if (item) {
+        y =
+          containerHeight -
+          (item.value * containerHeight) / maxValue -
+          (pointerRadius || pointerHeight / 2) +
+          10;
+        setPointerY2(y);
+        setPointerItem2(item);
+      }
+    }
+    if (data3 && data3.length) {
+      item = data3[factor];
+      if (item) {
+        y =
+          containerHeight -
+          (item.value * containerHeight) / maxValue -
+          (pointerRadius || pointerHeight / 2) +
+          10;
+        setPointerY3(y);
+        setPointerItem3(item);
+      }
+    }
+    if (data4 && data4.length) {
+      item = data4[factor];
+      if (item) {
+        y =
+          containerHeight -
+          (item.value * containerHeight) / maxValue -
+          (pointerRadius || pointerHeight / 2) +
+          10;
+        setPointerY4(y);
+        setPointerItem4(item);
+      }
+    }
+    if (data5 && data5.length) {
+      item = data5[factor];
+      if (item) {
+        y =
+          containerHeight -
+          (item.value * containerHeight) / maxValue -
+          (pointerRadius || pointerHeight / 2) +
+          10;
+        setPointerY5(y);
+        setPointerItem5(item);
+      }
+    }
+    if (secondaryData?.length) {
+      item = secondaryData[factor];
+      if (item) {
+        y =
+          containerHeight -
+          (item.value * containerHeight) / maxValue -
+          (pointerRadius || pointerHeight / 2) +
+          10;
+        setSecondaryPointerY(y);
+        setSecondaryPointerItem(item);
+      }
+    }
+  };
+
   const renderLine = (
     zIndex: number,
     points: any,
@@ -1274,7 +1359,6 @@ export const LineChart = (props: LineChartPropsType) => {
     return (
       <View
         key={key ?? 0}
-        onStartShouldSetResponder={evt => (pointerConfig ? true : false)}
         onMoveShouldSetResponder={evt => (pointerConfig ? true : false)}
         onResponderGrant={evt => {
           if (!pointerConfig) return;
@@ -1283,91 +1367,7 @@ export const LineChart = (props: LineChartPropsType) => {
             return;
           }
           let x = evt.nativeEvent.locationX;
-          if (
-            !activatePointersOnLongPress &&
-            x > (props.width || Dimensions.get('window').width)
-          )
-            return;
-          let factor = (x - initialSpacing) / spacing;
-          factor = Math.round(factor);
-          factor = Math.min(factor, (data0 ?? data).length - 1);
-          factor = Math.max(factor, 0);
-          let z =
-            initialSpacing +
-            spacing * factor -
-            (pointerRadius || pointerWidth / 2) -
-            1;
-          setPointerX(z);
-          setPointerIndex(factor);
-          let item, y;
-          item = (data0 ?? data)[factor];
-          y =
-            containerHeight -
-            (item.value * containerHeight) / maxValue -
-            (pointerRadius || pointerHeight / 2) +
-            10;
-          setPointerY(y);
-          setPointerItem(item);
-          if (data2 && data2.length) {
-            item = data2[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setPointerY2(y);
-              setPointerItem2(item);
-            }
-          }
-          if (data3 && data3.length) {
-            item = data3[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setPointerY3(y);
-              setPointerItem3(item);
-            }
-          }
-          if (data4 && data4.length) {
-            item = data4[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setPointerY4(y);
-              setPointerItem4(item);
-            }
-          }
-          if (data5 && data5.length) {
-            item = data5[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setPointerY5(y);
-              setPointerItem5(item);
-            }
-          }
-          if (secondaryData?.length) {
-            item = secondaryData[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setSecondaryPointerY(y);
-              setSecondaryPointerItem(item);
-            }
-          }
+          activatePointers(x);
         }}
         onResponderMove={evt => {
           if (!pointerConfig) return;
@@ -1495,6 +1495,7 @@ export const LineChart = (props: LineChartPropsType) => {
             60 +
             xAxisLabelsVerticalShift +
             labelsExtraHeight -
+            xAxisThickness -
             (props.overflowBottom ?? dataPointsRadius1),
           zIndex: zIndex,
           transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],
@@ -1515,6 +1516,7 @@ export const LineChart = (props: LineChartPropsType) => {
           arrowStrokeWidth,
           arrowStrokeColor,
           arrowFillColor,
+          key,
         )}
       </View>
     );
@@ -1551,91 +1553,7 @@ export const LineChart = (props: LineChartPropsType) => {
             return;
           }
           let x = evt.nativeEvent.locationX;
-          if (
-            !activatePointersOnLongPress &&
-            x > (props.width || Dimensions.get('window').width)
-          )
-            return;
-          let factor = (x - initialSpacing) / spacing;
-          factor = Math.round(factor);
-          factor = Math.min(factor, (data0 ?? data).length - 1);
-          factor = Math.max(factor, 0);
-          let z =
-            initialSpacing +
-            spacing * factor -
-            (pointerRadius || pointerWidth / 2) -
-            1;
-          setPointerX(z);
-          setPointerIndex(factor);
-          let item, y;
-          item = (data0 ?? data)[factor];
-          y =
-            containerHeight -
-            (item.value * containerHeight) / maxValue -
-            (pointerRadius || pointerHeight / 2) +
-            10;
-          setPointerY(y);
-          setPointerItem(item);
-          if (data2 && data2.length) {
-            item = data2[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setPointerY2(y);
-              setPointerItem2(item);
-            }
-          }
-          if (data3 && data3.length) {
-            item = data3[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setPointerY3(y);
-              setPointerItem3(item);
-            }
-          }
-          if (data4 && data4.length) {
-            item = data4[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setPointerY4(y);
-              setPointerItem4(item);
-            }
-          }
-          if (data5 && data5.length) {
-            item = data5[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setPointerY5(y);
-              setPointerItem5(item);
-            }
-          }
-          if (secondaryData?.length) {
-            item = secondaryData[factor];
-            if (item) {
-              y =
-                containerHeight -
-                (item.value * containerHeight) / maxValue -
-                (pointerRadius || pointerHeight / 2) +
-                10;
-              setSecondaryPointerY(y);
-              setSecondaryPointerItem(item);
-            }
-          }
+          activatePointers(x);
         }}
         onResponderMove={evt => {
           if (!pointerConfig) return;
@@ -1763,6 +1681,7 @@ export const LineChart = (props: LineChartPropsType) => {
             60 +
             xAxisLabelsVerticalShift +
             labelsExtraHeight -
+            xAxisThickness -
             (props.overflowBottom ?? dataPointsRadius1),
           zIndex: zIndex,
           transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],
@@ -1783,6 +1702,7 @@ export const LineChart = (props: LineChartPropsType) => {
           arrowStrokeWidth,
           arrowStrokeColor,
           arrowFillColor,
+          key,
         )}
       </Animated.View>
     );
@@ -1822,9 +1742,9 @@ export const LineChart = (props: LineChartPropsType) => {
                     set.strokeDashArray ?? strokeDashArray1,
                     set.showArrow || props.showArrows,
                     arrowPointsFromSet[index],
-                    arrowStrokeWidthsFromSet[index],
-                    arrowStrokeColorsFromSet[index],
-                    arrowFillColorsFromSet[index],
+                    arrowStrokeWidthsFromSet?.[index],
+                    arrowStrokeColorsFromSet?.[index],
+                    arrowFillColorsFromSet?.[index],
                     index,
                   );
                 } else {
@@ -1841,9 +1761,9 @@ export const LineChart = (props: LineChartPropsType) => {
                     set.strokeDashArray ?? strokeDashArray1,
                     set.showArrow || props.showArrows,
                     arrowPointsFromSet[index],
-                    arrowStrokeWidthsFromSet[index],
-                    arrowStrokeColorsFromSet[index],
-                    arrowFillColorsFromSet[index],
+                    arrowStrokeWidthsFromSet?.[index],
+                    arrowStrokeColorsFromSet?.[index],
+                    arrowFillColorsFromSet?.[index],
                     index,
                   );
                 }

package/src/PieChart/index.tsx

@@ -156,7 +156,10 @@ export const PieChart = (props: PieChartPropsType) => {
             />
           </View>
         )}
-      {renderInnerCircle(innerRadius - inwardExtraLengthForFocused, 0)}
+      {renderInnerCircle(
+        innerRadius - inwardExtraLengthForFocused,
+        inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth,
+      )}
     </View>
   );
 };

package/src/PieChart/main.tsx

@@ -13,8 +13,8 @@ import {
   getPieChartMainProps,
   PieChartMainProps,
   pieColors,
-  rnVersion,
 } from 'gifted-charts-core';
+import { rnVersion } from '../utils';
 
 export const PieChartMain = (props: PieChartMainProps) => {
   const {

package/src/PieChartPro/index.tsx

@@ -0,0 +1,216 @@
+import React, {useEffect} from 'react';
+import {PieChartPropsType, pieColors, usePiePro} from 'gifted-charts-core';
+import {
+  Defs,
+  Path,
+  Stop,
+  Svg,
+  Text as SvgText,
+  RadialGradient,
+} from 'react-native-svg';
+import {Animated} from 'react-native';
+
+export const PieChartPro = (props: PieChartPropsType) => {
+  const {
+    radius,
+    total,
+    donut,
+    strokeWidth,
+    animationDuration,
+    initial,
+    dInitial,
+    dFinal,
+    getStartCaps,
+    getEndCaps,
+    getTextCoordinates,
+  } = usePiePro(props);
+
+  const {
+    data,
+    curvedStartEdges,
+    curvedEndEdges,
+    edgesRadius = 0,
+    showGradient,
+  } = props;
+
+  let {isAnimated} = props;
+
+  if (!props.semiCircle && data.some(dataItem => dataItem.value > total / 2)) {
+    // if we have an obtuse arc, we cant animate
+    isAnimated = false;
+  }
+
+  const AnimatedPath = Animated.createAnimatedComponent(Path);
+  const AnimatedText = Animated.createAnimatedComponent(SvgText);
+
+  const animatedValues = data.map(i => new Animated.Value(0));
+  const animatedOpacityValue = new Animated.Value(0);
+  const animatedPaths = data.map((item, index) =>
+    animatedValues[index]?.interpolate({
+      inputRange: [0, 1],
+      outputRange: [dInitial[index], dFinal[index]],
+    }),
+  );
+
+  const animatedOpacity = animatedOpacityValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
+  useEffect(() => {
+    Animated.timing(animatedOpacityValue, {
+      toValue: 1,
+      duration: 10,
+      useNativeDriver: true,
+      delay: animationDuration,
+    }).start();
+    animatedValues.forEach(animatedValue =>
+      Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: animationDuration,
+        useNativeDriver: true,
+      }).start(),
+    );
+  }, [data]);
+
+  return (
+    <Svg height={radius * 2 + strokeWidth} width={radius * 2 + strokeWidth}>
+      {total ? (
+        <>
+          <Defs>
+            {data.map((item, index) => {
+              return (
+                <RadialGradient
+                  key={index + ''}
+                  id={'grad' + index}
+                  cx="50%"
+                  cy="50%"
+                  rx="50%"
+                  ry="50%"
+                  fx="50%"
+                  fy="50%"
+                  gradientUnits="userSpaceOnUse">
+                  <Stop
+                    offset="0%"
+                    stopColor={item.gradientCenterColor}
+                    stopOpacity="1"
+                  />
+                  <Stop
+                    offset="100%"
+                    stopColor={item.color || pieColors[index % 9]}
+                    stopOpacity="1"
+                  />
+                </RadialGradient>
+              );
+            })}
+          </Defs>
+          {data.map((item, index) => {
+            const borderWidth = item.strokeWidth ?? strokeWidth;
+            const borderColor =
+              item.strokeColor ??
+              props.strokeColor ??
+              (borderWidth ? 'black' : 'transparent');
+            return (
+              <AnimatedPath
+                key={`path${index}`}
+                id="renderPath"
+                d={isAnimated ? animatedPaths[index] : dFinal[index]}
+                fill={
+                  showGradient
+                    ? `url(#grad${index})`
+                    : data[index].color || pieColors[index % 9]
+                }
+                strokeWidth={borderWidth}
+                stroke={borderColor}
+              />
+            );
+          })}
+
+          {donut
+            ? data.map((item, index) => {
+                if (
+                  curvedStartEdges ||
+                  edgesRadius ||
+                  item.isStartEdgeCurved ||
+                  item.startEdgeRadius
+                )
+                  return (
+                    <AnimatedPath
+                      key={`cap${index}`}
+                      d={`${initial} ${getStartCaps(index, item)}`}
+                      opacity={isAnimated ? animatedOpacity : 1}
+                      fill={
+                        showGradient
+                          ? `url(#grad${index})`
+                          : data[index].color || pieColors[index % 9]
+                      }
+                    />
+                  );
+                return null;
+              })
+            : null}
+
+          {donut
+            ? data.map((item, index) => {
+                if (
+                  curvedEndEdges ||
+                  edgesRadius ||
+                  item.isEndEdgeCurved ||
+                  item.endEdgeRadius
+                )
+                  return (
+                    <Path
+                      key={`cap${index}`}
+                      d={`${initial} ${getEndCaps(index, item)}`}
+                      fill={
+                        showGradient
+                          ? `url(#grad${index})`
+                          : data[index].color || pieColors[index % 9]
+                      }
+                    />
+                  );
+                return null;
+              })
+            : null}
+
+          {data.map((item, index) => {
+            const {x, y} = getTextCoordinates(index, item.labelPosition);
+
+            return (
+              <AnimatedText
+                key={`label${index}`}
+                // style={{ pointerEvents: 'all' }}
+                fill={
+                  item.textColor ||
+                  props.textColor ||
+                  pieColors[(index + 2) % 9]
+                }
+                opacity={isAnimated ? animatedOpacity : 1}
+                fontSize={item.textSize || props.textSize}
+                fontFamily={item.font || props.font}
+                fontWeight={item.fontWeight || props.fontWeight}
+                fontStyle={item.fontStyle || props.fontStyle || 'normal'}
+                x={
+                  x +
+                  (item.shiftTextX || 0) -
+                  (item.textSize ?? props.textSize ?? 0) / 1.8
+                }
+                y={y + (item.shiftTextY || 0)}
+                onPress={() => {
+                  item.onLabelPress
+                    ? item.onLabelPress()
+                    : props.onLabelPress
+                      ? props.onLabelPress(item, index)
+                      : item.onPress
+                        ? item.onPress()
+                        : props.onPress?.(item, index);
+                }}>
+                {item.text || (props.showValuesAsLabels ? item.value + '' : '')}
+              </AnimatedText>
+            );
+          })}
+        </>
+      ) : null}
+    </Svg>
+  );
+};

package/src/PopulationPyramid/index.tsx

@@ -14,6 +14,7 @@ import {
   Text as SvgText,
   Use,
 } from 'react-native-svg';
+import {screenWidth} from '../utils';
 
 export const PopulationPyramid = (props: PopulationPyramidPropsType) => {
   const {
@@ -105,7 +106,7 @@ export const PopulationPyramid = (props: PopulationPyramidPropsType) => {
     verticalLinesCommonProps,
     xAxisLabelsCommonProps,
     getXLabel,
-  } = usePopulationPyramid(props);
+  } = usePopulationPyramid({...props, screenWidth});
 
   return (
     <View style={{height: containerHeightWithXaxisLabels, width}}>

package/src/index.tsx

@@ -1,5 +1,6 @@
 export {BarChart} from './BarChart';
 export {PieChart} from './PieChart';
+export {PieChartPro} from './PieChartPro';
 export {LineChart} from './LineChart';
 export {LineChartBicolor} from './LineChart/LineChartBicolor';
 export {PopulationPyramid} from './PopulationPyramid';

package/src/utils/index.ts

@@ -0,0 +1,16 @@
+import {Dimensions} from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const versionString = require('react-native/package.json').version;
+
+const versionAr = versionString?.split?.('.') ?? '';
+const msb = Number(versionAr[0]);
+const mid = Number(versionAr[1]);
+const lsb = Number(versionAr[2]);
+
+export const rnVersion =
+  (!isNaN(msb) ? msb : 0) * 1000000 +
+  (!isNaN(mid) ? mid : 0) * 10000 +
+  (!isNaN(lsb) ? lsb : 0);
+
+export const screenWidth = Dimensions.get('window').width;