react-native-gifted-charts 1.4.63 → 1.4.65

package/README.md

@@ -28,7 +28,7 @@ The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Populati
 
 - Plenty of features with minimal code
 - Apply animations to your charts on load and on value change, just by adding a prop
-- Smooth animations implemented using LayoutAnimation
+- Smooth animations implemented using the `Animated` API (no external library used for animations)
 - Clickable and scrollable
 - Three-D and gradient effects
 - Fully customizable (see the [props](docs/docs.md))

package/dist/BarChart/Animated2DWithGradient.js

@@ -1,106 +1,66 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { View, LayoutAnimation, Platform, UIManager, Text } from 'react-native';
+import { useEffect, useRef } from 'react';
+import { View, Text, Animated } from 'react-native';
 import Svg, { Defs, Rect } from 'react-native-svg';
 import Cap from '../Components/BarSpecificComponents/cap';
 import LinearGradient from '../Components/common/LinearGradient';
-if (Platform.OS === 'android') {
-    UIManager.setLayoutAnimationEnabledExperimental &&
-        UIManager.setLayoutAnimationEnabledExperimental(true);
-}
 var Animated2DWithGradient = function (props) {
     var _a, _b;
-    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, bWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, barInnerComponent = props.barInnerComponent, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, commonStyleForBar = props.commonStyleForBar, barStyleWithBackground = props.barStyleWithBackground, yAxisOffset = props.yAxisOffset;
-    var _c = __read(useState(noAnimation ? props.height : 0.4), 2), height = _c[0], setHeight = _c[1]; // if animation fails, increase this constant value of 0.4
-    var _d = __read(useState(!noAnimation), 2), initialRender = _d[0], setInitialRender = _d[1];
-    var _e = __read(useState((_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth), 2), barWidth = _e[0], setBarWidth = _e[1]; // setting width in state for animation purpose
+    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, bWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, barInnerComponent = props.barInnerComponent, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, commonStyleForBar = props.commonStyleForBar, barStyleWithBackground = props.barStyleWithBackground, yAxisOffset = props.yAxisOffset, height = props.height;
+    var barWidth = (_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth; // setting width in state for animation purpose
+    var topLabelPosition = (item.barWidth || barWidth || 30) * -1;
+    var animatedHeight = useRef(new Animated.Value(0)).current; // initial height = 0
+    var animatedLabelHeight = useRef(new Animated.Value(height + topLabelPosition)).current;
+    var elevate = function () {
+        Animated.parallel([
+            Animated.timing(animatedHeight, {
+                toValue: height,
+                duration: animationDuration,
+                useNativeDriver: false,
+            }),
+            Animated.timing(animatedLabelHeight, {
+                toValue: topLabelPosition,
+                duration: animationDuration,
+                useNativeDriver: false,
+            }),
+        ]).start();
+    };
     useEffect(function () {
-        var _a;
         if (!noAnimation) {
-            if (initialRender) {
-                setTimeout(function () { return layoutAppear(); }, 20);
-            }
-            else {
-                elevate();
-            }
-        }
-        else {
-            setHeight(props.height);
-            setBarWidth((_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth);
+            elevate();
         }
-    }, [props.height, bWidth, item.barWidth]);
-    var elevate = function () {
-        var _a;
-        LayoutAnimation.configureNext({
-            duration: animationDuration,
-            update: { type: 'linear', property: 'scaleXY' },
-        });
-        setHeight(props.height);
-        setBarWidth((_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth);
-    };
-    var layoutAppear = function () {
-        LayoutAnimation.configureNext({
-            duration: Platform.OS == 'ios' ? animationDuration : 20,
-            create: { type: 'linear', property: 'opacity' },
-            update: { type: 'linear', property: 'scaleXY' },
-        });
-        setInitialRender(false);
-        setTimeout(function () { return elevate(); }, Platform.OS == 'ios' ? 10 : 100);
-    };
-    return (_jsxs(_Fragment, { children: [!initialRender && (_jsx(View, { style: {
-                    position: 'absolute',
-                    bottom: 0,
-                    width: barWidth,
-                    overflow: 'hidden',
-                    height: noAnimation
-                        ? Math.max(props.minHeight, Math.abs(height))
-                        : height,
-                }, children: _jsxs(View, { style: [
-                        {
-                            width: '100%',
-                            height: noAnimation
-                                ? Math.max(props.minHeight, Math.abs(height))
-                                : height,
-                        },
-                        item.barStyle || barStyle,
-                    ], children: [noGradient ? (_jsx(View, { style: barStyleWithBackground, children: props.cappedBars && item.value ? (_jsx(Cap, { capThicknessFromItem: item.capThickness, capThicknessFromProps: props.capThickness, capColorFromItem: item.capColor, capColorFromProps: props.capColor, capRadiusFromItem: item.capRadius, capRadiusFromProps: props.capRadius })) : null })) : (_jsx(LinearGradient, { style: commonStyleForBar, start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, colors: [
-                                item.gradientColor || props.gradientColor || 'white',
-                                item.frontColor || props.frontColor || 'black',
-                            ], children: props.cappedBars && (_jsx(View, { style: {
-                                    position: 'absolute',
-                                    width: '100%',
-                                    height: item.capThickness === 0
-                                        ? 0
-                                        : item.capThickness || props.capThickness || 6,
-                                    backgroundColor: item.capColor || props.capColor || 'black',
-                                    borderTopLeftRadius: item.capRadius === 0
-                                        ? 0
-                                        : item.capRadius || props.capRadius || 0,
-                                    borderTopRightRadius: item.capRadius === 0
-                                        ? 0
-                                        : item.capRadius || props.capRadius || 0,
-                                } })) })), (item.barBackgroundPattern || barBackgroundPattern) && (_jsxs(Svg, { children: [_jsx(Defs, { children: item.barBackgroundPattern
-                                        ? item.barBackgroundPattern()
-                                        : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "1", y: "1", width: item.barWidth || barWidth || 30, height: noAnimation ? Math.abs(height) : height, fill: "url(#".concat(item.patternId || patternId, ")") })] })), barInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }) })), item.topLabelComponent || showValuesAsTopLabel ? (_jsx(View, { style: [
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs(Animated.View, { style: [
+                    {
+                        position: 'absolute',
+                        bottom: 0,
+                        width: barWidth,
+                        overflow: 'hidden',
+                        height: noAnimation ? height : animatedHeight,
+                    },
+                    item.barStyle || barStyle,
+                ], children: [noGradient ? (_jsx(View, { style: barStyleWithBackground, children: props.cappedBars && item.value ? (_jsx(Cap, { capThicknessFromItem: item.capThickness, capThicknessFromProps: props.capThickness, capColorFromItem: item.capColor, capColorFromProps: props.capColor, capRadiusFromItem: item.capRadius, capRadiusFromProps: props.capRadius })) : null })) : (_jsx(LinearGradient, { style: commonStyleForBar, start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, colors: [
+                            item.gradientColor || props.gradientColor || 'white',
+                            item.frontColor || props.frontColor || 'black',
+                        ], children: props.cappedBars && (_jsx(View, { style: {
+                                position: 'absolute',
+                                width: '100%',
+                                height: item.capThickness === 0
+                                    ? 0
+                                    : item.capThickness || props.capThickness || 6,
+                                backgroundColor: item.capColor || props.capColor || 'black',
+                                borderTopLeftRadius: item.capRadius === 0
+                                    ? 0
+                                    : item.capRadius || props.capRadius || 0,
+                                borderTopRightRadius: item.capRadius === 0
+                                    ? 0
+                                    : item.capRadius || props.capRadius || 0,
+                            } })) })), (item.barBackgroundPattern || barBackgroundPattern) && (_jsxs(Svg, { children: [_jsx(Defs, { children: item.barBackgroundPattern
+                                    ? item.barBackgroundPattern()
+                                    : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "1", y: "1", width: item.barWidth || barWidth || 30, height: noAnimation ? Math.abs(height) : height, fill: "url(#".concat(item.patternId || patternId, ")") })] })), barInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }), item.topLabelComponent || showValuesAsTopLabel ? (_jsx(Animated.View, { style: [
                     {
                         position: 'absolute',
-                        top: (item.barWidth || barWidth || 30) * -1,
+                        top: noAnimation ? topLabelPosition : animatedLabelHeight,
                         height: item.barWidth || barWidth || 30,
                         width: item.barWidth || barWidth || 30,
                         justifyContent: (props.horizontal && !intactTopLabel) || item.value < 0

package/dist/BarChart/RenderBars.js

@@ -145,10 +145,10 @@ var RenderBars = function (props) {
     var barWrapperStyle = [
         {
             // overflow: 'visible',
-            opacity: highlightEnabled ?
-                isIndexSelected(highlightedBarIndex, -1)
-                    ? 1 :
-                    isIndexSelected(highlightedBarIndex, index)
+            opacity: highlightEnabled
+                ? isIndexSelected(highlightedBarIndex, -1)
+                    ? 1
+                    : isIndexSelected(highlightedBarIndex, index)
                         ? 1
                         : lowlightOpacity
                 : 1,
@@ -184,7 +184,7 @@ var RenderBars = function (props) {
                         backgroundColor: props.xAxisIndicesColor,
                     } })), isBarBelowXaxisAndInvisible ? null : isThreeD ? (_jsx(AnimatedThreeDBar, __assign({}, commonPropsFor2dAnd3dBars, { sideWidth: item.sideWidth ||
                         props.sideWidth ||
-                        (item.barWidth || barWidth) / 2, side: side || 'left', sideColor: item.sideColor || props.sideColor || '', topColor: item.topColor || props.topColor || '', horizontal: horizontal, isAnimated: isAnimated, animationDuration: animationDuration || 800, selectedIndex: selectedIndex }))) : item.showGradient || props.showGradient ? (isAnimated ? (animated2DWithGradient(false, false)) : (animated2DWithGradient(false, true))) : isAnimated ? (animated2DWithGradient(true, false)) : (animated2DWithGradient(true, true)), isAnimated
+                        (item.barWidth || barWidth) / 2, side: side || 'left', sideColor: item.sideColor || props.sideColor || '', topColor: item.topColor || props.topColor || '', horizontal: horizontal, isAnimated: isAnimated, animationDuration: animationDuration || 800, selectedIndex: selectedIndex, containerHeight: containerHeight || 200 }))) : item.showGradient || props.showGradient ? (isAnimated ? (animated2DWithGradient(false, false)) : (animated2DWithGradient(false, true))) : isAnimated ? (animated2DWithGradient(true, false)) : (animated2DWithGradient(true, true)), isAnimated
                     ? renderAnimatedLabel(false, label, labelTextStyle, item.value)
                     : renderLabel(false, label, labelTextStyle, item.value), secondaryXAxis
                     ? isAnimated

package/dist/BarChart/RenderStackBars.js

@@ -10,16 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { View, TouchableOpacity, Text, LayoutAnimation, Platform, UIManager, } from 'react-native';
+import { useEffect, useRef } from 'react';
+import { View, TouchableOpacity, Text, Animated } from 'react-native';
 import Svg, { Defs, Rect } from 'react-native-svg';
 import LinearGradient from '../Components/common/LinearGradient';
 import { useRenderStackBars, BarDefaults, } from 'gifted-charts-core';
 import Tooltip from '../Components/BarSpecificComponents/tooltip';
-if (Platform.OS === 'android') {
-    UIManager.setLayoutAnimationEnabledExperimental &&
-        UIManager.setLayoutAnimationEnabledExperimental(true);
-}
 var RenderStackBars = function (props) {
     var _a;
     var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, stackData = props.stackData, item = props.item, index = props.index, containerHeight = props.containerHeight, spacing = props.spacing, rotateLabel = props.rotateLabel, label = props.label, labelTextStyle = props.labelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, activeOpacity = props.activeOpacity, _b = props.animationDuration, animationDuration = _b === void 0 ? BarDefaults.animationDuration : _b, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, stackBorderRadius = props.stackBorderRadius, stackBorderTopLeftRadius = props.stackBorderTopLeftRadius, stackBorderTopRightRadius = props.stackBorderTopRightRadius, stackBorderBottomLeftRadius = props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius = props.stackBorderBottomRightRadius, showValuesAsTopLabel = props.showValuesAsTopLabel, _c = props.autoShiftLabelsForNegativeStacks, autoShiftLabelsForNegativeStacks = _c === void 0 ? true : _c, _d = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _d === void 0 ? 0 : _d, horizontal = props.horizontal, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, barMarginBottom = props.barMarginBottom, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity, stackHighlightEnabled = props.stackHighlightEnabled, selectedStackIndex = props.selectedStackIndex, setSelectedStackIndex = props.setSelectedStackIndex;
@@ -71,26 +67,19 @@ var RenderStackBars = function (props) {
                         : {},
             ], children: item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
     };
-    useEffect(function () {
-        if (!noAnimation) {
-            layoutAppear();
-        }
-    }, [totalHeight]);
+    var animatedHeight = useRef(new Animated.Value(0)).current;
     var elevate = function () {
-        LayoutAnimation.configureNext({
+        Animated.timing(animatedHeight, {
+            toValue: totalHeight,
             duration: animationDuration,
-            update: { type: 'linear', property: 'scaleXY' },
-        });
-        setHeight(totalHeight);
-    };
-    var layoutAppear = function () {
-        LayoutAnimation.configureNext({
-            duration: Platform.OS == 'ios' ? animationDuration : 20,
-            create: { type: 'linear', property: 'opacity' },
-            update: { type: 'linear', property: 'scaleXY' },
-        });
-        setTimeout(function () { return elevate(); }, Platform.OS == 'ios' ? 10 : 100);
+            useNativeDriver: false,
+        }).start();
     };
+    useEffect(function () {
+        if (!noAnimation) {
+            elevate();
+        }
+    }, []);
     var static2DSimple = function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var remainingBarMarginBottom = barMarginBottom;
@@ -180,10 +169,10 @@ var RenderStackBars = function (props) {
                     ], children: showValuesAsTopLabel ? (_jsx(Text, { style: (_j = item.topLabelTextStyle) !== null && _j !== void 0 ? _j : props.topLabelTextStyle, children: stackData[index].stacks.reduce(function (acc, stack) { return acc + stack.value; }, 0) })) : ((_k = item.topLabelComponent) === null || _k === void 0 ? void 0 : _k.call(item)) }))] }));
     };
     var barWrapper = function () {
-        return noAnimation ? (static2DSimple()) : (_jsx(View, { style: {
+        return noAnimation ? (static2DSimple()) : (_jsx(Animated.View, { style: {
                 position: 'absolute',
                 bottom: 0,
-                height: height,
+                height: animatedHeight,
                 width: '100%',
             }, children: static2DSimple() }));
     };

package/dist/BarChart/index.js

@@ -22,14 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Animated, Easing, Pressable, View } from 'react-native';
+import { Animated, Easing, I18nManager, Pressable, View, } from 'react-native';
 import RenderBars from './RenderBars';
 import RenderStackBars from './RenderStackBars';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
-import { useBarChart } from 'gifted-charts-core';
+import { useBarAndLineChartsWrapper, useBarChart, } from 'gifted-charts-core';
 import { StripAndLabel } from '../Components/common/StripAndLabel';
 import { Pointer } from '../Components/common/Pointer';
 import { screenWidth } from '../utils';
+import RenderLineInBarChart from '../Components/BarAndLineChartsWrapper/renderLineInBarChart';
 export var BarChart = function (props) {
     var _a, _b, _c;
     var heightValue = useMemo(function () { return new Animated.Value(0); }, []);
@@ -46,7 +47,8 @@ export var BarChart = function (props) {
         bounces: props.bounces,
         overScrollMode: (_b = props.overScrollMode) !== null && _b !== void 0 ? _b : 'auto',
     };
-    var _d = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_c = props.parentWidth) !== null && _c !== void 0 ? _c : screenWidth })), lineConfig = _d.lineConfig, hidePointer1 = _d.hidePointer1, pointerItem = _d.pointerItem, pointerY = _d.pointerY, pointerConfig = _d.pointerConfig, pointerColor = _d.pointerColor, pointerX = _d.pointerX, pointerComponent = _d.pointerComponent, pointerHeight = _d.pointerHeight, pointerRadius = _d.pointerRadius, pointerWidth = _d.pointerWidth, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerLabelWidth = _d.pointerLabelWidth, activatePointersOnLongPress = _d.activatePointersOnLongPress, yAxisLabelWidth = _d.yAxisLabelWidth, shiftPointerLabelX = _d.shiftPointerLabelX, pointerLabelHeight = _d.pointerLabelHeight, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerStripHeight = _d.pointerStripHeight, shiftPointerLabelY = _d.shiftPointerLabelY, showPointerStrip = _d.showPointerStrip, pointerStripWidth = _d.pointerStripWidth, containerHeight = _d.containerHeight, xAxisThickness = _d.xAxisThickness, pointerStripColor = _d.pointerStripColor, pointerEvents = _d.pointerEvents, setResponderStartTime = _d.setResponderStartTime, setPointerY = _d.setPointerY, setPointerItem = _d.setPointerItem, initialSpacing = _d.initialSpacing, spacing = _d.spacing, data = _d.data, barWidth = _d.barWidth, setPointerX = _d.setPointerX, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, maxValue = _d.maxValue, responderStartTime = _d.responderStartTime, setResponderActive = _d.setResponderActive, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, pointerVanishDelay = _d.pointerVanishDelay, containerHeightIncludingBelowXAxis = _d.containerHeightIncludingBelowXAxis, extendedContainerHeight = _d.extendedContainerHeight, totalWidth = _d.totalWidth, stripBehindBars = _d.stripBehindBars, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, stepHeight = _d.stepHeight, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, labelsExtraHeight = _d.labelsExtraHeight, stripOverPointer = _d.stripOverPointer, pointerLabelComponent = _d.pointerLabelComponent, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, selectedStackIndex = _d.selectedStackIndex, setSelectedStackIndex = _d.setSelectedStackIndex, isAnimated = _d.isAnimated, animationDuration = _d.animationDuration, side = _d.side, labelWidth = _d.labelWidth, isThreeD = _d.isThreeD, animatedHeight = _d.animatedHeight, appearingOpacity = _d.appearingOpacity, autoShiftLabels = _d.autoShiftLabels, getPropsCommonForBarAndStack = _d.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _d.autoShiftLabelsForNegativeStacks;
+    var _d = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_c = props.parentWidth) !== null && _c !== void 0 ? _c : screenWidth })), lineConfig = _d.lineConfig, hidePointer1 = _d.hidePointer1, pointerItem = _d.pointerItem, pointerY = _d.pointerY, pointerConfig = _d.pointerConfig, pointerColor = _d.pointerColor, pointerX = _d.pointerX, pointerComponent = _d.pointerComponent, pointerHeight = _d.pointerHeight, pointerRadius = _d.pointerRadius, pointerWidth = _d.pointerWidth, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerLabelWidth = _d.pointerLabelWidth, activatePointersOnLongPress = _d.activatePointersOnLongPress, yAxisLabelWidth = _d.yAxisLabelWidth, shiftPointerLabelX = _d.shiftPointerLabelX, pointerLabelHeight = _d.pointerLabelHeight, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerStripHeight = _d.pointerStripHeight, shiftPointerLabelY = _d.shiftPointerLabelY, showPointerStrip = _d.showPointerStrip, pointerStripWidth = _d.pointerStripWidth, containerHeight = _d.containerHeight, xAxisThickness = _d.xAxisThickness, pointerStripColor = _d.pointerStripColor, pointerEvents = _d.pointerEvents, setResponderStartTime = _d.setResponderStartTime, setPointerY = _d.setPointerY, setPointerItem = _d.setPointerItem, initialSpacing = _d.initialSpacing, spacing = _d.spacing, data = _d.data, barWidth = _d.barWidth, setPointerX = _d.setPointerX, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, maxValue = _d.maxValue, responderStartTime = _d.responderStartTime, setResponderActive = _d.setResponderActive, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, pointerVanishDelay = _d.pointerVanishDelay, containerHeightIncludingBelowXAxis = _d.containerHeightIncludingBelowXAxis, extendedContainerHeight = _d.extendedContainerHeight, totalWidth = _d.totalWidth, stripBehindBars = _d.stripBehindBars, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, stepHeight = _d.stepHeight, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, labelsExtraHeight = _d.labelsExtraHeight, stripOverPointer = _d.stripOverPointer, pointerLabelComponent = _d.pointerLabelComponent, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, selectedStackIndex = _d.selectedStackIndex, setSelectedStackIndex = _d.setSelectedStackIndex, isAnimated = _d.isAnimated, animationDuration = _d.animationDuration, side = _d.side, labelWidth = _d.labelWidth, isThreeD = _d.isThreeD, animatedHeight = _d.animatedHeight, appearingOpacity = _d.appearingOpacity, autoShiftLabels = _d.autoShiftLabels, getPropsCommonForBarAndStack = _d.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _d.autoShiftLabelsForNegativeStacks, showLine = _d.showLine, points2 = _d.points2;
+    var _e = useBarAndLineChartsWrapper(__assign(__assign({}, barAndLineChartsWrapperProps), { isRTL: I18nManager.isRTL })), lineInBarChartProps = _e.lineInBarChartProps, lineInBarChartProps2 = _e.lineInBarChartProps2;
     var stackData = barAndLineChartsWrapperProps.stackData;
     var labelsAppear = useCallback(function () {
         opacityValue.setValue(0);
@@ -199,12 +201,16 @@ export var BarChart = function (props) {
                             height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
                             bottom: xAxisLabelsVerticalShift,
                             width: totalWidth,
-                        }, children: renderStripAndLabel(null) })) : null, renderChart(), pointerX > 0 ? (_jsxs(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
+                        }, children: renderStripAndLabel(null) })) : null, renderChart(), 
+                    // Only For Bar Charts-
+                    showLine ? _jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps)) : null, 
+                    // Only For Bar Charts-
+                    showLine && (points2 === null || points2 === void 0 ? void 0 : points2.length) ? (_jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps2))) : null, pointerX > 0 ? (_jsxs(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
                             position: 'absolute',
                             height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
                             bottom: xAxisLabelsVerticalShift,
                             width: totalWidth,
-                            zIndex: 20,
+                            zIndex: 200000,
                         }, children: [!stripOverPointer &&
                                 !stripBehindBars &&
                                 renderStripAndLabel(null), renderPointer(1), stripOverPointer &&

package/dist/Components/AnimatedThreeDBar/index.js

@@ -1,30 +1,10 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { View, StyleSheet, LayoutAnimation, Platform, UIManager, Text, } from 'react-native';
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Text, Animated } from 'react-native';
 import Svg, { Defs, Rect } from 'react-native-svg';
 import { styles } from './styles';
-import LinearGradient from "../common/LinearGradient";
+import LinearGradient from '../common/LinearGradient';
 import { useAnimatedThreeDBar, } from 'gifted-charts-core';
-if (Platform.OS === 'android') {
-    UIManager.setLayoutAnimationEnabledExperimental &&
-        UIManager.setLayoutAnimationEnabledExperimental(true);
-}
 var TriangleCorner = function (props) {
     return (_jsx(View, { style: [
             triangleStyles.triangleCorner,
@@ -48,41 +28,30 @@ var triangleStyles = StyleSheet.create({
 });
 var AnimatedThreeDBar = function (props) {
     var _a;
-    var heightCopy = props.height;
-    var _b = __read(useState(props.isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : heightCopy), 2), height = _b[0], setHeight = _b[1];
-    var isAnimated = props.isAnimated, animationDuration = props.animationDuration, item = props.item, index = props.index, barWidth = props.barWidth, sideWidth = props.sideWidth, barStyle = props.barStyle, barBackgroundPattern = props.barBackgroundPattern, barInnerComponent = props.barInnerComponent, patternId = props.patternId, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle;
-    var _c = useAnimatedThreeDBar(props), showGradient = _c.showGradient, gradientColor = _c.gradientColor, frontColor = _c.frontColor, sideColor = _c.sideColor, topColor = _c.topColor, opacity = _c.opacity, initialRender = _c.initialRender, setInitialRender = _c.setInitialRender;
-    useEffect(function () {
-        if (isAnimated) {
-            if (initialRender) {
-                setTimeout(function () {
-                    layoutAppear();
-                }, 20);
-            }
-            else {
-                elevate();
-            }
-        }
-    }, [props.height]);
+    var height = props.height, side = props.side;
+    var isAnimated = props.isAnimated, animationDuration = props.animationDuration, item = props.item, index = props.index, barWidth = props.barWidth, sideWidth = props.sideWidth, barStyle = props.barStyle, barBackgroundPattern = props.barBackgroundPattern, barInnerComponent = props.barInnerComponent, patternId = props.patternId, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, containerHeight = props.containerHeight;
+    var _b = useAnimatedThreeDBar(props), showGradient = _b.showGradient, gradientColor = _b.gradientColor, frontColor = _b.frontColor, sideColor = _b.sideColor, topColor = _b.topColor, opacity = _b.opacity;
+    var animatedHeight = useRef(new Animated.Value(0)).current;
     var elevate = function () {
-        LayoutAnimation.configureNext({
+        Animated.timing(animatedHeight, {
+            toValue: height,
             duration: animationDuration,
-            update: { type: 'linear', property: 'scaleY' },
-        });
-        setHeight(props.height);
+            useNativeDriver: false,
+        }).start();
     };
-    var layoutAppear = function () {
-        LayoutAnimation.configureNext({
-            duration: Platform.OS == 'ios' ? animationDuration : 20,
-            create: { type: 'linear', property: 'scaleY' },
-            // update: { type: 'linear' }
-        });
-        setInitialRender(false);
-        setTimeout(function () { return elevate(); }, Platform.OS == 'ios' ? 10 : 100);
-    };
-    return (_jsx(View, { style: styles.container, children: !initialRender && (_jsxs(View, { style: [
+    useEffect(function () {
+        if (isAnimated) {
+            elevate();
+        }
+    }, []);
+    return (_jsx(View, { style: [styles.container, { height: containerHeight }], children: _jsxs(Animated.View, { style: [
                 styles.row,
-                { opacity: opacity, position: 'absolute', bottom: 0 },
+                {
+                    height: isAnimated ? animatedHeight : height,
+                    opacity: opacity,
+                    position: 'absolute',
+                    bottom: 0,
+                },
                 props.side === 'right' && { transform: [{ rotateY: '180deg' }] },
             ], children: [props.height ? (_jsxs(_Fragment, { children: [_jsx(View, { style: { position: 'absolute', top: sideWidth / -2 }, children: _jsx(TriangleCorner, { color: topColor, width: sideWidth, style: { transform: [{ rotate: '90deg' }], opacity: opacity } }) }), _jsx(View, { style: { position: 'absolute', top: sideWidth / -2 }, children: _jsx(View, { style: {
                                     width: barWidth,
@@ -99,7 +68,11 @@ var AnimatedThreeDBar = function (props) {
                                 height: height - sideWidth / 2, //animatedSideHeight
                                 backgroundColor: sideColor,
                                 opacity: opacity,
-                            } }), _jsx(TriangleCorner, { color: height ? sideColor : 'transparent', width: sideWidth + 1, style: { transform: [{ rotate: '90deg' }], opacity: opacity } })] }), _jsxs(View, { style: [
+                            } }), _jsx(TriangleCorner, { color: height ? sideColor : 'transparent', width: sideWidth + 1, style: {
+                                transform: [{ rotate: '90deg' }],
+                                opacity: opacity,
+                                right: -0.5,
+                            } })] }), _jsxs(View, { style: [
                         {
                             width: barWidth,
                             height: height, //animatedHeight
@@ -114,6 +87,7 @@ var AnimatedThreeDBar = function (props) {
                         {
                             position: 'absolute',
                             top: barWidth * -2,
+                            marginLeft: side === 'right' ? 0 : -Math.min(barWidth / 2 - 4, 8),
                             height: (barWidth * 3) / 2,
                             width: (barWidth * 3) / 2,
                             justifyContent: 'flex-end',
@@ -124,6 +98,6 @@ var AnimatedThreeDBar = function (props) {
                             !intactTopLabel && { transform: [{ rotate: '270deg' }] },
                         props.side === 'right' && { transform: [{ rotateY: '180deg' }] },
                         topLabelContainerStyle !== null && topLabelContainerStyle !== void 0 ? topLabelContainerStyle : item.topLabelContainerStyle,
-                    ], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value })) : ((_a = item.topLabelComponent) === null || _a === void 0 ? void 0 : _a.call(item)) }))] })) }));
+                    ], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value })) : ((_a = item.topLabelComponent) === null || _a === void 0 ? void 0 : _a.call(item)) }))] }) }));
 };
 export default AnimatedThreeDBar;

