react-native-gifted-charts 1.4.70 → 1.4.72

package/README.md

@@ -20,7 +20,7 @@
     <img src="/demos/redditLogo.png" height="auto" width="32" height="32" />
   </a>
 </p>
-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.
+The most loved library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and Bubble charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
 
 ### Yet another chart library? Why?
 
@@ -94,7 +94,7 @@ Please note that `react-native-svg` and `react-native-linear-gradient`/`expo-lin
 The simplest usage of various types of charts can be done as below-
 
 ```js
-import { BarChart, LineChart, PieChart, PopulationPyramid, RadarChart } from "react-native-gifted-charts";
+import { BarChart, LineChart, PieChart, PopulationPyramid, RadarChart, BubbleChart } from "react-native-gifted-charts";
 
 // ...
 const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
@@ -104,6 +104,10 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 <PieChart data = {data} />
 <PopulationPyramid data = {[{left:10,right:12}, {left:9,right:8}]} />
 <RadarChart data = {[50, 80, 90, 70]} />
+<BubbleChart data = {
+  {x: 20, y: 4, r: 10},
+  {x: 40, y: 6, r: 20},
+} />
 
 // For Horizontal Bar chart, just add the prop horizontal to the <BarChart/> component
 
@@ -124,7 +128,8 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 **2. [LineChart and AreaChart props](docs/LineChart/LineChartProps.md)** \
 **3. [PieChart and DonutChart props](docs/PieChart/PieChartProps.md)** \
 **4. [Population Pyramid props](docs/PopulationPyramid/PopulationPyramid.md)** \
-**5. [RadarChart props](docs/RadarChart/RadarChartProps.md)**
+**5. [RadarChart props](docs/RadarChart/RadarChartProps.md)** \
+**6. [BubbleChart props](docs/BubbleChart/BubbleChartProps.md)**
 
 ## 🤝 Contributing
 

package/dist/BarChart/RenderStackBars.js

@@ -18,7 +18,7 @@ import { useRenderStackBars, BarDefaults, } from 'gifted-charts-core';
 import Tooltip from '../Components/BarSpecificComponents/tooltip';
 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;