package/dist/Components/AnimatedThreeDBar/styles.d.ts

@@ -1,8 +1,9 @@
 export declare const styles: {
     container: {
-        flex: number;
-        justifyContent: "center";
-        alignItems: "center";
+        width: "150%";
+        position: "absolute";
+        bottom: number;
+        overflow: "hidden";
     };
     row: {
         flexDirection: "row";

package/dist/Components/AnimatedThreeDBar/styles.js

@@ -1,11 +1,10 @@
 import { StyleSheet } from 'react-native';
 export var styles = StyleSheet.create({
     container: {
-        flex: 1,
-        // width: '100%',
-        // height: '100%',
-        justifyContent: 'center',
-        alignItems: 'center',
+        width: '150%',
+        position: 'absolute',
+        bottom: 0,
+        overflow: 'hidden',
     },
     row: {
         flexDirection: 'row',

package/dist/Components/BarAndLineChartsWrapper/index.js

@@ -11,23 +11,24 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect } from 'react';
-import { View, ScrollView, StyleSheet, I18nManager } from 'react-native';
+import { View, ScrollView, StyleSheet, I18nManager, } from 'react-native';
 import { renderHorizSections } from './renderHorizSections';
-import RenderLineInBarChart from './renderLineInBarChart';
 import RenderVerticalLines from './renderVerticalLines';
 import { chartTypes, yAxisSides, useBarAndLineChartsWrapper, } from 'gifted-charts-core';
 var isCloseToRight = function (_a, endReachedOffset) {
     var layoutMeasurement = _a.layoutMeasurement, contentOffset = _a.contentOffset, contentSize = _a.contentSize;
-    return layoutMeasurement.width + contentOffset.x >= contentSize.width - endReachedOffset;
+    return (layoutMeasurement.width + contentOffset.x >=
+        contentSize.width - endReachedOffset);
 };
 var isCloseToLeft = function (_a, endReachedOffset) {
     var layoutMeasurement = _a.layoutMeasurement, contentOffset = _a.contentOffset, contentSize = _a.contentSize;
-    return layoutMeasurement.width + contentOffset.x <= contentSize.width - endReachedOffset;
+    return (layoutMeasurement.width + contentOffset.x <=
+        contentSize.width - endReachedOffset);
 };
 var BarAndLineChartsWrapper = function (props) {
     var _a, _b, _c, _d, _e;
-    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, showLine = props.showLine, points2 = props.points2, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _f = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _f === void 0 ? 0 : _f;
-    var _g = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _g.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, trimYAxisAtTop = _g.trimYAxisAtTop, yAxisExtraHeight = _g.yAxisExtraHeight, overflowTop = _g.overflowTop, xAxisLabelsHeight = _g.xAxisLabelsHeight, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, actualContainerWidth = _g.actualContainerWidth, transformForHorizontal = _g.transformForHorizontal, horizSectionProps = _g.horizSectionProps, referenceLinesOverChartContent = _g.referenceLinesOverChartContent, setCanMomentum = _g.setCanMomentum, isCloseToStart = _g.isCloseToStart, isCloseToEnd = _g.isCloseToEnd, canMomentum = _g.canMomentum, yAxisAtTop = _g.yAxisAtTop, yAxisThickness = _g.yAxisThickness, yAxisSide = _g.yAxisSide, showVerticalLines = _g.showVerticalLines, verticalLinesProps = _g.verticalLinesProps, lineInBarChartProps = _g.lineInBarChartProps, lineInBarChartProps2 = _g.lineInBarChartProps2;
+    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _f = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _f === void 0 ? 0 : _f;
+    var _g = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _g.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, trimYAxisAtTop = _g.trimYAxisAtTop, yAxisExtraHeight = _g.yAxisExtraHeight, overflowTop = _g.overflowTop, xAxisLabelsHeight = _g.xAxisLabelsHeight, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, actualContainerWidth = _g.actualContainerWidth, transformForHorizontal = _g.transformForHorizontal, horizSectionProps = _g.horizSectionProps, referenceLinesOverChartContent = _g.referenceLinesOverChartContent, setCanMomentum = _g.setCanMomentum, isCloseToStart = _g.isCloseToStart, isCloseToEnd = _g.isCloseToEnd, canMomentum = _g.canMomentum, yAxisAtTop = _g.yAxisAtTop, yAxisThickness = _g.yAxisThickness, yAxisSide = _g.yAxisSide, showVerticalLines = _g.showVerticalLines, verticalLinesProps = _g.verticalLinesProps;
     useEffect(function () {
         if (pointerConfig && getPointerProps) {
             getPointerProps({ pointerIndex: pointerIndex, pointerX: pointerX, pointerY: pointerY });
@@ -126,10 +127,6 @@ var BarAndLineChartsWrapper = function (props) {
                         });
                     }
                 } }, remainingScrollViewProps, { children: _jsxs(Fragment, { children: [showVerticalLines ? (_jsx(RenderVerticalLines, __assign({}, verticalLinesProps))) : null, 
-                        // Only For Bar Charts-
-                        showLine ? _jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps)) : null, 
-                        // Only For Bar Charts-
-                        showLine && (points2 === null || points2 === void 0 ? void 0 : points2.length) ? (_jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps2))) : null, 
                         // Only For Line Charts-
                         chartType === chartTypes.LINE &&
                             data.map(function (item, index) {
@@ -145,6 +142,7 @@ var BarAndLineChartsWrapper = function (props) {
                                     } }, index + '' + item.value)) : null;
                             }), renderChartContent(containerHeightIncludingBelowXAxis)] }) })), referenceLinesOverChartContent
                 ? renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyReferenceLines: true }))