+    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, rtl = props.rtl, 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;
     var _e = useRenderStackBars(__assign(__assign({}, props), { secondaryStepHeight: secondaryStepHeight, secondaryStepValue: secondaryStepValue, secondaryNegativeStepHeight: secondaryNegativeStepHeight, secondaryNegativeStepValue: secondaryNegativeStepValue })), containsNegativeValue = _e.containsNegativeValue, noAnimation = _e.noAnimation, localBarInnerComponent = _e.localBarInnerComponent, borderRadius = _e.borderRadius, borderTopLeftRadius = _e.borderTopLeftRadius, borderTopRightRadius = _e.borderTopRightRadius, borderBottomLeftRadius = _e.borderBottomLeftRadius, borderBottomRightRadius = _e.borderBottomRightRadius, disablePress = _e.disablePress, totalHeight = _e.totalHeight, height = _e.height, setHeight = _e.setHeight, getBarHeight = _e.getBarHeight, getPosition = _e.getPosition, lowestBarPosition = _e.lowestBarPosition, getStackBorderRadii = _e.getStackBorderRadii, tooltipProps = _e.tooltipProps;
     var renderLabel = function (label, labelTextStyle) {
         return (_jsx(TouchableOpacity, { disabled: disablePress || (stackHighlightEnabled && !highlightEnabled), activeOpacity: activeOpacity, onPress: function () {
@@ -49,8 +49,8 @@ var RenderStackBars = function (props) {
                         props.labelWidth ||
                         item.stacks[0].barWidth ||
                         props.barWidth ||
-                        30) +
-                        spacing / 2,
+                        30) + spacing,
+                    left: spacing / -2,
                     position: 'absolute',
                     bottom: !labelsDistanceFromXaxis && autoShiftLabelsForNegativeStacks
                         ? containsNegativeValue
@@ -65,7 +65,11 @@ var RenderStackBars = function (props) {
                     : horizontal
                         ? { transform: [{ rotate: '-90deg' }] }
                         : {},
-            ], children: item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
+            ], children: item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
     };
     var animatedHeight = useRef(new Animated.Value(0)).current;
     var elevate = function () {

package/dist/BubbleChart/index.d.ts

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

package/dist/BubbleChart/index.js

@@ -0,0 +1,398 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BubbleDefaults, useBubbleChart, } from 'gifted-charts-core';
+import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, I18nManager, Text, View, } from 'react-native';
+import { Circle, ForeignObject, Rect, Svg, Line } from 'react-native-svg';
+import { isWebApp, screenWidth } from '../utils';
+var AnimatedCircle = Animated.createAnimatedComponent(Circle);
+var AnimatedRect = Animated.createAnimatedComponent(Rect);
+var AnimatedLine = Animated.createAnimatedComponent(Line);
+export var BubbleChart = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var secondaryXAxis = props.secondaryXAxis;
+    var _g = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), barAndLineChartsWrapperProps = _g.barAndLineChartsWrapperProps, totalWidth = _g.totalWidth, animationDuration = _g.animationDuration, _h = _g.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _h === void 0 ? 0 : _h, getY = _g.getY, getX = _g.getX, maxValue = _g.maxValue, selectedIndex = _g.selectedIndex, setSelectedIndex = _g.setSelectedIndex, showTextOnFocus = _g.showTextOnFocus, focusEnabled = _g.focusEnabled, focusTogether = _g.focusTogether, selectedLineNumber = _g.selectedLineNumber, lastLineNumber = _g.lastLineNumber, initialSpacing = _g.initialSpacing, spacing = _g.spacing, containerHeight = _g.containerHeight, handleFocus = _g.handleFocus, handleUnFocus = _g.handleUnFocus, isAnimated = _g.isAnimated, showBubbleOnFocus = _g.showBubbleOnFocus, showBubbleLabelOnFocus = _g.showBubbleLabelOnFocus, bubblesShape = _g.bubblesShape, bubblesWidth = _g.bubblesWidth, bubblesHeight = _g.bubblesHeight, bubblesColor = _g.bubblesColor, bubblesRadius = _g.bubblesRadius, labelFontSize = _g.labelFontSize, labelTextStyle = _g.labelTextStyle, startIndex = _g.startIndex, endIndex = _g.endIndex, showValuesAsBubbleLabels = _g.showValuesAsBubbleLabels, hideBubbles = _g.hideBubbles, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, labelsExtraHeight = _g.labelsExtraHeight, xAxisThickness = _g.xAxisThickness, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, rotateLabel = _g.rotateLabel, allowFontScaling = _g.allowFontScaling, borderColor = _g.borderColor, borderWidth = _g.borderWidth, opacity = _g.opacity, xAxisLabelTexts = _g.xAxisLabelTexts, showRegressionLine = _g.showRegressionLine, regressionLineX1 = _g.regressionLineX1, regressionLineY1 = _g.regressionLineY1, regressionLineX2 = _g.regressionLineX2, regressionLineY2 = _g.regressionLineY2, regressionLineConfig = _g.regressionLineConfig;
+    var progress = useRef(new Animated.Value(0)).current;
+    var AnimatedRegressionLineX = useRef(new Animated.Value(0)).current;
+    var AnimatedRegressionLineY = useRef(new Animated.Value(0)).current;
+    var scrollRef = (_b = props.scrollRef) !== null && _b !== void 0 ? _b : useRef(null);
+    var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var appearingOpacity = opacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+    });
+    // const appearRegressionLine = RegressionLine.interpolate({
+    //   inputRange:[0,1],
+    //   outputRange:[regressionLineX1,regressionLineX2]
+    // })
+    var growingRadii = useMemo(function () {
+        var _a;
+        return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (item) {
+            var _a;
+            return progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, (_a = item.r) !== null && _a !== void 0 ? _a : bubblesRadius],
+            });
+        });
+    }, [props.data, progress]);
+    var growingHeight = ((_c = props.data) !== null && _c !== void 0 ? _c : []).map(function (_, i) {
+        var _a, _b;
+        return progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].bubbleHeight) !== null && _b !== void 0 ? _b : bubblesHeight],
+        });
+    });
+    var growingWidth = ((_d = props.data) !== null && _d !== void 0 ? _d : []).map(function (_, i) {
+        var _a, _b;
+        return progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].bubbleWidth) !== null && _b !== void 0 ? _b : bubblesWidth],
+        });
+    });
+    var appearingDataPoints = pointsOpacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, opacity],
+    });
+    var drawRegressionLine = useCallback(function () {
+        if (!regressionLineConfig.isAnimated)
+            return;
+        AnimatedRegressionLineX.setValue(regressionLineX1);
+        AnimatedRegressionLineY.setValue(regressionLineY1);
+        Animated.parallel([
+            Animated.timing(AnimatedRegressionLineX, {
+                toValue: regressionLineX2,
+                duration: regressionLineConfig.animationDuration,
+                easing: Easing.linear,
+                useNativeDriver: false, // SVG props
+            }),
+            Animated.timing(AnimatedRegressionLineY, {
+                toValue: regressionLineY2,
+                duration: regressionLineConfig.animationDuration,
+                easing: Easing.linear,
+                useNativeDriver: false, // SVG props
+            }),
+        ]).start();
+    }, [regressionLineConfig]);
+    var decreaseWidth = useCallback(function () {
+        widthValue.setValue(0);
+        Animated.timing(widthValue, {
+            toValue: totalWidth,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue]);
+    var labelsAppear = useCallback(function () {
+        opacityValue.setValue(0);
+        Animated.timing(opacityValue, {
+            toValue: 1,
+            duration: 500,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [opacityValue]);
+    var radiiGrow = useCallback(function () {
+        if (bubblesShape === 'rectangular')
+            return;
+        progress.setValue(0);
+        Animated.timing(progress, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: false,
+        }).start();
+    }, [progress, animationDuration]);
+    var bubblesHeightsWidthsGrow = useCallback(function () {
+        if (bubblesShape !== 'rectangular')
+            return;
+        progress.setValue(0);
+        Animated.timing(progress, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: false,
+        }).start();
+    }, [progress, animationDuration]);
+    var dataPointsAppear = useCallback(function () {
+        pointsOpacityValue.setValue(0);
+        Animated.timing(pointsOpacityValue, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [pointsOpacityValue]);
+    useEffect(function () {
+        if (isAnimated) {
+            decreaseWidth();
+            labelsAppear();
+            dataPointsAppear();
+            if (bubblesShape === 'rectangular') {
+                bubblesHeightsWidthsGrow();
+            }
+            else {
+                radiiGrow();
+            }
+        }
+        if (regressionLineConfig.isAnimated) {
+            drawRegressionLine();
+        }
+    }, [isAnimated, bubblesShape]);
+    var svgHeight = containerHeightIncludingBelowXAxis + ((_e = props.overflowBottom) !== null && _e !== void 0 ? _e : 0);
+    // const onStripPress = (item: any, index: number) => {
+    //   if (props.focusedBubbleIndex === undefined || !props.onFocus) {
+    //     setSelectedIndex(index);
+    //   }
+    //   if (props.onFocus) {
+    //     props.onFocus(item, index);
+    //   }
+    // };
+    var renderLabel = function (top, index, label) {
+        var _a, _b;
+        return (_jsx(View, { style: [
+                {
+                    position: 'absolute',
+                    bottom: top
+                        ? containerHeight +
+                            60 +
+                            ((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _a !== void 0 ? _a : 15)
+                        : -xAxisTextNumberOfLines * 18 - (containerHeight - 200) / 20,
+                    zIndex: 10,
+                    width: spacing + labelsExtraHeight,
+                    left: initialSpacing + spacing * index - spacing / 2,
+                    height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: _jsx(Text, { style: { textAlign: 'center' }, allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
+    };
+    var renderAnimatedLabel = function (top, index, label) {
+        var _a, _b;
+        return (_jsx(Animated.View, { style: [
+                {
+                    height: rotateLabel
+                        ? 40
+                        : ((_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18),
+                    position: 'absolute',
+                    bottom: top
+                        ? containerHeight +
+                            60 +
+                            ((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
+                        : rotateLabel
+                            ? 10
+                            : -xAxisTextNumberOfLines * 18,
+                    zIndex: 10,
+                    width: spacing,
+                    left: initialSpacing + spacing * index - spacing / 2,
+                    opacity: appearingOpacity,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: _jsx(Text, { allowFontScaling: allowFontScaling, style: { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
+    };
+    var renderDataPoints = function (hideBubbles, dataForRender, originalDataFromProps, bubsShape, bubsWidth, bubsHeight, bubsColor, bubsRadius, labelFontSize, 
+    // textColor: any,
+    // textFontSize: any,
+    // textFontFamily: any,
+    // textFontWeight: any,
+    startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
+        var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
+        return dataForRender.map(function (item, index) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            if (index < startIndex || index > endIndex)
+                return null;
+            if (item.hideBubble) {
+                return null;
+            }
+            var bubblesShape, bubblesWidth, bubblesHeight, dataPointsColor, bubblesRadius, text, customBubble, labelComponent;
+            if (index === selectedIndex &&
+                (focusTogether || key === selectedLineNumber)) {
+                bubblesShape =
+                    item.focusedBubbleShape ||
+                        props.focusedBubbleShape ||
+                        item.bubbleShape ||
+                        bubsShape;
+                bubblesWidth =
+                    item.focusedBubbleWidth ||
+                        props.focusedBubbleWidth ||
+                        item.bubbleWidth ||
+                        bubsWidth;
+                bubblesHeight =
+                    item.focusedBubbleHeight ||
+                        props.focusedBubbleHeight ||
+                        item.bubbleHeight ||
+                        bubsHeight;
+                dataPointsColor =
+                    item.focusedBubbleColor ||
+                        props.focusedBubbleColor ||
+                        BubbleDefaults.focusedBubbleColor;
+                bubblesRadius =
+                    (_c = (_b = (_a = item.focusedBubbleRadius) !== null && _a !== void 0 ? _a : props.focusedBubbleRadius) !== null && _b !== void 0 ? _b : item.r) !== null && _c !== void 0 ? _c : bubsRadius;
+                if (showTextOnFocus) {
+                    text = item.label;
+                }
+                customBubble =
+                    item.focusedCustomBubble ||
+                        props.focusedCustomBubble ||
+                        item.customBubble ||
+                        props.customBubble;
+                labelComponent =
+                    item.focusedLabelComponent ||
+                        item.labelComponent ||
+                        props.focusedLabelComponent ||
+                        props.labelComponent;
+            }
+            else {
+                bubblesShape = item.bubbleShape || bubsShape;
+                bubblesWidth = item.bubbleWidth || bubsWidth;
+                bubblesHeight = item.bubbleHeight || bubsHeight;
+                dataPointsColor = item.bubbleColor || bubsColor;
+                bubblesRadius = (_d = item.r) !== null && _d !== void 0 ? _d : bubsRadius;
+                if (showTextOnFocus) {
+                    text = '';
+                }
+                customBubble = item.customBubble || props.customBubble;
+                labelComponent = item.labelComponent || props.labelComponent;
+            }
+            if (showValuesAsDataPointsText) {
+                text = originalDataFromProps[index].y;
+            }
+            var labelWidth = item.labelWidth
+                ? item.labelWidth
+                : props.labelWidth
+                    ? props.labelWidth
+                    : 30;
+            var textLabel = !showTextOnFocus && !showValuesAsDataPointsText
+                ? item.label
+                : text.toString();
+            var textStyle = ((_f = (_e = item.labelTextStyle) !== null && _e !== void 0 ? _e : labelTextStyle) !== null && _f !== void 0 ? _f : {});
+            var fontSize = textStyle.fontSize || item.labelFontSize || labelFontSize;
+            var defaultFontSize = 14;
+            return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx(Rect, { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none', onPressIn: function (evt) {
+                                var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
+                                handleFocus(index);
+                            }, onPressOut: handleUnFocus })) : null })) : null, hideBubbles ? null : (_jsxs(_Fragment, { children: [customBubble ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index), y: getYOrSecondaryY(item.y) - bubblesHeight / 2, children: customBubble(item, index) })) : (_jsx(Animated.View, { style: {
+                                    position: 'absolute',
+                                    // height: svgHeight,
+                                    // width: totalWidth,
+                                    left: getX(index) - bubblesWidth / 2,
+                                    top: getYOrSecondaryY(item.y) - bubblesHeight / 2,
+                                    opacity: isAnimated ? appearingOpacity : 1,
+                                }, children: customBubble(item, index) }))) : null, bubblesShape === 'rectangular' ? (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedRect, { x: getX(index) - bubblesWidth / 2, y: getYOrSecondaryY(item.y) - bubblesHeight / 2, width: isAnimated ? growingWidth[index] : bubblesWidth, height: isAnimated ? growingHeight[index] : bubblesHeight, opacity: isAnimated ? appearingDataPoints : opacity, fill: showBubbleOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, stroke: (_g = item.borderColor) !== null && _g !== void 0 ? _g : borderColor, strokeWidth: (_h = item.borderWidth) !== null && _h !== void 0 ? _h : borderWidth, strokeOpacity: (_k = (_j = item.borderOpacity) !== null && _j !== void 0 ? _j : props.borderOpacity) !== null && _k !== void 0 ? _k : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
+                                        item.onPress
+                                            ? item.onPress(item, index)
+                                            : props.onPress
+                                                ? props.onPress(item, index)
+                                                : focusEnabled
+                                                    ? handleFocus(index)
+                                                    : null;
+                                    }, onPressOut: function () {
+                                        if (!item.onPress && !props.onPress && focusEnabled) {
+                                            handleUnFocus();
+                                        }
+                                    } })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX(index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: showBubbleOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (_l = item.borderColor) !== null && _l !== void 0 ? _l : borderColor, strokeWidth: (_m = item.borderWidth) !== null && _m !== void 0 ? _m : borderWidth, strokeOpacity: (_p = (_o = item.borderOpacity) !== null && _o !== void 0 ? _o : props.borderOpacity) !== null && _p !== void 0 ? _p : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
+                                        item.onPress
+                                            ? item.onPress(item, index)
+                                            : props.onPress
+                                                ? props.onPress(item, index)
+                                                : focusEnabled
+                                                    ? handleFocus(index)
+                                                    : null;
+                                    }, onPressOut: function () {
+                                        if (!item.onPress && !props.onPress && focusEnabled) {
+                                            handleUnFocus();
+                                        }
+                                    } })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: labelWidth, x: initialSpacing +
+                                    (item.labelShiftX || props.labelShiftX || 0) -
+                                    labelWidth / 2 +
+                                    spacing * index, y: containerHeight +
+                                    (item.labelShiftY || props.labelShiftY || 0) -
+                                    (item.y * containerHeight) / maxValue, children: showBubbleLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? labelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : labelComponent(item, index) })) : (_jsx(Animated.View, { style: {
+                                    position: 'absolute',
+                                    height: svgHeight,
+                                    width: labelWidth,
+                                    left: getX(index) -
+                                        defaultFontSize / 2 +
+                                        (item.labelShiftX || props.labelShiftX || 0),
+                                    top: getYOrSecondaryY(item.y) -
+                                        defaultFontSize / 1.5 +
+                                        (item.labelShiftY || props.labelShiftY || 0),
+                                    opacity: isAnimated ? appearingDataPoints : 1,
+                                }, children: showBubbleLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? labelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : labelComponent(item, index) }))) : null) : textLabel ? (!showTextOnFocus || index === selectedIndex ? (_jsx(Animated.Text, { style: __assign(__assign({}, textStyle), { position: 'absolute', left: getX(index) -
+                                        Math.min(bubblesRadius, (textLabel.length * fontSize) / 3) +
+                                        (item.labelShiftX || props.labelShiftX || 0), top: getYOrSecondaryY(item.y) -
+                                        fontSize / 1.5 +
+                                        (item.labelShiftY || props.labelShiftY || 0), fontSize: fontSize, opacity: isAnimated
+                                        ? appearingDataPoints
+                                        : ((_q = textStyle.opacity) !== null && _q !== void 0 ? _q : 1) }), children: textLabel })) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
+        });
+    };
+    var svgWrapperViewStyle = {
+        position: 'absolute',
+        top: 0, // 281 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
+        left: 0,
+        zIndex: 1,
+        transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+    };
+    var renderChartContent = function () {
+        return (_jsxs(View, { style: [
+                svgWrapperViewStyle,
+                {
+                    width: totalWidth,
+                    height: containerHeightIncludingBelowXAxis,
+                    //   zIndex,
+                },
+            ], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: [renderDataPoints(hideBubbles, props.data, props.data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, 
+                        // textColor,
+                        // textFontSize,
+                        // textFontFamily,
+                        // textFontWeight,
+                        startIndex, endIndex, false, showValuesAsBubbleLabels, 0), showRegressionLine && (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: regressionLineConfig.isAnimated
+                                ? AnimatedRegressionLineX
+                                : regressionLineX2, y2: regressionLineConfig.isAnimated
+                                ? AnimatedRegressionLineY
+                                : regressionLineY2, stroke: regressionLineConfig.color, strokeOpacity: regressionLineConfig.opacity, strokeWidth: regressionLineConfig.thickness, strokeDasharray: regressionLineConfig.strokeDashArray }))] }), xAxisLabelTexts === null || xAxisLabelTexts === void 0 ? void 0 : xAxisLabelTexts.map(function (label, index) {
+                    return (_jsx(View, { children: isAnimated
+                            ? renderAnimatedLabel(false, index, label)
+                            : renderLabel(false, index, label) }, index));
+                })] }));
+    };
+    var remainingScrollViewProps = {
+        onScroll: function (ev) {
+            var _a;
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev);
+        },
+        bounces: props.bounces,
+        overScrollMode: (_f = props.overScrollMode) !== null && _f !== void 0 ? _f : 'auto',
+    };
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled })));
+};

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js

@@ -36,6 +36,7 @@ export var renderHorizSections = function (props) {
     var negativeSectionsCountDiffPrimaryVsSecondary = secondaryHorizSectionsBelow.length - horizSectionsBelow.length;
     var isLineChart = chartType === chartTypes.LINE;
     var isLineBiColor = chartType === chartTypes.LINE_BI_COLOR;
+    var chartWiseTotalWidth = chartType === chartTypes.BUBBLE ? totalWidth : totalWidth - spacing;
     var renderAxesAndRules = function (index) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         var invertedIndex = horizSections.length - index - 1;
@@ -49,7 +50,7 @@ export var renderHorizSections = function (props) {
                 {
                     borderColor: yAxisColor,
                     backgroundColor: (_a = sectionColors === null || sectionColors === void 0 ? void 0 : sectionColors[invertedIndex]) !== null && _a !== void 0 ? _a : backgroundColor,
-                    width: (props.width || totalWidth - spacing) + endSpacing,
+                    width: (props.width || chartWiseTotalWidth) + endSpacing,
                 },
                 !index ? { height: stepHeight / 2, marginTop: stepHeight / 2 } : null,
                 yAxisSide === yAxisSides.RIGHT
@@ -59,14 +60,14 @@ export var renderHorizSections = function (props) {
                         thickness: xAxisThickness,
                         color: xAxisColor,
                         width: xAxisLength ||
-                            (props.width || totalWidth - spacing) + endSpacing,
+                            (props.width || chartWiseTotalWidth) + endSpacing,
                         dashWidth: dashWidth,
                         dashGap: dashGap,
                         type: xAxisType,
                     } })) : hideRules ? null : (_jsx(Rule, { config: {
                         thickness: (_b = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesThickness) !== null && _b !== void 0 ? _b : rulesThickness,
                         color: (_c = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesColor) !== null && _c !== void 0 ? _c : rulesColor,
-                        width: (_e = (_d = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesLength) !== null && _d !== void 0 ? _d : rulesLength) !== null && _e !== void 0 ? _e : (props.width || totalWidth - spacing) + endSpacing,
+                        width: (_e = (_d = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesLength) !== null && _d !== void 0 ? _d : rulesLength) !== null && _e !== void 0 ? _e : (props.width || chartWiseTotalWidth) + endSpacing,
                         dashWidth: (_f = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashWidth) !== null && _f !== void 0 ? _f : dashWidth,
                         dashGap: (_g = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashGap) !== null && _g !== void 0 ? _g : dashGap,
                         type: (_h = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesType) !== null && _h !== void 0 ? _h : rulesType,
@@ -113,7 +114,7 @@ export var renderHorizSections = function (props) {
                                 ? ((_b = secondaryXAxis.thickness) !== null && _b !== void 0 ? _b : xAxisThickness)
                                 : 0,
                             backgroundColor: backgroundColor,
-                            width: (props.width || totalWidth - spacing) + endSpacing,
+                            width: (props.width || chartWiseTotalWidth) + endSpacing,
                         },
                         yAxisSide === yAxisSides.RIGHT
                             ? { borderRightWidth: yAxisThickness }
@@ -241,7 +242,7 @@ export var renderHorizSections = function (props) {
                             thickness: rulesThickness,
                             color: rulesColor,
                             width: rulesLength ||
-                                (props.width || totalWidth - spacing) + endSpacing,
+                                (props.width || chartWiseTotalWidth) + endSpacing,
                             dashWidth: dashWidth,
                             dashGap: dashGap,
                             type: rulesType,

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

@@ -4,7 +4,7 @@ import Svg, { Path } from 'react-native-svg';
 import { renderSpecificVerticalLines } from './renderSpecificVerticalLines';
 import { renderDataPoints } from './renderDataPoints';
 import { renderSpecificDataPoints } from './renderSpecificDataPoints';
-import { isIos } from '../../../utils';
+import { isIos, isWebApp } from '../../../utils';
 var RenderLineInBarChart = function (props) {
     var _a, _b;
     var yAxisLabelWidth = props.yAxisLabelWidth, initialSpacing = props.initialSpacing, spacing = props.spacing, containerHeight = props.containerHeight, lineConfig = props.lineConfig, maxValue = props.maxValue, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, arrowPoints = props.arrowPoints, data = props.data, totalWidth = props.totalWidth, barWidth = props.barWidth, labelsExtraHeight = props.labelsExtraHeight, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, selectedIndex = props.selectedIndex, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, yAxisOffset = props.yAxisOffset, highlightEnabled = props.highlightEnabled, lowlightOpacity = props.lowlightOpacity;
@@ -15,6 +15,7 @@ var RenderLineInBarChart = function (props) {
             : lowlightOpacity
         : 1;
     var svgHeight = containerHeightIncludingBelowXAxis + labelsExtraHeight;
+    var svgHeightProp = isWebApp ? svgHeight : undefined;
     var dataPointsProps = {
         data: data,
         lineConfig: lineConfig,
@@ -57,11 +58,11 @@ var RenderLineInBarChart = function (props) {
                 position: 'absolute',
                 height: svgHeight,
                 left: 6 - yAxisLabelWidth,
-                bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+                bottom: -10 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
                 width: animatedWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'wheat',
-            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', height: svgHeightProp, width: isWebApp ? animatedWidth : undefined, children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
                         ? renderDataPoints(dataPointsProps)
                         : renderSpecificDataPoints(specificDataPointsProps), lineConfig.showArrow && (_jsx(Path, { d: arrowPoints, fill: (_a = lineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.fillColor, stroke: (_b = lineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, strokeWidth: (_c = lineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.strokeWidth }))] }) }));
     };
@@ -69,13 +70,13 @@ var RenderLineInBarChart = function (props) {
         var _a, _b, _c;
         return (_jsx(View, { pointerEvents: isIos ? 'none' : 'box-none', style: {
                 position: 'absolute',
-                height: containerHeightIncludingBelowXAxis + labelsExtraHeight,
+                height: svgHeight,
                 left: 6 - yAxisLabelWidth,
                 bottom: -10 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
                 width: totalWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'rgba(200,150,150,0.1)'
-            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', height: svgHeightProp, width: isWebApp ? totalWidth : undefined, children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
                         ? renderDataPoints(dataPointsProps)
                         : renderSpecificDataPoints(specificDataPointsProps), lineConfig.showArrow && (_jsx(Path, { d: arrowPoints, fill: (_a = lineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.fillColor, stroke: (_b = lineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, strokeWidth: (_c = lineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.strokeWidth }))] }) }));
     };

package/dist/Components/BarAndLineChartsWrapper/renderVerticalLines.js

@@ -18,17 +18,18 @@ var RenderVerticalLines = function (props) {
     var showVerticalLines = props.showVerticalLines, // this is the value passed by user (note that it's not the effective value that is computed by traversing through the data array and finding any item for which showVerticalLines is true)
     verticalLinesAr = props.verticalLinesAr, verticalLinesSpacing = props.verticalLinesSpacing, spacing = props.spacing, initialSpacing = props.initialSpacing, verticalLinesZIndex = props.verticalLinesZIndex, verticalLinesHeight = props.verticalLinesHeight, verticalLinesThickness = props.verticalLinesThickness, verticalLinesColor = props.verticalLinesColor, verticalLinesStrokeDashArray = props.verticalLinesStrokeDashArray, verticalLinesShift = props.verticalLinesShift, verticalLinesUptoDataPoint = props.verticalLinesUptoDataPoint, verticalLinesStrokeLinecap = props.verticalLinesStrokeLinecap, xAxisThickness = props.xAxisThickness, labelsExtraHeight = props.labelsExtraHeight, containerHeight = props.containerHeight, data = props.data, stackData = props.stackData, barWidth = props.barWidth, maxValue = props.maxValue, chartType = props.chartType, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, totalWidth = props.totalWidth, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift;
     var getHeightOfVerticalLine = function (index) {
+        var _a, _b, _c, _d, _e;
         if (verticalLinesUptoDataPoint) {
             if (index < data.length) {
                 return ((data[index].value * containerHeight) / maxValue - xAxisThickness);
             }
             else {
-                return verticalLinesHeight !== null && verticalLinesHeight !== void 0 ? verticalLinesHeight : 0;
+                return (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.verticalLineHeight) !== null && _b !== void 0 ? _b : verticalLinesHeight) !== null && _c !== void 0 ? _c : 0;
             }
         }
         else {
-            return (verticalLinesHeight ||
-                containerHeightIncludingBelowXAxis - xAxisThickness);
+            return ((_e = (_d = data === null || data === void 0 ? void 0 : data[index]) === null || _d === void 0 ? void 0 : _d.verticalLineHeight) !== null && _e !== void 0 ? _e : (verticalLinesHeight ||
+                containerHeightIncludingBelowXAxis - xAxisThickness));
         }
     };
     var extendedContainerHeight = containerHeight + 10 + labelsExtraHeight;
@@ -46,6 +47,8 @@ var RenderVerticalLines = function (props) {
             zIndex: verticalLinesZIndex || -1,
         }, children: _jsx(Svg, { height: containerHeightIncludingBelowXAxis, width: totalWidth, children: verticalLinesAr.map(function (item, index) {
                 var _a, _b, _c, _d, _e, _f;
+                if (!index && chartType === chartTypes.BUBBLE)
+                    return null;
                 var totalSpacing = initialSpacing;
                 if (verticalLinesSpacing) {
                     totalSpacing = verticalLinesSpacing * (index + 1);
@@ -101,7 +104,7 @@ var RenderVerticalLines = function (props) {
                     ? ((_a = item.verticalLineShift) !== null && _a !== void 0 ? _a : verticalLinesShift)
                     : verticalLinesShift;
                 var x = verticalLinesShiftLocal +
-                    1 +
+                    2 +
                     (chartType === chartTypes.BAR // This logic exists because we have renderSpecificVerticalLines in Line Charts which I would love to deprecate at the earliest, because that functionality gets handled here elegantly
                         ? totalSpacing - 1
                         : verticalLinesSpacing

package/dist/LineChart/index.js

@@ -674,6 +674,18 @@ export var LineChart = function (props) {
                     ? renderDataPoints(secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6666)
                     : null] }));
     };
+    var areaComponent = function (isNthAreaChart, startFillColor, endFillColor, startOpacity, endOpacity, uniqueId, fillPoints, startIndex, endIndex, propsData, clipRangeId, currentLineThickness, spreadAreaData, spacingArray, spreadAreaColor, spreadAreaOpacity) {
+        // For Area Chart
+        return (_jsxs(_Fragment, { children: [isNthAreaChart &&
+                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity, uniqueId), isNthAreaChart &&
+                    (startIndex !== 0 || endIndex !== data.length - 1) &&
+                    getClipRange(startIndex, endIndex, clipRangeId), isNthAreaChart ? (props.interpolateMissingValues === false &&
+                    propsData.some(function (item) { return isNaN(item.value); }) ? null : animateOnDataChange && animatedFillPath ? (_jsx(AnimatedPath, { onPress: props.onChartAreaPress, d: animatedFillPath, fill: props.areaGradientId
+                        ? "url(#".concat(props.areaGradientId, ")")
+                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
+                        ? "url(#".concat(props.areaGradientId, ")")
+                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, spreadAreaData && (_jsx(Path, { d: getSpreadAreaPath(spreadAreaData, getX, getY, spacingArray, props.curvature, curveType), fill: spreadAreaColor || 'rgba(0,0,255,0.2)', stroke: "none", opacity: spreadAreaOpacity !== null && spreadAreaOpacity !== void 0 ? spreadAreaOpacity : 0.3 }))] }));
+    };
     var lineSvgComponent = function (points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray) {
         var _a, _b;
         if (!points)
@@ -714,7 +726,7 @@ export var LineChart = function (props) {
         }
         return (_jsxs(Svg, { height: svgHeight, 
             // width={widthValue}
-            onPress: props.onBackgroundPress, children: [lineGradient && getLineGradientComponent(), points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (ar.map(function (item, index) {
+            onPress: props.onBackgroundPress, children: [areaComponent(isNthAreaChart, startFillColor, endFillColor, startOpacity, endOpacity, uniqueId, fillPoints, startIndex, endIndex, propsData, clipRangeId, currentLineThickness, spreadAreaData, spacingArray, spreadAreaColor, spreadAreaOpacity), lineGradient && getLineGradientComponent(), points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (ar.map(function (item, index) {
                     var lineSvgProps = {
                         d: item.d,
                         fill: 'none',
@@ -733,15 +745,7 @@ export var LineChart = function (props) {
                         lineSvgProps.strokeDasharray = item.strokeDashArray;
                     }
                     return _jsx(Path, __assign({}, lineSvgProps), index);
-                })) : animateOnDataChange && animatedPath ? (_jsx(AnimatedPath, __assign({}, lineSvgPropsOuter))) : colors ? (_jsx(Defs, { children: _jsx(Mask, { id: "pathMask", children: _jsx(Path, __assign({}, lineSvgPropsOuter, { stroke: colors ? 'white' : color })) }) })) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), colors && getColorBackRects(), isNthAreaChart &&
-                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity, uniqueId), isNthAreaChart &&
-                    (startIndex !== 0 || endIndex !== data.length - 1) &&
-                    getClipRange(startIndex, endIndex, clipRangeId), isNthAreaChart ? (props.interpolateMissingValues === false &&
-                    propsData.some(function (item) { return isNaN(item.value); }) ? null : animateOnDataChange && animatedFillPath ? (_jsx(AnimatedPath, { onPress: props.onChartAreaPress, d: animatedFillPath, fill: props.areaGradientId
-                        ? "url(#".concat(props.areaGradientId, ")")
-                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
-                        ? "url(#".concat(props.areaGradientId, ")")
-                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, spreadAreaData && (_jsx(Path, { d: getSpreadAreaPath(spreadAreaData, getX, getY, spacingArray, props.curvature, curveType), fill: spreadAreaColor || 'rgba(0,0,255,0.2)', stroke: "none", opacity: spreadAreaOpacity !== null && spreadAreaOpacity !== void 0 ? spreadAreaOpacity : 0.3 })), renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+                })) : animateOnDataChange && animatedPath ? (_jsx(AnimatedPath, __assign({}, lineSvgPropsOuter))) : colors ? (_jsx(Defs, { children: _jsx(Mask, { id: "pathMask", children: _jsx(Path, __assign({}, lineSvgPropsOuter, { stroke: colors ? 'white' : color })) }) })) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), colors && getColorBackRects(), renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
                     return renderSpecificVerticalLines(set === null || set === void 0 ? void 0 : set.data, cumulativeSpacingForSet[index]);
                 })) !== null && _b !== void 0 ? _b : null, isAnimated && !renderDataPointsAfterAnimationEnds // in this condition onPress won't work properly in case of multi-line, so it's suggested to use either renderDataPointsAfterAnimationEnds prop if you want to use onPress for data points
                     ? renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key)
@@ -749,17 +753,6 @@ export var LineChart = function (props) {
                         ? renderDataPointsForEachLine()
                         : null, showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
     };
-    // const getClosestValueFromSpacingArray = (spacingArray:number[],x:number):number => {
-    //   let dif=0,prevDif=0,i;
-    //   for(i=0;i<spacingArray.length;i++){
-    //     dif = Math.abs(spacingArray[i]-x)
-    //     if(prevDif!=0 && prevDif<dif){
-    //       break;
-    //     }
-    //     prevDif = dif;
-    //   }
-    //   return i-1;
-    // }
     var activatePointers = function (x) {
         var _a;
         var factor = (x - initialSpacing) / ((_a = props.spacing1) !== null && _a !== void 0 ? _a : spacing); // getClosestValueFromSpacingArray(cumulativeSpacing1,x-initialSpacing)

package/dist/RadarChart/index.js

@@ -1,10 +1,10 @@
 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, TSpan, } from 'react-native-svg';
+import Svg, { Line, Polygon, Circle, Text as SvgText, Defs, RadialGradient, Stop, TSpan, G, } 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, startAngle = _a.startAngle;
+    var _a = useRadarChart(props), data = _a.data, dataSet = _a.dataSet, center = _a.center, radius = _a.radius, chartSize = _a.chartSize, chartContainerProps = _a.chartContainerProps, 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, startAngle = _a.startAngle;
     var initialPolygonPointsAr = initialPolygonPoints.split(' ');
     var finalPolygonPointsAr = polygonPoints.split(' ');
     var AnimatedPolygon = Animated.createAnimatedComponent(Polygon);
@@ -64,50 +64,54 @@ export var RadarChart = function (props) {
     });
     /******************************************************************************************/
     /******************************************************************************************/
-    return (_jsx(View, { style: { justifyContent: 'center', alignItems: 'center' }, children: _jsxs(Svg, { height: chartSize, width: chartSize, children: [(polygonConfigArray === null || polygonConfigArray === void 0 ? void 0 : polygonConfigArray.length) ? (polygonConfigArray.map(function (polygonConfigItem, index) {
-                    var fill = polygonConfigItem.fill, gradientColor = polygonConfigItem.gradientColor, opacity = polygonConfigItem.opacity, gradientOpacity = polygonConfigItem.gradientOpacity;
-                    return (_jsx(Defs, { children: _jsxs(RadialGradient, { id: "polygon-".concat(index), cx: center, cy: center, rx: radius, ry: radius, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: gradientColor, stopOpacity: gradientOpacity }), _jsx(Stop, { offset: "100%", stopColor: fill, stopOpacity: opacity })] }, "polygon-".concat(index)) }, "defs-".concat(index)));
-                })) : polygonShowGradient ? (_jsx(Defs, { children: _jsxs(RadialGradient, { id: 'polygon', cx: center, cy: center, rx: radius, ry: radius, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: polygonGradientColor, stopOpacity: polygonGradientOpacity }), _jsx(Stop, { offset: "100%", stopColor: polygonFill, stopOpacity: polygonOpacity })] }, 'polygon') })) : null, hideGrid
-                    ? null
-                    : gridSections.map(function (l, ind) {
-                        var _a = getGridLevelProps(l, ind), level = _a.level, gridGradientColorLocal = _a.gridGradientColorLocal, gridFillColorLocal = _a.gridFillColorLocal, gridOpacityLocal = _a.gridOpacityLocal, gridGradientOpacityLocal = _a.gridGradientOpacityLocal, gridStrokeLocal = _a.gridStrokeLocal, gridStrokeWidthLocal = _a.gridStrokeWidthLocal, gridShowGradientLocal = _a.gridShowGradientLocal, gridStrokeDashArrayLocal = _a.gridStrokeDashArrayLocal, levelPolygonPoints = _a.levelPolygonPoints, r = _a.r;
-                        return (_jsxs(Fragment, { children: [_jsx(Defs, { children: _jsxs(RadialGradient, { id: 'grad' + level, cx: center, cy: center, rx: r, ry: r, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "".concat(100 - 100 / level, "%"), stopColor: gridGradientColorLocal, stopOpacity: gridGradientOpacityLocal }), _jsx(Stop, { offset: "100%", stopColor: gridFillColorLocal, stopOpacity: gridOpacityLocal })] }, level + '') }), circular ? (_jsx(Circle, { cx: center, cy: center, r: r, stroke: gridStrokeLocal, strokeWidth: gridStrokeWidthLocal, strokeDasharray: gridStrokeDashArrayLocal, fill: gridShowGradientLocal ? "url(#grad".concat(level, ")") : gridFill }, "grid-".concat(level))) : (_jsx(Polygon, { points: levelPolygonPoints, stroke: gridStrokeLocal, strokeWidth: gridStrokeWidthLocal, strokeDasharray: gridStrokeDashArrayLocal, fill: gridShowGradientLocal ? "url(#grad".concat(level, ")") : gridFill }, "grid-".concat(level)))] }, "fragment-".concat(level)));
-                    }), dataSet ? (polygonConfigArray === null || polygonConfigArray === void 0 ? void 0 : polygonConfigArray.map(function (item, index) {
-                    var polygonPoints = polygonPointsArray[index];
-                    var animatedPolygonPoints = animatedPathsForSet[index];
-                    var stroke = item.stroke, strokeWidth = item.strokeWidth, strokeDashArray = item.strokeDashArray, fill = item.fill, showGradient = item.showGradient, opacity = item.opacity, _a = item.isAnimated, isAnimated = _a === void 0 ? polygonIsAnimated : _a;
-                    return (_jsx(AnimatedPolygon, { points: isAnimated ? animatedPolygonPoints : polygonPoints, fill: showGradient ? 'url(#polygon)' : fill, stroke: stroke, strokeWidth: strokeWidth, strokeDasharray: strokeDashArray, opacity: opacity }, "polygon-".concat(index)));
-                })) : (_jsx(AnimatedPolygon, { points: polygonIsAnimated ? animatedPaths : polygonPoints, fill: polygonShowGradient ? 'url(#polygon)' : polygonFill, stroke: polygonStroke, strokeWidth: polygonStrokeWidth, strokeDasharray: polygonStrokeDashArray, opacity: polygonOpacity })), (dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) && (dataLabelsArray === null || dataLabelsArray === void 0 ? void 0 : dataLabelsArray.length) ? (dataLabelsArray === null || dataLabelsArray === void 0 ? void 0 : dataLabelsArray.map(function (labels, index) {
-                    var dataItem = dataSet[index];
-                    return labels === null || labels === void 0 ? void 0 : labels.map(function (label, labelIndex) {
-                        var _a, _b, _c;
-                        var _d = polarToCartesian(labelIndex * angleStep, dataItem[labelIndex] + dataLabelsPositionOffset), x = _d.x, y = _d.y;
-                        var _e = (_a = dataLabelsConfigArray === null || dataLabelsConfigArray === void 0 ? void 0 : dataLabelsConfigArray[labelIndex]) !== null && _a !== void 0 ? _a : {}, dataLabelsFontSize = _e.fontSize, dataLabelsColor = _e.stroke, dataLabelsTextAnchor = _e.textAnchor, dataLabelsAlignmentBaseline = _e.alignmentBaseline, dataLabelsFontWeight = _e.fontWeight, dataLabelsFontFamily = _e.fontFamily;
-                        return (_jsx(SvgText, { x: x, y: y, fontSize: dataLabelsFontSize, fill: dataLabelsColor, fontWeight: dataLabelsFontWeight, fontFamily: dataLabelsFontFamily, textAnchor: (_b = dataLabelsTextAnchor) !== null && _b !== void 0 ? _b : 'middle', alignmentBaseline: (_c = dataLabelsAlignmentBaseline) !== null && _c !== void 0 ? _c : 'middle', children: label }, "data-label-".concat(index, "-").concat(labelIndex)));
-                    });
-                })) : (dataLabels === null || dataLabels === void 0 ? void 0 : dataLabels.length) ? (_jsx(SvgText, { children: dataLabels.map(function (label, index) {
-                        var _a, _b, _c;
-                        var _d = polarToCartesian(index * angleStep, data[index] + dataLabelsPositionOffset), x = _d.x, y = _d.y;
-                        var _e = (_a = dataLabelsConfigArray === null || dataLabelsConfigArray === void 0 ? void 0 : dataLabelsConfigArray[index]) !== null && _a !== void 0 ? _a : {}, dataLabelsFontSize = _e.fontSize, dataLabelsColor = _e.stroke, dataLabelsTextAnchor = _e.textAnchor, dataLabelsAlignmentBaseline = _e.alignmentBaseline, dataLabelsFontWeight = _e.fontWeight, dataLabelsFontFamily = _e.fontFamily;
-                        return (_jsx(SvgText, { x: x, y: y, fontSize: dataLabelsFontSize, fill: dataLabelsColor, fontWeight: dataLabelsFontWeight, fontFamily: dataLabelsFontFamily, textAnchor: (_b = dataLabelsTextAnchor) !== null && _b !== void 0 ? _b : 'middle', alignmentBaseline: (_c = dataLabelsAlignmentBaseline) !== null && _c !== void 0 ? _c : 'middle', children: label }, "data-label-".concat(index)));
-                    }) })) : null, hideAsterLines
-                    ? null
-                    : labels.map(function (_, index) {
-                        var angle = index * angleStep + startAngle;
-                        var _a = polarToCartesian(angle, maxValue), x = _a.x, y = _a.y;
-                        return (_jsx(Line, { x1: center, y1: center, x2: x, y2: y, stroke: asterLinesStroke, strokeWidth: asterLinesStrokeWidth, strokeDasharray: asterLinesStrokeDashArray }, "axis-".concat(index)));
-                    }), hideLabels
-                    ? null
-                    : labels.map(function (category, index) {
-                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                        var angle = index * angleStep + startAngle;
-                        var _q = polarToCartesian(angle, maxValue + labelsPositionOffset), x = _q.x, y = _q.y; // Offset for label position
-                        var fontSizeLocal = (_b = (_a = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : fontSize;
-                        var fontWeightLocal = (_d = (_c = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : fontWeight;
-                        var fontFamilyLocal = (_f = (_e = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _e === void 0 ? void 0 : _e.fontFamily) !== null && _f !== void 0 ? _f : fontFamily;
-                        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.split('\n').map(function (line, idx) { return (_jsx(TSpan, { x: x, dy: idx === 0 ? 0 : fontSizeLocal, children: line }, idx)); }) }, "label-".concat(index)));
-                    })] }) }));
+    return (_jsx(View, { style: { justifyContent: 'center', alignItems: 'center' }, children: _jsx(Svg, { height: chartContainerProps.height, width: chartContainerProps.width, style: { backgroundColor: chartContainerProps.backgroundColor }, children: _jsxs(G, { translateX: chartContainerProps.shiftX, translateY: chartContainerProps.shiftY, children: [(polygonConfigArray === null || polygonConfigArray === void 0 ? void 0 : polygonConfigArray.length) ? (polygonConfigArray.map(function (polygonConfigItem, index) {
+                        var fill = polygonConfigItem.fill, gradientColor = polygonConfigItem.gradientColor, opacity = polygonConfigItem.opacity, gradientOpacity = polygonConfigItem.gradientOpacity;
+                        return (_jsx(Defs, { children: _jsxs(RadialGradient, { id: "polygon-".concat(index), cx: center, cy: center, rx: radius, ry: radius, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: gradientColor, stopOpacity: gradientOpacity }), _jsx(Stop, { offset: "100%", stopColor: fill, stopOpacity: opacity })] }, "polygon-".concat(index)) }, "defs-".concat(index)));
+                    })) : polygonShowGradient ? (_jsx(Defs, { children: _jsxs(RadialGradient, { id: 'polygon', cx: center, cy: center, rx: radius, ry: radius, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: polygonGradientColor, stopOpacity: polygonGradientOpacity }), _jsx(Stop, { offset: "100%", stopColor: polygonFill, stopOpacity: polygonOpacity })] }, 'polygon') })) : null, hideGrid
+                        ? null
+                        : gridSections.map(function (l, ind) {
+                            var _a = getGridLevelProps(l, ind), level = _a.level, gridGradientColorLocal = _a.gridGradientColorLocal, gridFillColorLocal = _a.gridFillColorLocal, gridOpacityLocal = _a.gridOpacityLocal, gridGradientOpacityLocal = _a.gridGradientOpacityLocal, gridStrokeLocal = _a.gridStrokeLocal, gridStrokeWidthLocal = _a.gridStrokeWidthLocal, gridShowGradientLocal = _a.gridShowGradientLocal, gridStrokeDashArrayLocal = _a.gridStrokeDashArrayLocal, levelPolygonPoints = _a.levelPolygonPoints, r = _a.r;
+                            return (_jsxs(Fragment, { children: [_jsx(Defs, { children: _jsxs(RadialGradient, { id: 'grad' + level, cx: center, cy: center, rx: r, ry: r, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "".concat(100 - 100 / level, "%"), stopColor: gridGradientColorLocal, stopOpacity: gridGradientOpacityLocal }), _jsx(Stop, { offset: "100%", stopColor: gridFillColorLocal, stopOpacity: gridOpacityLocal })] }, level + '') }), circular ? (_jsx(Circle, { cx: center, cy: center, r: r, stroke: gridStrokeLocal, strokeWidth: gridStrokeWidthLocal, strokeDasharray: gridStrokeDashArrayLocal, fill: gridShowGradientLocal
+                                            ? "url(#grad".concat(level, ")")
+                                            : gridFill }, "grid-".concat(level))) : (_jsx(Polygon, { points: levelPolygonPoints, stroke: gridStrokeLocal, strokeWidth: gridStrokeWidthLocal, strokeDasharray: gridStrokeDashArrayLocal, fill: gridShowGradientLocal
+                                            ? "url(#grad".concat(level, ")")
+                                            : gridFill }, "grid-".concat(level)))] }, "fragment-".concat(level)));
+                        }), dataSet ? (polygonConfigArray === null || polygonConfigArray === void 0 ? void 0 : polygonConfigArray.map(function (item, index) {
+                        var polygonPoints = polygonPointsArray[index];
+                        var animatedPolygonPoints = animatedPathsForSet[index];
+                        var stroke = item.stroke, strokeWidth = item.strokeWidth, strokeDashArray = item.strokeDashArray, fill = item.fill, showGradient = item.showGradient, opacity = item.opacity, _a = item.isAnimated, isAnimated = _a === void 0 ? polygonIsAnimated : _a;
+                        return (_jsx(AnimatedPolygon, { points: isAnimated ? animatedPolygonPoints : polygonPoints, fill: showGradient ? 'url(#polygon)' : fill, stroke: stroke, strokeWidth: strokeWidth, strokeDasharray: strokeDashArray, opacity: opacity }, "polygon-".concat(index)));
+                    })) : (_jsx(AnimatedPolygon, { points: polygonIsAnimated ? animatedPaths : polygonPoints, fill: polygonShowGradient ? 'url(#polygon)' : polygonFill, stroke: polygonStroke, strokeWidth: polygonStrokeWidth, strokeDasharray: polygonStrokeDashArray, opacity: polygonOpacity })), (dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) && (dataLabelsArray === null || dataLabelsArray === void 0 ? void 0 : dataLabelsArray.length) ? (dataLabelsArray === null || dataLabelsArray === void 0 ? void 0 : dataLabelsArray.map(function (labels, index) {
+                        var dataItem = dataSet[index];
+                        return labels === null || labels === void 0 ? void 0 : labels.map(function (label, labelIndex) {
+                            var _a, _b, _c;
+                            var _d = polarToCartesian(labelIndex * angleStep, dataItem[labelIndex] + dataLabelsPositionOffset), x = _d.x, y = _d.y;
+                            var _e = (_a = dataLabelsConfigArray === null || dataLabelsConfigArray === void 0 ? void 0 : dataLabelsConfigArray[labelIndex]) !== null && _a !== void 0 ? _a : {}, dataLabelsFontSize = _e.fontSize, dataLabelsColor = _e.stroke, dataLabelsTextAnchor = _e.textAnchor, dataLabelsAlignmentBaseline = _e.alignmentBaseline, dataLabelsFontWeight = _e.fontWeight, dataLabelsFontFamily = _e.fontFamily;
+                            return (_jsx(SvgText, { x: x, y: y, fontSize: dataLabelsFontSize, fill: dataLabelsColor, fontWeight: dataLabelsFontWeight, fontFamily: dataLabelsFontFamily, textAnchor: (_b = dataLabelsTextAnchor) !== null && _b !== void 0 ? _b : 'middle', alignmentBaseline: (_c = dataLabelsAlignmentBaseline) !== null && _c !== void 0 ? _c : 'middle', children: label }, "data-label-".concat(index, "-").concat(labelIndex)));
+                        });
+                    })) : (dataLabels === null || dataLabels === void 0 ? void 0 : dataLabels.length) ? (_jsx(SvgText, { children: dataLabels.map(function (label, index) {
+                            var _a, _b, _c;
+                            var _d = polarToCartesian(index * angleStep, data[index] + dataLabelsPositionOffset), x = _d.x, y = _d.y;
+                            var _e = (_a = dataLabelsConfigArray === null || dataLabelsConfigArray === void 0 ? void 0 : dataLabelsConfigArray[index]) !== null && _a !== void 0 ? _a : {}, dataLabelsFontSize = _e.fontSize, dataLabelsColor = _e.stroke, dataLabelsTextAnchor = _e.textAnchor, dataLabelsAlignmentBaseline = _e.alignmentBaseline, dataLabelsFontWeight = _e.fontWeight, dataLabelsFontFamily = _e.fontFamily;
+                            return (_jsx(SvgText, { x: x, y: y, fontSize: dataLabelsFontSize, fill: dataLabelsColor, fontWeight: dataLabelsFontWeight, fontFamily: dataLabelsFontFamily, textAnchor: (_b = dataLabelsTextAnchor) !== null && _b !== void 0 ? _b : 'middle', alignmentBaseline: (_c = dataLabelsAlignmentBaseline) !== null && _c !== void 0 ? _c : 'middle', children: label }, "data-label-".concat(index)));
+                        }) })) : null, hideAsterLines
+                        ? null
+                        : labels.map(function (_, index) {
+                            var angle = index * angleStep + startAngle;
+                            var _a = polarToCartesian(angle, maxValue), x = _a.x, y = _a.y;
+                            return (_jsx(Line, { x1: center, y1: center, x2: x, y2: y, stroke: asterLinesStroke, strokeWidth: asterLinesStrokeWidth, strokeDasharray: asterLinesStrokeDashArray }, "axis-".concat(index)));
+                        }), hideLabels
+                        ? null
+                        : labels.map(function (category, index) {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                            var angle = index * angleStep + startAngle;
+                            var _q = polarToCartesian(angle, maxValue + labelsPositionOffset), x = _q.x, y = _q.y; // Offset for label position
+                            var fontSizeLocal = (_b = (_a = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : fontSize;
+                            var fontWeightLocal = (_d = (_c = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : fontWeight;
+                            var fontFamilyLocal = (_f = (_e = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _e === void 0 ? void 0 : _e.fontFamily) !== null && _f !== void 0 ? _f : fontFamily;
+                            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.split('\n').map(function (line, idx) { return (_jsx(TSpan, { x: x, dy: idx === 0 ? 0 : fontSizeLocal, children: line }, idx)); }) }, "label-".concat(index)));
+                        })] }) }) }));
 };