-                : null] }));
+                : null, horizSectionProps.floatingYAxisLabels &&
+                renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyLabels: true }))] }));
 };
 export default BarAndLineChartsWrapper;

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js

@@ -30,7 +30,7 @@ import { styles } from '../../LineChart/styles';
 import { getHorizSectionVals, yAxisSides, chartTypes, } from 'gifted-charts-core';
 export var renderHorizSections = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var chartType = props.chartType, width = props.width, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, totalWidth = props.totalWidth, endSpacing = props.endSpacing, yAxisSide = props.yAxisSide, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, yAxisLabelWidth = props.yAxisLabelWidth, yAxisLabelContainerStyle = props.yAxisLabelContainerStyle, yAxisThickness = props.yAxisThickness, yAxisColor = props.yAxisColor, xAxisThickness = props.xAxisThickness, xAxisColor = props.xAxisColor, xAxisLength = props.xAxisLength, xAxisType = props.xAxisType, dashWidth = props.dashWidth, dashGap = props.dashGap, backgroundColor = props.backgroundColor, hideRules = props.hideRules, rulesLength = props.rulesLength, rulesType = props.rulesType, rulesThickness = props.rulesThickness, rulesColor = props.rulesColor, rulesConfigArray = props.rulesConfigArray, spacing = props.spacing, showYAxisIndices = props.showYAxisIndices, yAxisIndicesHeight = props.yAxisIndicesHeight, yAxisIndicesWidth = props.yAxisIndicesWidth, yAxisIndicesColor = props.yAxisIndicesColor, hideOrigin = props.hideOrigin, hideYAxisText = props.hideYAxisText, yAxisTextNumberOfLines = props.yAxisTextNumberOfLines, yAxisTextStyle = props.yAxisTextStyle, rotateYAxisTexts = props.rotateYAxisTexts, rtl = props.rtl, containerHeight = props.containerHeight, maxValue = props.maxValue, yAxisOffset = props.yAxisOffset, horizontal = props.horizontal, yAxisAtTop = props.yAxisAtTop, secondaryYAxis = props.secondaryYAxis, onlyReferenceLines = props.onlyReferenceLines, renderReferenceLines = props.renderReferenceLines, secondaryXAxis = props.secondaryXAxis, customBackground = props.customBackground;
+    var chartType = props.chartType, width = props.width, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, totalWidth = props.totalWidth, endSpacing = props.endSpacing, yAxisSide = props.yAxisSide, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, yAxisLabelWidth = props.yAxisLabelWidth, yAxisLabelContainerStyle = props.yAxisLabelContainerStyle, yAxisThickness = props.yAxisThickness, yAxisColor = props.yAxisColor, xAxisThickness = props.xAxisThickness, xAxisColor = props.xAxisColor, xAxisLength = props.xAxisLength, xAxisType = props.xAxisType, dashWidth = props.dashWidth, dashGap = props.dashGap, backgroundColor = props.backgroundColor, hideRules = props.hideRules, rulesLength = props.rulesLength, rulesType = props.rulesType, rulesThickness = props.rulesThickness, rulesColor = props.rulesColor, rulesConfigArray = props.rulesConfigArray, spacing = props.spacing, showYAxisIndices = props.showYAxisIndices, yAxisIndicesHeight = props.yAxisIndicesHeight, yAxisIndicesWidth = props.yAxisIndicesWidth, yAxisIndicesColor = props.yAxisIndicesColor, hideOrigin = props.hideOrigin, hideYAxisText = props.hideYAxisText, yAxisTextNumberOfLines = props.yAxisTextNumberOfLines, yAxisTextStyle = props.yAxisTextStyle, rotateYAxisTexts = props.rotateYAxisTexts, rtl = props.rtl, containerHeight = props.containerHeight, maxValue = props.maxValue, yAxisOffset = props.yAxisOffset, horizontal = props.horizontal, yAxisAtTop = props.yAxisAtTop, secondaryYAxis = props.secondaryYAxis, onlyReferenceLines = props.onlyReferenceLines, onlyLabels = props.onlyLabels, renderReferenceLines = props.renderReferenceLines, secondaryXAxis = props.secondaryXAxis, customBackground = props.customBackground, allowFontScaling = props.allowFontScaling;
     var _k = getHorizSectionVals(props), secondaryYAxisConfig = _k.secondaryYAxisConfig, horizSections = _k.horizSections, yAxisExtraHeightAtTop = _k.yAxisExtraHeightAtTop, secondaryHorizSections = _k.secondaryHorizSections, showReferenceLine1 = _k.showReferenceLine1, referenceLine1Config = _k.referenceLine1Config, referenceLine1Position = _k.referenceLine1Position, showReferenceLine2 = _k.showReferenceLine2, referenceLine2Config = _k.referenceLine2Config, referenceLine2Position = _k.referenceLine2Position, showReferenceLine3 = _k.showReferenceLine3, referenceLine3Config = _k.referenceLine3Config, referenceLine3Position = _k.referenceLine3Position, horizSectionsBelow = _k.horizSectionsBelow, secondaryHorizSectionsBelow = _k.secondaryHorizSectionsBelow, getLabelTexts = _k.getLabelTexts, getLabelTextsForSecondaryYAxis = _k.getLabelTextsForSecondaryYAxis;
     var secondaryYAxisExtraHeightAtBottom = 10;
     var negativeSectionsCountDiffPrimaryVsSecondary = secondaryHorizSectionsBelow.length - horizSectionsBelow.length;