package/dist/index.d.ts

@@ -5,4 +5,5 @@ export { LineChart } from './LineChart';
 export { LineChartBicolor } from './LineChart/LineChartBicolor';
 export { PopulationPyramid } from './PopulationPyramid';
 export { RadarChart } from './RadarChart';
-export { type barDataItem, type barDataItemNullSafe, type stackDataItem, type BarChartPropsType, type StackedBarChartPropsType, type pieDataItem, type PieChartPropsType, type lineDataItem, type lineDataItemNullSafe, type bicolorLineDataItem, type LineChartPropsType, type LineChartBicolorPropsType, type popnPyramidDataItem, type PopulationPyramidPropsType, chartTypes, ruleTypes, CurveType, yAxisSides, EdgePosition, type DataSet, type DataSetNullSafe, type Linecap, type RulesConfig, type LabelsPosition, type PointerEvents, type secondaryYAxisType, type secondaryLineConfigType, type referenceConfigType, type arrowConfigType, type Pointer, type HighlightedRange, type LineSegment, type LineProperties, Framework, type XAxisConfig, type DataPointProps, type IntersectionAreaConfig, type LabelLineConfig, type TooltipProps, type RadarChartProps, type PolygonConfig, type GridConfig, type GridSectionConfig, type AsterLinesConfig, } from 'gifted-charts-core';
+export { BubbleChart } from './BubbleChart';
+export { type barDataItem, type barDataItemNullSafe, type stackDataItem, type BarChartPropsType, type StackedBarChartPropsType, type pieDataItem, type PieChartPropsType, type lineDataItem, type lineDataItemNullSafe, type bicolorLineDataItem, type LineChartPropsType, type LineChartBicolorPropsType, type popnPyramidDataItem, type PopulationPyramidPropsType, chartTypes, ruleTypes, CurveType, yAxisSides, EdgePosition, type DataSet, type DataSetNullSafe, type Linecap, type RulesConfig, type LabelsPosition, type PointerEvents, type secondaryYAxisType, type secondaryLineConfigType, type referenceConfigType, type arrowConfigType, type Pointer, type HighlightedRange, type LineSegment, type LineProperties, Framework, type XAxisConfig, type DataPointProps, type IntersectionAreaConfig, type LabelLineConfig, type TooltipProps, type RadarChartProps, type BubbleChartPropsType, type PolygonConfig, type GridConfig, type GridSectionConfig, type AsterLinesConfig, } from 'gifted-charts-core';

package/dist/index.js

@@ -5,4 +5,5 @@ export { LineChart } from './LineChart';
 export { LineChartBicolor } from './LineChart/LineChartBicolor';
 export { PopulationPyramid } from './PopulationPyramid';
 export { RadarChart } from './RadarChart';
+export { BubbleChart } from './BubbleChart';
 export { chartTypes, ruleTypes, CurveType, yAxisSides, EdgePosition, Framework, } from 'gifted-charts-core';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.70",
-  "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.",
+  "version": "1.4.72",
+  "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and Bubble charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -26,7 +26,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.72"
+    "gifted-charts-core": "0.1.75"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",
@@ -79,6 +79,7 @@
     "star",
     "population",
     "pyramid",
+    "bubble",
     "react",
     "react native",
     "react-native"