@@ -150,7 +150,7 @@ export var renderHorizSections = function (props) {
                             position: 'absolute',
                             left: ((_h = secondaryYAxisConfig.yAxisIndicesWidth) !== null && _h !== void 0 ? _h : 0) / -2,
                             backgroundColor: secondaryYAxisConfig.yAxisIndicesColor,
-                        } })) : null, _jsx(Text, { numberOfLines: secondaryYAxisConfig.yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
+                        } })) : null, _jsx(Text, { numberOfLines: secondaryYAxisConfig.yAxisTextNumberOfLines, ellipsizeMode: 'clip', allowFontScaling: allowFontScaling, style: [
                             {
                                 textAlign: 'left',
                                 width: (_k = (_j = secondaryYAxisConfig.yAxisLabelContainerStyle) === null || _j === void 0 ? void 0 : _j.width) !== null && _k !== void 0 ? _k : secondaryYAxisConfig.yAxisLabelWidth,
@@ -170,7 +170,7 @@ export var renderHorizSections = function (props) {
                         left: yAxisSide === yAxisSides.RIGHT
                             ? 0
                             : yAxisLabelWidth + yAxisThickness,
-                    }, children: [_jsx(Rule, { config: referenceLine1Config }), referenceLine1Config.labelText ? (_jsx(Text, { style: [
+                    }, children: [_jsx(Rule, { config: referenceLine1Config }), referenceLine1Config.labelText ? (_jsx(Text, { allowFontScaling: allowFontScaling, style: [
                                 { position: 'absolute' },
                                 referenceLine1Config.labelTextStyle,
                             ], children: referenceLine1Config.labelText })) : null] })) : null, showReferenceLine2 ? (_jsxs(View, { style: {
@@ -182,7 +182,7 @@ export var renderHorizSections = function (props) {
                         left: yAxisSide === yAxisSides.RIGHT
                             ? 0
                             : yAxisLabelWidth + yAxisThickness,
-                    }, children: [_jsx(Rule, { config: referenceLine2Config }), referenceLine2Config.labelText ? (_jsx(Text, { style: [
+                    }, children: [_jsx(Rule, { config: referenceLine2Config }), referenceLine2Config.labelText ? (_jsx(Text, { allowFontScaling: allowFontScaling, style: [
                                 { position: 'absolute' },
                                 referenceLine2Config.labelTextStyle,
                             ], children: referenceLine2Config.labelText })) : null] })) : null, showReferenceLine3 ? (_jsxs(View, { style: {
@@ -194,7 +194,7 @@ export var renderHorizSections = function (props) {
                         left: yAxisSide === yAxisSides.RIGHT
                             ? 0
                             : yAxisLabelWidth + yAxisThickness,
-                    }, children: [_jsx(Rule, { config: referenceLine3Config }), referenceLine3Config.labelText ? (_jsx(Text, { style: [
+                    }, children: [_jsx(Rule, { config: referenceLine3Config }), referenceLine3Config.labelText ? (_jsx(Text, { allowFontScaling: allowFontScaling, style: [
                                 { position: 'absolute' },
                                 referenceLine3Config.labelTextStyle,
                             ], children: referenceLine3Config.labelText })) : null] })) : null] }));
@@ -256,138 +256,188 @@ export var renderHorizSections = function (props) {
             }, children: _jsx(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: referenceLines() }) })) : (_jsxs(View, { pointerEvents: "none", style: {
                 flexDirection: 'row',
                 marginTop: stepHeight / -2,
-            }, children: [_jsxs(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: [customBackground ? (_jsx(View, { style: {
-                                position: 'absolute',
-                                backgroundColor: customBackground.color,
-                                width: (_a = customBackground.width) !== null && _a !== void 0 ? _a : (width !== null && width !== void 0 ? width : totalWidth) +
-                                    endSpacing -
-                                    9 +
-                                    ((_b = customBackground.widthAdjustment) !== null && _b !== void 0 ? _b : 0),
-                                height: (_c = customBackground.height) !== null && _c !== void 0 ? _c : '100%',
-                                left: yAxisLabelWidth + ((_d = customBackground.horizontalShift) !== null && _d !== void 0 ? _d : 0),
-                                top: (_e = customBackground.verticalShift) !== null && _e !== void 0 ? _e : 0,
-                            }, children: customBackground.component
-                                ? customBackground.component()
-                                : null })) : null, yAxisExtraHeightAtTop ? renderExtraHeightOfYAxisAtTop() : null, horizSections.map(function (sectionItems, index) {
-                            return (_jsxs(View, { style: [
+                position: onlyLabels ? 'absolute' : 'relative',
+            }, children: [_jsx(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: onlyLabels ? (!hideYAxisText &&
+                        horizSections.map(function (sectionItems, index) {
+                            var label = getLabelTexts(sectionItems.value, index);
+                            if (hideOrigin && index === horizSections.length - 1) {
+                                label = '';
+                            }
+                            return (_jsx(View, { style: [
                                     styles.horizBar,
+                                    styles.leftLabel,
                                     {
-                                        width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing,
+                                        position: 'absolute',
+                                        zIndex: 1,
+                                        top: stepHeight * index + yAxisExtraHeightAtTop,
+                                        width: yAxisLabelWidth,
+                                        height: index === noOfSections ? stepHeight / 2 : stepHeight,
+                                    },
+                                    yAxisSide === yAxisSides.RIGHT && {
+                                        left: leftShiftForRIghtYaxis,
                                     },
                                     horizontal &&
                                         !yAxisAtTop && {
-                                        transform: [{ rotateY: '180deg' }],
-                                    },
-                                    horizontalRulesStyle,
-                                ], children: [_jsx(View, { style: [
-                                            styles.leftLabel,
+                                        transform: [
                                             {
-                                                height: index === noOfSections ? stepHeight / 2 : stepHeight,
-                                                width: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
+                                                translateX: (width !== null && width !== void 0 ? width : totalWidth) - 30 + endSpacing,
                                             },
-                                            yAxisLabelContainerStyle,
-                                        ] }), renderAxesAndRules(index)] }, index));
-                        }), 
-                        /***********************************************************************************************/
-                        /**************************      Render the y axis labels separately      **********************/
-                        /***********************************************************************************************/
-                        !hideYAxisText &&
-                            horizSections.map(function (sectionItems, index) {
-                                var label = getLabelTexts(sectionItems.value, index);
-                                if (hideOrigin && index === horizSections.length - 1) {
-                                    label = '';
-                                }
-                                return (_jsx(View, { style: [
+                                        ],
+                                    },
+                                    yAxisLabelContainerStyle,
+                                ], children: _jsx(Text, { allowFontScaling: allowFontScaling, numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
+                                        yAxisTextStyle,
+                                        horizontal && {
+                                            transform: [
+                                                {
+                                                    rotate: "".concat(rotateYAxisTexts !== null && rotateYAxisTexts !== void 0 ? rotateYAxisTexts : (rtl ? 90 : -90), "deg"),
+                                                },
+                                            ],
+                                        },
+                                        index === noOfSections && {
+                                            marginBottom: stepHeight / -2,
+                                        },
+                                    ], children: label }) }, index));
+                        })) : (_jsxs(_Fragment, { children: [customBackground ? (_jsx(View, { style: {
+                                    position: 'absolute',
+                                    backgroundColor: customBackground.color,
+                                    width: (_a = customBackground.width) !== null && _a !== void 0 ? _a : (width !== null && width !== void 0 ? width : totalWidth) +
+                                        endSpacing -
+                                        9 +
+                                        ((_b = customBackground.widthAdjustment) !== null && _b !== void 0 ? _b : 0),
+                                    height: (_c = customBackground.height) !== null && _c !== void 0 ? _c : '100%',
+                                    left: yAxisLabelWidth +
+                                        ((_d = customBackground.horizontalShift) !== null && _d !== void 0 ? _d : 0),
+                                    top: (_e = customBackground.verticalShift) !== null && _e !== void 0 ? _e : 0,
+                                }, children: customBackground.component
+                                    ? customBackground.component()
+                                    : null })) : null, yAxisExtraHeightAtTop ? renderExtraHeightOfYAxisAtTop() : null, horizSections.map(function (sectionItems, index) {
+                                return (_jsxs(View, { style: [
                                         styles.horizBar,
-                                        styles.leftLabel,
                                         {
-                                            position: 'absolute',
-                                            zIndex: 1,
-                                            top: stepHeight * index + yAxisExtraHeightAtTop,
-                                            width: yAxisLabelWidth,
-                                            height: index === noOfSections
-                                                ? stepHeight / 2
-                                                : stepHeight,
-                                        },
-                                        yAxisSide === yAxisSides.RIGHT && {
-                                            left: leftShiftForRIghtYaxis,
+                                            width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing,
                                         },
                                         horizontal &&
                                             !yAxisAtTop && {
-                                            transform: [
+                                            transform: [{ rotateY: '180deg' }],
+                                        },
+                                        horizontalRulesStyle,
+                                    ], children: [_jsx(View, { style: [
+                                                styles.leftLabel,
                                                 {
-                                                    translateX: (width !== null && width !== void 0 ? width : totalWidth) - 30 + endSpacing,
+                                                    height: index === noOfSections
+                                                        ? stepHeight / 2
+                                                        : stepHeight,
+                                                    width: yAxisSide === yAxisSides.RIGHT
+                                                        ? 0
+                                                        : yAxisLabelWidth,
                                                 },
-                                            ],
-                                        },
-                                        yAxisLabelContainerStyle,
-                                    ], children: _jsx(Text, { numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
-                                            yAxisTextStyle,
-                                            horizontal && {
+                                                yAxisLabelContainerStyle,
+                                            ] }), renderAxesAndRules(index)] }, index));
+                            }), 
+                            /***********************************************************************************************/
+                            /**************************      Render the y axis labels separately      **********************/
+                            /***********************************************************************************************/
+                            !hideYAxisText &&
+                                horizSections.map(function (sectionItems, index) {
+                                    var label = getLabelTexts(sectionItems.value, index);
+                                    if (hideOrigin && index === horizSections.length - 1) {
+                                        label = '';
+                                    }
+                                    return (_jsx(View, { style: [
+                                            styles.horizBar,
+                                            styles.leftLabel,
+                                            {
+                                                position: 'absolute',
+                                                zIndex: 1,
+                                                top: stepHeight * index + yAxisExtraHeightAtTop,
+                                                width: yAxisLabelWidth,
+                                                height: index === noOfSections
+                                                    ? stepHeight / 2
+                                                    : stepHeight,
+                                            },
+                                            yAxisSide === yAxisSides.RIGHT && {
+                                                left: leftShiftForRIghtYaxis,
+                                            },
+                                            horizontal &&
+                                                !yAxisAtTop && {
                                                 transform: [
                                                     {
-                                                        rotate: "".concat(rotateYAxisTexts !== null && rotateYAxisTexts !== void 0 ? rotateYAxisTexts : (rtl ? 90 : -90), "deg"),
+                                                        translateX: (width !== null && width !== void 0 ? width : totalWidth) - 30 + endSpacing,
                                                     },
                                                 ],
                                             },
-                                            index === noOfSections && {
-                                                marginBottom: stepHeight / -2,
+                                            yAxisLabelContainerStyle,
+                                        ], children: _jsx(Text, { allowFontScaling: allowFontScaling, numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
+                                                yAxisTextStyle,
+                                                horizontal && {
+                                                    transform: [
+                                                        {
+                                                            rotate: "".concat(rotateYAxisTexts !== null && rotateYAxisTexts !== void 0 ? rotateYAxisTexts : (rtl ? 90 : -90), "deg"),
+                                                        },
+                                                    ],
+                                                },
+                                                index === noOfSections && {
+                                                    marginBottom: stepHeight / -2,
+                                                },
+                                            ], children: label }) }, index));
+                                })
+                            /***********************************************************************************************/
+                            /***********************************************************************************************/
+                            , horizSectionsBelow.map(function (_, index) {
+                                return horizSectionsBelowRenderer(index, true);
+                            }), 
+                            /***********************************************************************************************/
+                            /*     If more -ve sections in Secondary Y-axis, then we need to render the Rules for them     */
+                            /***********************************************************************************************/
+                            secondaryYAxis &&
+                                negativeSectionsCountDiffPrimaryVsSecondary > 0
+                                ? __spreadArray([], __read(Array(negativeSectionsCountDiffPrimaryVsSecondary).keys()), false).map(function (_, index) {
+                                    return horizSectionsBelowRenderer(index, false);
+                                })
+                                : null, 
+                            /***********************************************************************************************/
+                            /*************************      Render the y axis labels below origin      *********************/
+                            /***********************************************************************************************/
+                            !hideYAxisText &&
+                                horizSectionsBelow.map(function (_, index) {
+                                    var invertedIndex = horizSectionsBelow.length - 1 - index;
+                                    var label = getLabelTexts(horizSectionsBelow[invertedIndex].value, index);
+                                    return (_jsx(View, { style: [
+                                            styles.horizBar,
+                                            styles.leftLabel,
+                                            {
+                                                position: 'absolute',
+                                                zIndex: 1,
+                                                top: containerHeight +
+                                                    negativeStepHeight * (invertedIndex + 1) +
+                                                    yAxisExtraHeightAtTop,
+                                                width: yAxisLabelWidth,
+                                                height: index === noOfSectionsBelowXAxis
+                                                    ? negativeStepHeight / 2
+                                                    : negativeStepHeight,
                                             },
-                                        ], children: label }) }, index));
-                            })
-                        /***********************************************************************************************/
-                        /***********************************************************************************************/
-                        , horizSectionsBelow.map(function (_, index) {
-                            return horizSectionsBelowRenderer(index, true);
-                        }), 
-                        /***********************************************************************************************/
-                        /*     If more -ve sections in Secondary Y-axis, then we need to render the Rules for them     */
-                        /***********************************************************************************************/
-                        secondaryYAxis && negativeSectionsCountDiffPrimaryVsSecondary > 0
-                            ? __spreadArray([], __read(Array(negativeSectionsCountDiffPrimaryVsSecondary).keys()), false).map(function (_, index) { return horizSectionsBelowRenderer(index, false); })
-                            : null, 
-                        /***********************************************************************************************/
-                        /*************************      Render the y axis labels below origin      *********************/
-                        /***********************************************************************************************/
-                        !hideYAxisText &&
-                            horizSectionsBelow.map(function (_, index) {
-                                var invertedIndex = horizSectionsBelow.length - 1 - index;
-                                var label = getLabelTexts(horizSectionsBelow[invertedIndex].value, index);
-                                return (_jsx(View, { style: [
-                                        styles.horizBar,
-                                        styles.leftLabel,
-                                        {
-                                            position: 'absolute',
-                                            zIndex: 1,
-                                            top: containerHeight +
-                                                negativeStepHeight * (invertedIndex + 1) +
-                                                yAxisExtraHeightAtTop,
-                                            width: yAxisLabelWidth,
-                                            height: index === noOfSectionsBelowXAxis
-                                                ? negativeStepHeight / 2
-                                                : negativeStepHeight,
-                                        },
-                                        yAxisSide === yAxisSides.RIGHT && {
-                                            left: (width
-                                                ? width - 15
-                                                : totalWidth - (isLineChart ? 65 : 35)) +
-                                                yAxisLabelWidth,
-                                        },
-                                        yAxisLabelContainerStyle,
-                                    ], children: _jsx(Text, { numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
-                                            yAxisTextStyle,
-                                            index === noOfSectionsBelowXAxis && {
-                                                marginBottom: negativeStepHeight / -2,
+                                            yAxisSide === yAxisSides.RIGHT && {
+                                                left: (width
+                                                    ? width - 15
+                                                    : totalWidth - (isLineChart ? 65 : 35)) +
+                                                    yAxisLabelWidth,
                                             },
-                                        ], children: label }) }, index));
-                            })
-                        /***********************************************************************************************/
-                        /***********************************************************************************************/
-                        , renderReferenceLines ? referenceLines() : null] }), 
+                                            yAxisLabelContainerStyle,
+                                        ], children: _jsx(Text, { allowFontScaling: allowFontScaling, numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
+                                                yAxisTextStyle,
+                                                index === noOfSectionsBelowXAxis && {
+                                                    marginBottom: negativeStepHeight / -2,
+                                                },
+                                            ], children: label }) }, index));
+                                })
+                            /***********************************************************************************************/
+                            /***********************************************************************************************/
+                            , renderReferenceLines ? referenceLines() : null] })) }), 
                 /***********************************************************************************************/
                 /*************************      Render the secondary Y Axis                *********************/
                 /***********************************************************************************************/
-                secondaryYAxis ? (_jsx(View, { style: {
+                !onlyLabels && secondaryYAxis ? (_jsx(View, { style: {
                         width: secondaryYAxisConfig.yAxisLabelWidth,
                         left: width ? yAxisLabelWidth : yAxisLabelWidth - spacing,
                         borderColor: secondaryYAxisConfig.yAxisColor,
@@ -400,7 +450,9 @@ export var renderHorizSections = function (props) {
                 /***********************************************************************************************/
                 /*************************      Render the secondary Y Axis below origin   *********************/
                 /***********************************************************************************************/
-                secondaryYAxis && secondaryYAxisConfig.noOfSectionsBelowXAxis ? (_jsx(View, { style: {
+                !onlyLabels &&
+                    secondaryYAxis &&
+                    secondaryYAxisConfig.noOfSectionsBelowXAxis ? (_jsx(View, { style: {
                         width: (_f = secondaryYAxisConfig.yAxisLabelWidth) !== null && _f !== void 0 ? _f : yAxisLabelWidth,
                         left: (width ? yAxisLabelWidth : yAxisLabelWidth - spacing) -
                             ((_g = secondaryYAxisConfig.yAxisLabelWidth) !== null && _g !== void 0 ? _g : yAxisLabelWidth),

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.js

@@ -67,7 +67,7 @@ var RenderLineInBarChart = function (props) {
                 position: 'absolute',
                 height: containerHeightIncludingBelowXAxis + labelsExtraHeight,
                 left: 6 - yAxisLabelWidth,
-                bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+                bottom: -10 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
                 width: totalWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'rgba(200,150,150,0.1)'

package/dist/LineChart/LineChartBicolor.js

@@ -23,7 +23,7 @@ export var LineChartBicolor = function (props) {
     // const heightValue = useMemo(() => new Animated.Value(0), []);
     var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
     var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
-    var _c = useLineChartBiColor(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), pointsArray = _c.pointsArray, fillPointsArray = _c.fillPointsArray, selectedIndex = _c.selectedIndex, setSelectedIndex = _c.setSelectedIndex, containerHeight = _c.containerHeight, data = _c.data, labelsExtraHeight = _c.labelsExtraHeight, animationDuration = _c.animationDuration, startIndex1 = _c.startIndex1, endIndex1 = _c.endIndex1, initialSpacing = _c.initialSpacing, thickness = _c.thickness, spacing = _c.spacing, xAxisThickness = _c.xAxisThickness, dataPointsHeight1 = _c.dataPointsHeight1, dataPointsWidth1 = _c.dataPointsWidth1, dataPointsRadius1 = _c.dataPointsRadius1, dataPointsColor1 = _c.dataPointsColor1, dataPointsShape1 = _c.dataPointsShape1, areaChart = _c.areaChart, textFontSize1 = _c.textFontSize1, textColor1 = _c.textColor1, totalWidth = _c.totalWidth, maxValue = _c.maxValue, extendedContainerHeight = _c.extendedContainerHeight, getX = _c.getX, getY = _c.getY, stepHeight = _c.stepHeight, noOfSectionsBelowXAxis = _c.noOfSectionsBelowXAxis, thickness1 = _c.thickness1, zIndex = _c.zIndex, strokeDashArray1 = _c.strokeDashArray1, rotateLabel = _c.rotateLabel, isAnimated = _c.isAnimated, hideDataPoints1 = _c.hideDataPoints1, color = _c.color, colorNegative = _c.colorNegative, startFillColor = _c.startFillColor, endFillColor = _c.endFillColor, startOpacity = _c.startOpacity, endOpacity = _c.endOpacity, startFillColorNegative = _c.startFillColorNegative, endFillColorNegative = _c.endFillColorNegative, startOpacityNegative = _c.startOpacityNegative, endOpacityNegative = _c.endOpacityNegative, gradientDirection = _c.gradientDirection, xAxisTextNumberOfLines = _c.xAxisTextNumberOfLines, focusEnabled = _c.focusEnabled, showDataPointOnFocus = _c.showDataPointOnFocus, showStripOnFocus = _c.showStripOnFocus, showTextOnFocus = _c.showTextOnFocus, stripHeight = _c.stripHeight, stripWidth = _c.stripWidth, stripColor = _c.stripColor, stripOpacity = _c.stripOpacity, unFocusOnPressOut = _c.unFocusOnPressOut, delayBeforeUnFocus = _c.delayBeforeUnFocus, barAndLineChartsWrapperProps = _c.barAndLineChartsWrapperProps;
+    var _c = useLineChartBiColor(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), pointsArray = _c.pointsArray, fillPointsArray = _c.fillPointsArray, selectedIndex = _c.selectedIndex, setSelectedIndex = _c.setSelectedIndex, containerHeight = _c.containerHeight, data = _c.data, labelsExtraHeight = _c.labelsExtraHeight, animationDuration = _c.animationDuration, startIndex1 = _c.startIndex1, endIndex1 = _c.endIndex1, initialSpacing = _c.initialSpacing, thickness = _c.thickness, spacing = _c.spacing, xAxisThickness = _c.xAxisThickness, dataPointsHeight1 = _c.dataPointsHeight1, dataPointsWidth1 = _c.dataPointsWidth1, dataPointsRadius1 = _c.dataPointsRadius1, dataPointsColor1 = _c.dataPointsColor1, dataPointsShape1 = _c.dataPointsShape1, areaChart = _c.areaChart, textFontSize1 = _c.textFontSize1, textColor1 = _c.textColor1, totalWidth = _c.totalWidth, maxValue = _c.maxValue, extendedContainerHeight = _c.extendedContainerHeight, getX = _c.getX, getY = _c.getY, stepHeight = _c.stepHeight, noOfSectionsBelowXAxis = _c.noOfSectionsBelowXAxis, thickness1 = _c.thickness1, zIndex = _c.zIndex, strokeDashArray1 = _c.strokeDashArray1, rotateLabel = _c.rotateLabel, isAnimated = _c.isAnimated, hideDataPoints1 = _c.hideDataPoints1, color = _c.color, colorNegative = _c.colorNegative, startFillColor = _c.startFillColor, endFillColor = _c.endFillColor, startOpacity = _c.startOpacity, endOpacity = _c.endOpacity, startFillColorNegative = _c.startFillColorNegative, endFillColorNegative = _c.endFillColorNegative, startOpacityNegative = _c.startOpacityNegative, endOpacityNegative = _c.endOpacityNegative, gradientDirection = _c.gradientDirection, xAxisTextNumberOfLines = _c.xAxisTextNumberOfLines, focusEnabled = _c.focusEnabled, showDataPointOnFocus = _c.showDataPointOnFocus, showStripOnFocus = _c.showStripOnFocus, showTextOnFocus = _c.showTextOnFocus, stripHeight = _c.stripHeight, stripWidth = _c.stripWidth, stripColor = _c.stripColor, stripOpacity = _c.stripOpacity, unFocusOnPressOut = _c.unFocusOnPressOut, delayBeforeUnFocus = _c.delayBeforeUnFocus, barAndLineChartsWrapperProps = _c.barAndLineChartsWrapperProps, allowFontScaling = _c.allowFontScaling;
     var labelsAppear = useCallback(function () {
         opacityValue.setValue(0);
         Animated.timing(opacityValue, {
@@ -63,7 +63,7 @@ export var LineChartBicolor = function (props) {
                     justifyContent: 'center',
                 },
                 rotateLabel && { transform: [{ rotate: '60deg' }] },
-            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: labelTextStyle || { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: labelTextStyle || { textAlign: 'center' }, allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
     };
     var renderAnimatedLabel = function (index, label, labelTextStyle, labelComponent) {
         return (_jsx(Animated.View, { style: [
@@ -80,7 +80,7 @@ export var LineChartBicolor = function (props) {
                     opacity: appearingOpacity,
                 },
                 rotateLabel && { transform: [{ rotate: '60deg' }] },
-            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: labelTextStyle || { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { allowFontScaling: allowFontScaling, style: labelTextStyle || { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
     };
     var animatedWidth = widthValue.interpolate({
         inputRange: [0, 1],

package/dist/LineChart/index.js

@@ -54,7 +54,7 @@ export var LineChart = function (props) {
     var widthValue3 = useMemo(function () { return new Animated.Value(0); }, []);
     var widthValue4 = useMemo(function () { return new Animated.Value(0); }, []);
     var widthValue5 = useMemo(function () { return new Animated.Value(0); }, []);
-    var _e = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _e.curveType, scrollX = _e.scrollX, setScrollX = _e.setScrollX, arrow1Points = _e.arrow1Points, arrow2Points = _e.arrow2Points, arrow3Points = _e.arrow3Points, arrow4Points = _e.arrow4Points, arrow5Points = _e.arrow5Points, secondaryArrowPoints = _e.secondaryArrowPoints, pointerIndex = _e.pointerIndex, setPointerIndex = _e.setPointerIndex, pointerX = _e.pointerX, setPointerX = _e.setPointerX, pointerY = _e.pointerY, setPointerY = _e.setPointerY, pointerItem = _e.pointerItem, setPointerItem = _e.setPointerItem, pointerY2 = _e.pointerY2, setPointerY2 = _e.setPointerY2, pointerItem2 = _e.pointerItem2, setPointerItem2 = _e.setPointerItem2, pointerY3 = _e.pointerY3, setPointerY3 = _e.setPointerY3, pointerItem3 = _e.pointerItem3, setPointerItem3 = _e.setPointerItem3, pointerY4 = _e.pointerY4, setPointerY4 = _e.setPointerY4, pointerItem4 = _e.pointerItem4, setPointerItem4 = _e.setPointerItem4, pointerY5 = _e.pointerY5, setPointerY5 = _e.setPointerY5, pointerYsForDataSet = _e.pointerYsForDataSet, setPointerYsForDataSet = _e.setPointerYsForDataSet, pointerItem5 = _e.pointerItem5, setPointerItem5 = _e.setPointerItem5, secondaryPointerY = _e.secondaryPointerY, setSecondaryPointerY = _e.setSecondaryPointerY, secondaryPointerItem = _e.secondaryPointerItem, setSecondaryPointerItem = _e.setSecondaryPointerItem, pointerItemsForSet = _e.pointerItemsForSet, setPointerItemsForSet = _e.setPointerItemsForSet, secondaryPointerItemsForSet = _e.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _e.setSecondaryPointerItemsForSet, responderStartTime = _e.responderStartTime, setResponderStartTime = _e.setResponderStartTime, setResponderActive = _e.setResponderActive, points = _e.points, points2 = _e.points2, points3 = _e.points3, points4 = _e.points4, points5 = _e.points5, secondaryPoints = _e.secondaryPoints, fillPoints = _e.fillPoints, fillPoints2 = _e.fillPoints2, fillPoints3 = _e.fillPoints3, fillPoints4 = _e.fillPoints4, fillPoints5 = _e.fillPoints5, secondaryFillPoints = _e.secondaryFillPoints, pointsFromSet = _e.pointsFromSet, fillPointsFromSet = _e.fillPointsFromSet, arrowPointsFromSet = _e.arrowPointsFromSet, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, containerHeight = _e.containerHeight, data = _e.data, data2 = _e.data2, data3 = _e.data3, data4 = _e.data4, data5 = _e.data5, secondaryData = _e.secondaryData, dataSet = _e.dataSet, data0 = _e.data0, labelsExtraHeight = _e.labelsExtraHeight, animationDuration = _e.animationDuration, onDataChangeAnimationDuration = _e.onDataChangeAnimationDuration, animateTogether = _e.animateTogether, renderDataPointsAfterAnimationEnds = _e.renderDataPointsAfterAnimationEnds, animateOnDataChange = _e.animateOnDataChange, startIndex1 = _e.startIndex1, startIndex2 = _e.startIndex2, endIndex1 = _e.endIndex1, endIndex2 = _e.endIndex2, startIndex3 = _e.startIndex3, endIndex3 = _e.endIndex3, startIndex4 = _e.startIndex4, endIndex4 = _e.endIndex4, startIndex5 = _e.startIndex5, endIndex5 = _e.endIndex5, initialSpacing = _e.initialSpacing, thickness = _e.thickness, yAxisLabelWidth = _e.yAxisLabelWidth, spacing = _e.spacing, xAxisThickness = _e.xAxisThickness, dataPointsHeight1 = _e.dataPointsHeight1, dataPointsWidth1 = _e.dataPointsWidth1, dataPointsRadius1 = _e.dataPointsRadius1, dataPointsColor1 = _e.dataPointsColor1, dataPointsShape1 = _e.dataPointsShape1, dataPointsHeight2 = _e.dataPointsHeight2, dataPointsWidth2 = _e.dataPointsWidth2, dataPointsRadius2 = _e.dataPointsRadius2, dataPointsColor2 = _e.dataPointsColor2, dataPointsShape2 = _e.dataPointsShape2, dataPointsHeight3 = _e.dataPointsHeight3, dataPointsWidth3 = _e.dataPointsWidth3, dataPointsRadius3 = _e.dataPointsRadius3, dataPointsColor3 = _e.dataPointsColor3, dataPointsShape3 = _e.dataPointsShape3, dataPointsHeight4 = _e.dataPointsHeight4, dataPointsWidth4 = _e.dataPointsWidth4, dataPointsRadius4 = _e.dataPointsRadius4, dataPointsColor4 = _e.dataPointsColor4, dataPointsShape4 = _e.dataPointsShape4, dataPointsHeight5 = _e.dataPointsHeight5, dataPointsWidth5 = _e.dataPointsWidth5, dataPointsRadius5 = _e.dataPointsRadius5, dataPointsColor5 = _e.dataPointsColor5, dataPointsShape5 = _e.dataPointsShape5, getIsNthAreaChart = _e.getIsNthAreaChart, textFontSize1 = _e.textFontSize1, textFontSize2 = _e.textFontSize2, textFontSize3 = _e.textFontSize3, textFontSize4 = _e.textFontSize4, textFontSize5 = _e.textFontSize5, textColor1 = _e.textColor1, textColor2 = _e.textColor2, textColor3 = _e.textColor3, textColor4 = _e.textColor4, textColor5 = _e.textColor5, totalWidth = _e.totalWidth, maxValue = _e.maxValue, overflowTop = _e.overflowTop, extendedContainerHeight = _e.extendedContainerHeight, getX = _e.getX, getY = _e.getY, getSecondaryY = _e.getSecondaryY, secondaryMaxValue = _e.secondaryMaxValue, showValuesAsDataPointsText = _e.showValuesAsDataPointsText, thickness1 = _e.thickness1, thickness2 = _e.thickness2, thickness3 = _e.thickness3, thickness4 = _e.thickness4, thickness5 = _e.thickness5, zIndex1 = _e.zIndex1, zIndex2 = _e.zIndex2, zIndex3 = _e.zIndex3, zIndex4 = _e.zIndex4, zIndex5 = _e.zIndex5, strokeDashArray1 = _e.strokeDashArray1, strokeDashArray2 = _e.strokeDashArray2, strokeDashArray3 = _e.strokeDashArray3, strokeDashArray4 = _e.strokeDashArray4, strokeDashArray5 = _e.strokeDashArray5, strokeLinecap1 = _e.strokeLinecap1, strokeLinecap2 = _e.strokeLinecap2, strokeLinecap3 = _e.strokeLinecap3, strokeLinecap4 = _e.strokeLinecap4, strokeLinecap5 = _e.strokeLinecap5, rotateLabel = _e.rotateLabel, isAnimated = _e.isAnimated, hideDataPoints1 = _e.hideDataPoints1, hideDataPoints2 = _e.hideDataPoints2, hideDataPoints3 = _e.hideDataPoints3, hideDataPoints4 = _e.hideDataPoints4, hideDataPoints5 = _e.hideDataPoints5, color1 = _e.color1, color2 = _e.color2, color3 = _e.color3, color4 = _e.color4, color5 = _e.color5, startFillColor1 = _e.startFillColor1, endFillColor1 = _e.endFillColor1, startOpacity1 = _e.startOpacity1, endOpacity1 = _e.endOpacity1, startFillColor2 = _e.startFillColor2, endFillColor2 = _e.endFillColor2, startOpacity2 = _e.startOpacity2, endOpacity2 = _e.endOpacity2, startFillColor3 = _e.startFillColor3, endFillColor3 = _e.endFillColor3, startOpacity3 = _e.startOpacity3, endOpacity3 = _e.endOpacity3, startFillColor4 = _e.startFillColor4, endFillColor4 = _e.endFillColor4, startOpacity4 = _e.startOpacity4, endOpacity4 = _e.endOpacity4, startFillColor5 = _e.startFillColor5, endFillColor5 = _e.endFillColor5, startOpacity5 = _e.startOpacity5, endOpacity5 = _e.endOpacity5, arrowStrokeWidth1 = _e.arrowStrokeWidth1, arrowStrokeColor1 = _e.arrowStrokeColor1, arrowFillColor1 = _e.arrowFillColor1, arrowStrokeWidth2 = _e.arrowStrokeWidth2, arrowStrokeColor2 = _e.arrowStrokeColor2, arrowFillColor2 = _e.arrowFillColor2, arrowStrokeWidth3 = _e.arrowStrokeWidth3, arrowStrokeColor3 = _e.arrowStrokeColor3, arrowFillColor3 = _e.arrowFillColor3, arrowStrokeWidth4 = _e.arrowStrokeWidth4, arrowStrokeColor4 = _e.arrowStrokeColor4, arrowFillColor4 = _e.arrowFillColor4, arrowStrokeWidth5 = _e.arrowStrokeWidth5, arrowStrokeColor5 = _e.arrowStrokeColor5, arrowFillColor5 = _e.arrowFillColor5, arrowStrokeWidthsFromSet = _e.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _e.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _e.arrowFillColorsFromSet, secondaryLineConfig = _e.secondaryLineConfig, gradientDirection = _e.gradientDirection, stepHeight = _e.stepHeight, noOfSectionsBelowXAxis = _e.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, pointerConfig = _e.pointerConfig, pointerHeight = _e.pointerHeight, pointerWidth = _e.pointerWidth, pointerRadius = _e.pointerRadius, pointerColor = _e.pointerColor, pointerComponent = _e.pointerComponent, showPointerStrip = _e.showPointerStrip, pointerStripHeight = _e.pointerStripHeight, pointerStripWidth = _e.pointerStripWidth, pointerStripColor = _e.pointerStripColor, pointerStripUptoDataPoint = _e.pointerStripUptoDataPoint, pointerLabelComponent = _e.pointerLabelComponent, stripOverPointer = _e.stripOverPointer, shiftPointerLabelX = _e.shiftPointerLabelX, shiftPointerLabelY = _e.shiftPointerLabelY, pointerLabelWidth = _e.pointerLabelWidth, pointerLabelHeight = _e.pointerLabelHeight, autoAdjustPointerLabelPosition = _e.autoAdjustPointerLabelPosition, pointerVanishDelay = _e.pointerVanishDelay, activatePointersOnLongPress = _e.activatePointersOnLongPress, activatePointersInstantlyOnTouch = _e.activatePointersInstantlyOnTouch, activatePointersDelay = _e.activatePointersDelay, persistPointer = _e.persistPointer, resetPointerIndexOnRelease = _e.resetPointerIndexOnRelease, hidePointers = _e.hidePointers, hidePointer1 = _e.hidePointer1, hidePointer2 = _e.hidePointer2, hidePointer3 = _e.hidePointer3, hidePointer4 = _e.hidePointer4, hidePointer5 = _e.hidePointer5, cumulativeSpacing1 = _e.cumulativeSpacing1, cumulativeSpacing2 = _e.cumulativeSpacing2, cumulativeSpacing3 = _e.cumulativeSpacing3, cumulativeSpacing4 = _e.cumulativeSpacing4, cumulativeSpacing5 = _e.cumulativeSpacing5, cumulativeSpacingSecondary = _e.cumulativeSpacingSecondary, cumulativeSpacingForSet = _e.cumulativeSpacingForSet, hideSecondaryPointer = _e.hideSecondaryPointer, hidePointerDataPointForMissingValues = _e.hidePointerDataPointForMissingValues, pointerEvents = _e.pointerEvents, focusEnabled = _e.focusEnabled, showDataPointOnFocus = _e.showDataPointOnFocus, showStripOnFocus = _e.showStripOnFocus, stripOverDataPoints = _e.stripOverDataPoints, showTextOnFocus = _e.showTextOnFocus, showDataPointLabelOnFocus = _e.showDataPointLabelOnFocus, stripHeight = _e.stripHeight, stripWidth = _e.stripWidth, stripColor = _e.stripColor, stripOpacity = _e.stripOpacity, stripStrokeDashArray = _e.stripStrokeDashArray, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, lineGradient = _e.lineGradient, lineGradientDirection = _e.lineGradientDirection, lineGradientStartColor = _e.lineGradientStartColor, lineGradientEndColor = _e.lineGradientEndColor, barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, areaChart = _e.areaChart, mostNegativeValue = _e.mostNegativeValue, strips = _e.strips, lastLineNumber = _e.lastLineNumber, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, stepValue = _e.stepValue, pointerItemLocal = _e.pointerItemLocal;
+    var _e = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _e.curveType, scrollX = _e.scrollX, setScrollX = _e.setScrollX, arrow1Points = _e.arrow1Points, arrow2Points = _e.arrow2Points, arrow3Points = _e.arrow3Points, arrow4Points = _e.arrow4Points, arrow5Points = _e.arrow5Points, secondaryArrowPoints = _e.secondaryArrowPoints, pointerIndex = _e.pointerIndex, setPointerIndex = _e.setPointerIndex, pointerX = _e.pointerX, setPointerX = _e.setPointerX, pointerY = _e.pointerY, setPointerY = _e.setPointerY, pointerItem = _e.pointerItem, setPointerItem = _e.setPointerItem, pointerY2 = _e.pointerY2, setPointerY2 = _e.setPointerY2, pointerItem2 = _e.pointerItem2, setPointerItem2 = _e.setPointerItem2, pointerY3 = _e.pointerY3, setPointerY3 = _e.setPointerY3, pointerItem3 = _e.pointerItem3, setPointerItem3 = _e.setPointerItem3, pointerY4 = _e.pointerY4, setPointerY4 = _e.setPointerY4, pointerItem4 = _e.pointerItem4, setPointerItem4 = _e.setPointerItem4, pointerY5 = _e.pointerY5, setPointerY5 = _e.setPointerY5, pointerYsForDataSet = _e.pointerYsForDataSet, setPointerYsForDataSet = _e.setPointerYsForDataSet, pointerItem5 = _e.pointerItem5, setPointerItem5 = _e.setPointerItem5, secondaryPointerY = _e.secondaryPointerY, setSecondaryPointerY = _e.setSecondaryPointerY, secondaryPointerItem = _e.secondaryPointerItem, setSecondaryPointerItem = _e.setSecondaryPointerItem, pointerItemsForSet = _e.pointerItemsForSet, setPointerItemsForSet = _e.setPointerItemsForSet, secondaryPointerItemsForSet = _e.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _e.setSecondaryPointerItemsForSet, responderStartTime = _e.responderStartTime, setResponderStartTime = _e.setResponderStartTime, setResponderActive = _e.setResponderActive, points = _e.points, points2 = _e.points2, points3 = _e.points3, points4 = _e.points4, points5 = _e.points5, secondaryPoints = _e.secondaryPoints, fillPoints = _e.fillPoints, fillPoints2 = _e.fillPoints2, fillPoints3 = _e.fillPoints3, fillPoints4 = _e.fillPoints4, fillPoints5 = _e.fillPoints5, secondaryFillPoints = _e.secondaryFillPoints, pointsFromSet = _e.pointsFromSet, fillPointsFromSet = _e.fillPointsFromSet, arrowPointsFromSet = _e.arrowPointsFromSet, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, containerHeight = _e.containerHeight, data = _e.data, data2 = _e.data2, data3 = _e.data3, data4 = _e.data4, data5 = _e.data5, secondaryData = _e.secondaryData, dataSet = _e.dataSet, data0 = _e.data0, labelsExtraHeight = _e.labelsExtraHeight, animationDuration = _e.animationDuration, onDataChangeAnimationDuration = _e.onDataChangeAnimationDuration, animateTogether = _e.animateTogether, renderDataPointsAfterAnimationEnds = _e.renderDataPointsAfterAnimationEnds, animateOnDataChange = _e.animateOnDataChange, startIndex1 = _e.startIndex1, startIndex2 = _e.startIndex2, endIndex1 = _e.endIndex1, endIndex2 = _e.endIndex2, startIndex3 = _e.startIndex3, endIndex3 = _e.endIndex3, startIndex4 = _e.startIndex4, endIndex4 = _e.endIndex4, startIndex5 = _e.startIndex5, endIndex5 = _e.endIndex5, initialSpacing = _e.initialSpacing, thickness = _e.thickness, yAxisLabelWidth = _e.yAxisLabelWidth, spacing = _e.spacing, xAxisThickness = _e.xAxisThickness, dataPointsHeight1 = _e.dataPointsHeight1, dataPointsWidth1 = _e.dataPointsWidth1, dataPointsRadius1 = _e.dataPointsRadius1, dataPointsColor1 = _e.dataPointsColor1, dataPointsShape1 = _e.dataPointsShape1, dataPointsHeight2 = _e.dataPointsHeight2, dataPointsWidth2 = _e.dataPointsWidth2, dataPointsRadius2 = _e.dataPointsRadius2, dataPointsColor2 = _e.dataPointsColor2, dataPointsShape2 = _e.dataPointsShape2, dataPointsHeight3 = _e.dataPointsHeight3, dataPointsWidth3 = _e.dataPointsWidth3, dataPointsRadius3 = _e.dataPointsRadius3, dataPointsColor3 = _e.dataPointsColor3, dataPointsShape3 = _e.dataPointsShape3, dataPointsHeight4 = _e.dataPointsHeight4, dataPointsWidth4 = _e.dataPointsWidth4, dataPointsRadius4 = _e.dataPointsRadius4, dataPointsColor4 = _e.dataPointsColor4, dataPointsShape4 = _e.dataPointsShape4, dataPointsHeight5 = _e.dataPointsHeight5, dataPointsWidth5 = _e.dataPointsWidth5, dataPointsRadius5 = _e.dataPointsRadius5, dataPointsColor5 = _e.dataPointsColor5, dataPointsShape5 = _e.dataPointsShape5, getIsNthAreaChart = _e.getIsNthAreaChart, textFontSize1 = _e.textFontSize1, textFontSize2 = _e.textFontSize2, textFontSize3 = _e.textFontSize3, textFontSize4 = _e.textFontSize4, textFontSize5 = _e.textFontSize5, textColor1 = _e.textColor1, textColor2 = _e.textColor2, textColor3 = _e.textColor3, textColor4 = _e.textColor4, textColor5 = _e.textColor5, totalWidth = _e.totalWidth, maxValue = _e.maxValue, overflowTop = _e.overflowTop, extendedContainerHeight = _e.extendedContainerHeight, getX = _e.getX, getY = _e.getY, getSecondaryY = _e.getSecondaryY, secondaryMaxValue = _e.secondaryMaxValue, showValuesAsDataPointsText = _e.showValuesAsDataPointsText, thickness1 = _e.thickness1, thickness2 = _e.thickness2, thickness3 = _e.thickness3, thickness4 = _e.thickness4, thickness5 = _e.thickness5, zIndex1 = _e.zIndex1, zIndex2 = _e.zIndex2, zIndex3 = _e.zIndex3, zIndex4 = _e.zIndex4, zIndex5 = _e.zIndex5, strokeDashArray1 = _e.strokeDashArray1, strokeDashArray2 = _e.strokeDashArray2, strokeDashArray3 = _e.strokeDashArray3, strokeDashArray4 = _e.strokeDashArray4, strokeDashArray5 = _e.strokeDashArray5, strokeLinecap1 = _e.strokeLinecap1, strokeLinecap2 = _e.strokeLinecap2, strokeLinecap3 = _e.strokeLinecap3, strokeLinecap4 = _e.strokeLinecap4, strokeLinecap5 = _e.strokeLinecap5, rotateLabel = _e.rotateLabel, isAnimated = _e.isAnimated, hideDataPoints1 = _e.hideDataPoints1, hideDataPoints2 = _e.hideDataPoints2, hideDataPoints3 = _e.hideDataPoints3, hideDataPoints4 = _e.hideDataPoints4, hideDataPoints5 = _e.hideDataPoints5, color1 = _e.color1, color2 = _e.color2, color3 = _e.color3, color4 = _e.color4, color5 = _e.color5, startFillColor1 = _e.startFillColor1, endFillColor1 = _e.endFillColor1, startOpacity1 = _e.startOpacity1, endOpacity1 = _e.endOpacity1, startFillColor2 = _e.startFillColor2, endFillColor2 = _e.endFillColor2, startOpacity2 = _e.startOpacity2, endOpacity2 = _e.endOpacity2, startFillColor3 = _e.startFillColor3, endFillColor3 = _e.endFillColor3, startOpacity3 = _e.startOpacity3, endOpacity3 = _e.endOpacity3, startFillColor4 = _e.startFillColor4, endFillColor4 = _e.endFillColor4, startOpacity4 = _e.startOpacity4, endOpacity4 = _e.endOpacity4, startFillColor5 = _e.startFillColor5, endFillColor5 = _e.endFillColor5, startOpacity5 = _e.startOpacity5, endOpacity5 = _e.endOpacity5, arrowStrokeWidth1 = _e.arrowStrokeWidth1, arrowStrokeColor1 = _e.arrowStrokeColor1, arrowFillColor1 = _e.arrowFillColor1, arrowStrokeWidth2 = _e.arrowStrokeWidth2, arrowStrokeColor2 = _e.arrowStrokeColor2, arrowFillColor2 = _e.arrowFillColor2, arrowStrokeWidth3 = _e.arrowStrokeWidth3, arrowStrokeColor3 = _e.arrowStrokeColor3, arrowFillColor3 = _e.arrowFillColor3, arrowStrokeWidth4 = _e.arrowStrokeWidth4, arrowStrokeColor4 = _e.arrowStrokeColor4, arrowFillColor4 = _e.arrowFillColor4, arrowStrokeWidth5 = _e.arrowStrokeWidth5, arrowStrokeColor5 = _e.arrowStrokeColor5, arrowFillColor5 = _e.arrowFillColor5, arrowStrokeWidthsFromSet = _e.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _e.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _e.arrowFillColorsFromSet, secondaryLineConfig = _e.secondaryLineConfig, gradientDirection = _e.gradientDirection, stepHeight = _e.stepHeight, noOfSectionsBelowXAxis = _e.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, pointerConfig = _e.pointerConfig, pointerHeight = _e.pointerHeight, pointerWidth = _e.pointerWidth, pointerRadius = _e.pointerRadius, pointerColor = _e.pointerColor, pointerComponent = _e.pointerComponent, showPointerStrip = _e.showPointerStrip, pointerStripHeight = _e.pointerStripHeight, pointerStripWidth = _e.pointerStripWidth, pointerStripColor = _e.pointerStripColor, pointerStripUptoDataPoint = _e.pointerStripUptoDataPoint, pointerLabelComponent = _e.pointerLabelComponent, stripOverPointer = _e.stripOverPointer, shiftPointerLabelX = _e.shiftPointerLabelX, shiftPointerLabelY = _e.shiftPointerLabelY, pointerLabelWidth = _e.pointerLabelWidth, pointerLabelHeight = _e.pointerLabelHeight, autoAdjustPointerLabelPosition = _e.autoAdjustPointerLabelPosition, pointerVanishDelay = _e.pointerVanishDelay, activatePointersOnLongPress = _e.activatePointersOnLongPress, activatePointersInstantlyOnTouch = _e.activatePointersInstantlyOnTouch, activatePointersDelay = _e.activatePointersDelay, persistPointer = _e.persistPointer, resetPointerIndexOnRelease = _e.resetPointerIndexOnRelease, hidePointers = _e.hidePointers, hidePointer1 = _e.hidePointer1, hidePointer2 = _e.hidePointer2, hidePointer3 = _e.hidePointer3, hidePointer4 = _e.hidePointer4, hidePointer5 = _e.hidePointer5, cumulativeSpacing1 = _e.cumulativeSpacing1, cumulativeSpacing2 = _e.cumulativeSpacing2, cumulativeSpacing3 = _e.cumulativeSpacing3, cumulativeSpacing4 = _e.cumulativeSpacing4, cumulativeSpacing5 = _e.cumulativeSpacing5, cumulativeSpacingSecondary = _e.cumulativeSpacingSecondary, cumulativeSpacingForSet = _e.cumulativeSpacingForSet, hideSecondaryPointer = _e.hideSecondaryPointer, hidePointerDataPointForMissingValues = _e.hidePointerDataPointForMissingValues, pointerEvents = _e.pointerEvents, focusEnabled = _e.focusEnabled, showDataPointOnFocus = _e.showDataPointOnFocus, showStripOnFocus = _e.showStripOnFocus, stripOverDataPoints = _e.stripOverDataPoints, showTextOnFocus = _e.showTextOnFocus, showDataPointLabelOnFocus = _e.showDataPointLabelOnFocus, stripHeight = _e.stripHeight, stripWidth = _e.stripWidth, stripColor = _e.stripColor, stripOpacity = _e.stripOpacity, stripStrokeDashArray = _e.stripStrokeDashArray, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, lineGradient = _e.lineGradient, lineGradientDirection = _e.lineGradientDirection, lineGradientStartColor = _e.lineGradientStartColor, lineGradientEndColor = _e.lineGradientEndColor, barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, areaChart = _e.areaChart, mostNegativeValue = _e.mostNegativeValue, strips = _e.strips, lastLineNumber = _e.lastLineNumber, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, stepValue = _e.stepValue, pointerItemLocal = _e.pointerItemLocal, allowFontScaling = _e.allowFontScaling;
     var svgHeight = containerHeightIncludingBelowXAxis +
         ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : dataPointsRadius1);
     var secondaryXAxis = props.secondaryXAxis, intersectionAreaConfig = props.intersectionAreaConfig;
@@ -217,13 +217,11 @@ export var LineChart = function (props) {
                         : 54 - xAxisTextNumberOfLines * 18,
                     zIndex: 10,
                     width: spacing + labelsExtraHeight,
-                    left: index === 0 && initialSpacing < 10
-                        ? initialSpacing / 2 + spacing * index - spacing / 2 + 4
-                        : initialSpacing / 2 + spacing * index - spacing / 2 - 10,
+                    left: spacing * index - spacing / 2,
                     height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
                 },
                 rotateLabel && { transform: [{ rotate: '60deg' }] },
-            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label })) }));
     };
     var renderAnimatedLabel = function (top, index, label, labelTextStyle, labelComponent) {
         var _a, _b;
@@ -242,13 +240,11 @@ export var LineChart = function (props) {
                             : 54 - xAxisTextNumberOfLines * 18,
                     zIndex: 10,
                     width: spacing,
-                    left: index === 0 && initialSpacing < 10
-                        ? initialSpacing / 2 + spacing * index - spacing / 2 + 4
-                        : initialSpacing / 2 + spacing * index - spacing / 2 - 10,
+                    left: spacing * index - spacing / 2,
                     opacity: appearingOpacity,
                 },
                 rotateLabel && { transform: [{ rotate: '60deg' }] },
-            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { allowFontScaling: allowFontScaling, style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
     };
     var onStripPress = function (item, index) {
         if (props.focusedDataPointIndex === undefined || !props.onFocus) {

package/dist/PieChart/index.d.ts

@@ -1,2 +1,2 @@
 import { PieChartPropsType } from 'gifted-charts-core';
-export declare const PieChart: (props: PieChartPropsType) => import("react/jsx-runtime").JSX.Element | null;
+export declare const PieChart: (props: PieChartPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/PieChart/index.js

@@ -28,7 +28,7 @@ var __read = (this && this.__read) || function (o, n) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, Text } from 'react-native';
 import { PieChartMain } from './main';
-import { usePieChart } from 'gifted-charts-core';
+import { pieColors, usePieChart } from 'gifted-charts-core';
 import { isWebApp } from '../utils';
 import { useState } from 'react';
 export var PieChart = function (props) {
@@ -36,6 +36,7 @@ export var PieChart = function (props) {
     var _b = __read(useState(0), 2), touchX = _b[0], setTouchX = _b[1];
     var _c = __read(useState(0), 2), touchY = _c[0], setTouchY = _c[1];
     var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
+        var _a, _b;
         if (props.centerLabelComponent || (donut && !isDataShifted)) {
             return (_jsx(View, { style: [
                     {
@@ -79,7 +80,7 @@ export var PieChart = function (props) {
                         borderRightWidth: 0.5,
                         borderRightColor: innerCircleColor,
                     },
-                ], children: _jsx(View, { style: { marginTop: semiCircle ? -0.5 * innerRadius : 0 }, children: props.centerLabelComponent ? props.centerLabelComponent(selectedIndex) : null }) }));
+                ], pointerEvents: "box-none", children: _jsx(View, { style: { marginTop: semiCircle ? -0.5 * innerRadius : 0 }, children: (_b = (_a = props.centerLabelComponent) === null || _a === void 0 ? void 0 : _a.call(props, selectedIndex)) !== null && _b !== void 0 ? _b : null }) }));
         }
         return null;
     };
@@ -116,8 +117,7 @@ export var PieChart = function (props) {
                         fontStyle: fontStyle,
                     }, children: getTooltipText(tooltipSelectedIndex) }) })) }));
     };
-    if (!total)
-        return null;
+    // if (!total) return null;
     return (_jsxs(View, { style: {
             height: (radius + extraRadius + paddingVertical / 2) *
                 (props.semiCircle ? 1 : 2),
@@ -132,7 +132,10 @@ export var PieChart = function (props) {
                     left: -extraRadius,
                     zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
                 }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: [
-                        __assign({}, props.data[selectedIndex]),
+                        __assign(__assign({}, props.data[selectedIndex]), { color: props.showGradient
+                                ? "url(#grad".concat(selectedIndex, ")")
+                                : props.data[selectedIndex].color ||
+                                    pieColors[selectedIndex % 9] }),
                         {
                             value: total - props.data[selectedIndex].value,
                             peripheral: true,

package/dist/PieChart/main.js

@@ -43,7 +43,7 @@ export var PieChartMain = function (props) {
         setTouchX(x);
         setTouchY(y);
         var r = Math.sqrt(Math.pow((x - cx), 2) + Math.pow((y - cy), 2));
-        if (r > radius)
+        if (r > radius || (donut && r < innerRadius))
             return;
         var a = Math.atan2(y - cy, x - cx);
         for (var index = 0; index < data.length; index++) {
@@ -88,7 +88,7 @@ export var PieChartMain = function (props) {
                         vertAdjustment +
                         (vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadius) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadius) * 2 + strokeWidth + paddingHorizontal, children: [_jsx(Defs, { children: data.map(function (item, index) {
                                 return (_jsxs(RadialGradient, { id: 'grad' + index, cx: "50%", cy: "50%", rx: "50%", ry: "50%", fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: item.gradientCenterColor || gradientCenterColor, stopOpacity: "1" }), _jsx(Stop, { offset: "100%", stopColor: item.color || pieColors[index % 9], stopOpacity: "1" })] }, index + ''));
-                            }) }), data.length === 1 ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
+                            }) }), (data.length === 1 || !total) ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
                                     ? "url(#grad".concat(0, ")")
                                     : data[0].color || pieColors[0 % 9] }) })) : (data.map(function (item, index) {
                             var _a = coordinates[index], sx = _a.sx, sy = _a.sy, ax = _a.ax, ay = _a.ay;

package/dist/RadarChart/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect } from 'react';
 import { Animated, View } from 'react-native';
-import Svg, { Line, Polygon, Circle, Text as SvgText, Defs, RadialGradient, Stop, } from 'react-native-svg';
+import Svg, { Line, Polygon, Circle, Text as SvgText, Defs, RadialGradient, Stop, TSpan, } from 'react-native-svg';
 import { useRadarChart } from 'gifted-charts-core';
 export var RadarChart = function (props) {
     var _a = useRadarChart(props), data = _a.data, dataSet = _a.dataSet, center = _a.center, radius = _a.radius, chartSize = _a.chartSize, polarToCartesian = _a.polarToCartesian, labels = _a.labels, labelConfigArray = _a.labelConfigArray, labelsPositionOffset = _a.labelsPositionOffset, dataLabelsConfigArray = _a.dataLabelsConfigArray, maxValue = _a.maxValue, dataLabels = _a.dataLabels, dataLabelsArray = _a.dataLabelsArray, gridSections = _a.gridSections, gridFill = _a.gridFill, fontSize = _a.fontSize, stroke = _a.stroke, textAnchor = _a.textAnchor, alignmentBaseline = _a.alignmentBaseline, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, dataLabelsPositionOffset = _a.dataLabelsPositionOffset, polygonStroke = _a.polygonStroke, polygonStrokeWidth = _a.polygonStrokeWidth, polygonStrokeDashArray = _a.polygonStrokeDashArray, polygonFill = _a.polygonFill, polygonGradientColor = _a.polygonGradientColor, polygonShowGradient = _a.polygonShowGradient, polygonOpacity = _a.polygonOpacity, polygonGradientOpacity = _a.polygonGradientOpacity, polygonIsAnimated = _a.polygonIsAnimated, polygonAnimationDuration = _a.polygonAnimationDuration, asterLinesStroke = _a.asterLinesStroke, asterLinesStrokeWidth = _a.asterLinesStrokeWidth, asterLinesStrokeDashArray = _a.asterLinesStrokeDashArray, polygonPoints = _a.polygonPoints, initialPolygonPoints = _a.initialPolygonPoints, polygonPointsArray = _a.polygonPointsArray, initialPolygonPointsArray = _a.initialPolygonPointsArray, polygonConfigArray = _a.polygonConfigArray, angleStep = _a.angleStep, circular = _a.circular, hideGrid = _a.hideGrid, hideLabels = _a.hideLabels, hideAsterLines = _a.hideAsterLines, getGridLevelProps = _a.getGridLevelProps, animateTogether = _a.animateTogether;
@@ -108,6 +108,6 @@ export var RadarChart = function (props) {
                         var colorLocal = (_h = (_g = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : stroke;
                         var textAnchorLocal = (_k = (_j = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _j === void 0 ? void 0 : _j.textAnchor) !== null && _k !== void 0 ? _k : textAnchor;
                         var alignmentBaselineLocal = (_m = (_l = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _l === void 0 ? void 0 : _l.alignmentBaseline) !== null && _m !== void 0 ? _m : alignmentBaseline;
-                        return (_jsx(SvgText, { x: x, y: y, fontSize: fontSizeLocal, fontWeight: fontWeightLocal, fontFamily: fontFamilyLocal, fill: colorLocal, textAnchor: (_o = textAnchorLocal) !== null && _o !== void 0 ? _o : 'middle', alignmentBaseline: (_p = alignmentBaselineLocal) !== null && _p !== void 0 ? _p : 'middle', children: category }, "label-".concat(index)));
+                        return (_jsx(SvgText, { x: x, y: y, fontSize: fontSizeLocal, fontWeight: fontWeightLocal, fontFamily: fontFamilyLocal, fill: colorLocal, textAnchor: (_o = textAnchorLocal) !== null && _o !== void 0 ? _o : 'middle', alignmentBaseline: (_p = alignmentBaselineLocal) !== null && _p !== void 0 ? _p : 'middle', children: category.split('\n').map(function (line, idx) { return (_jsx(TSpan, { x: x, dy: idx === 0 ? 0 : fontSizeLocal, children: line }, idx)); }) }, "label-".concat(index)));
                     })] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.63",
+  "version": "1.4.65",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -26,7 +26,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.65"
+    "gifted-charts-core": "0.1.67"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",