react-native-gifted-charts 1.4.70 → 1.4.71

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,385 @@
+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 { LineDefaults, 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, Text as CanvasText, } from 'react-native-svg';
+import { isWebApp, screenWidth } from '../utils';
+var AnimatedCircle = Animated.createAnimatedComponent(Circle);
+var AnimatedRect = Animated.createAnimatedComponent(Rect);
+export var BubbleChart = function (props) {
+    var _a, _b, _c, _d;
+    var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var secondaryXAxis = props.secondaryXAxis;
+    var _e = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, totalWidth = _e.totalWidth, animationDuration = _e.animationDuration, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, getY = _e.getY, getX = _e.getX, maxValue = _e.maxValue, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, showTextOnFocus = _e.showTextOnFocus, focusEnabled = _e.focusEnabled, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, lastLineNumber = _e.lastLineNumber, initialSpacing = _e.initialSpacing, spacing = _e.spacing, containerHeight = _e.containerHeight, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, isAnimated = _e.isAnimated, showDataPointOnFocus = _e.showDataPointOnFocus, showDataPointLabelOnFocus = _e.showDataPointLabelOnFocus, dataPointsShape = _e.dataPointsShape, dataPointsWidth = _e.dataPointsWidth, dataPointsHeight = _e.dataPointsHeight, dataPointsColor = _e.dataPointsColor, dataPointsRadius = _e.dataPointsRadius, textColor = _e.textColor, textFontSize = _e.textFontSize, startIndex = _e.startIndex, endIndex = _e.endIndex, showValuesAsDataPointsText = _e.showValuesAsDataPointsText, cumulativeSpacing = _e.cumulativeSpacing, hideDataPoints = _e.hideDataPoints, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, labelsExtraHeight = _e.labelsExtraHeight, xAxisThickness = _e.xAxisThickness, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, rotateLabel = _e.rotateLabel, allowFontScaling = _e.allowFontScaling, borderColor = _e.borderColor, borderWidth = _e.borderWidth, opacity = _e.opacity;
+    var radiiValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
+    var pointsHeightValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
+    var pointsWidthValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
+    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],
+    });
+    var growingRadii = radiiValues.map(function (r, i) {
+        var _a, _b;
+        return r.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].r) !== null && _b !== void 0 ? _b : dataPointsRadius],
+        });
+    });
+    var growingHeight = pointsHeightValues.map(function (h, i) {
+        var _a, _b;
+        return h.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].dataPointHeight) !== null && _b !== void 0 ? _b : dataPointsHeight],
+        });
+    });
+    var growingWidth = pointsHeightValues.map(function (w, i) {
+        var _a, _b;
+        return w.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].dataPointWidth) !== null && _b !== void 0 ? _b : dataPointsWidth],
+        });
+    });
+    var appearingDataPoints = pointsOpacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, opacity],
+    });
+    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 () {
+        radiiValues.forEach(function (radiusValue) {
+            radiusValue.setValue(0);
+            Animated.timing(radiusValue, {
+                toValue: 1,
+                duration: animationDuration,
+                easing: Easing.ease,
+                useNativeDriver: false,
+            }).start();
+        });
+    }, [radiiValues]);
+    var dataPointsHeightsGrow = useCallback(function () {
+        pointsHeightValues.forEach(function (h) {
+            h.setValue(0);
+            Animated.timing(h, {
+                toValue: 1,
+                duration: animationDuration,
+                easing: Easing.ease,
+                useNativeDriver: false,
+            }).start();
+        });
+    }, [pointsHeightValues]);
+    var dataPointsWidthsGrow = useCallback(function () {
+        pointsWidthValues.forEach(function (w) {
+            w.setValue(0);
+            Animated.timing(w, {
+                toValue: 1,
+                duration: animationDuration,
+                easing: Easing.ease,
+                useNativeDriver: false,
+            }).start();
+        });
+    }, [pointsWidthValues]);
+    // const dataPointsHeightGrow
+    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();
+            radiiGrow();
+            dataPointsAppear();
+            if (dataPointsShape === 'rectangular') {
+                dataPointsHeightsGrow();
+                dataPointsWidthsGrow();
+            }
+        }
+    }, [isAnimated, dataPointsShape]);
+    var svgHeight = containerHeightIncludingBelowXAxis + ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : 0);
+    var onStripPress = function (item, index) {
+        if (props.focusedDataPointIndex === undefined || !props.onFocus) {
+            setSelectedIndex(index);
+        }
+        if (props.onFocus) {
+            props.onFocus(item, index);
+        }
+    };
+    var renderLabel = function (top, index, label, labelTextStyle, labelComponent) {
+        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,
+                    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: 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;
+        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: labelComponent ? (labelComponent()) : (_jsx(Text, { allowFontScaling: allowFontScaling, style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
+        var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
+        return dataForRender.map(function (item, index) {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (index < startIndex || index > endIndex)
+                return null;
+            if (item.hideDataPoint) {
+                return null;
+            }
+            var dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, text, customDataPoint, dataPointLabelComponent;
+            if (index === selectedIndex &&
+                (focusTogether || key === selectedLineNumber)) {
+                dataPointsShape =
+                    item.focusedDataPointShape ||
+                        props.focusedDataPointShape ||
+                        item.dataPointShape ||
+                        dataPtsShape;
+                dataPointsWidth =
+                    item.focusedDataPointWidth ||
+                        props.focusedDataPointWidth ||
+                        item.dataPointWidth ||
+                        dataPtsWidth;
+                dataPointsHeight =
+                    item.focusedDataPointHeight ||
+                        props.focusedDataPointHeight ||
+                        item.dataPointHeight ||
+                        dataPtsHeight;
+                dataPointsColor =
+                    item.focusedDataPointColor ||
+                        props.focusedDataPointColor ||
+                        LineDefaults.focusedDataPointColor;
+                dataPointsRadius =
+                    (_c = (_b = (_a = item.focusedDataPointRadius) !== null && _a !== void 0 ? _a : props.focusedDataPointRadius) !== null && _b !== void 0 ? _b : item.r) !== null && _c !== void 0 ? _c : dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = item.dataPointText;
+                }
+                customDataPoint =
+                    item.focusedCustomDataPoint ||
+                        props.focusedCustomDataPoint ||
+                        item.customDataPoint ||
+                        props.customDataPoint;
+                dataPointLabelComponent =
+                    item.focusedDataPointLabelComponent ||
+                        item.dataPointLabelComponent ||
+                        props.focusedDataPointLabelComponent ||
+                        props.dataPointLabelComponent;
+            }
+            else {
+                dataPointsShape = item.dataPointShape || dataPtsShape;
+                dataPointsWidth = item.dataPointWidth || dataPtsWidth;
+                dataPointsHeight = item.dataPointHeight || dataPtsHeight;
+                dataPointsColor = item.dataPointColor || dataPtsColor;
+                dataPointsRadius = (_d = item.r) !== null && _d !== void 0 ? _d : dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = '';
+                }
+                customDataPoint = item.customDataPoint || props.customDataPoint;
+                dataPointLabelComponent =
+                    item.dataPointLabelComponent || props.dataPointLabelComponent;
+            }
+            if (showValuesAsDataPointsText) {
+                text = originalDataFromProps[index].y;
+            }
+            var dataPointLabelWidth = item.dataPointLabelWidth
+                ? item.dataPointLabelWidth
+                : props.dataPointLabelWidth
+                    ? props.dataPointLabelWidth
+                    : 30;
+            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, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
+                                    dataPointsWidth / 2 +
+                                    ((_e = spacingArray[index - 1]) !== null && _e !== void 0 ? _e : 0), y: getYOrSecondaryY(item.y) - dataPointsHeight / 2, children: customDataPoint(item, index) })) : (_jsx(Animated.View, { style: {
+                                    position: 'absolute',
+                                    // height: svgHeight,
+                                    // width: totalWidth,
+                                    left: initialSpacing -
+                                        dataPointsWidth / 2 +
+                                        ((_f = spacingArray[index - 1]) !== null && _f !== void 0 ? _f : 0),
+                                    top: getYOrSecondaryY(item.y) - dataPointsHeight / 2,
+                                    opacity: isAnimated ? appearingOpacity : 1,
+                                }, children: customDataPoint(item, index) }))) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(AnimatedRect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.y) - dataPointsHeight / 2, width: isAnimated ? growingWidth[index] : dataPointsWidth, height: isAnimated ? growingHeight[index] : dataPointsHeight, opacity: isAnimated ? appearingDataPoints : opacity, fill: showDataPointOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, 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: customDataPoint ? null : (_jsx(AnimatedCircle, { cx: getX(spacingArray, index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : dataPointsRadius, fill: showDataPointOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (_g = item.borderColor) !== null && _g !== void 0 ? _g : borderColor, strokeWidth: (_h = item.borderWidth) !== null && _h !== void 0 ? _h : borderWidth, 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)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
+                                    (item.dataPointLabelShiftX ||
+                                        props.dataPointLabelShiftX ||
+                                        0) -
+                                    dataPointLabelWidth / 2 +
+                                    spacing * index, y: containerHeight +
+                                    (item.dataPointLabelShiftY ||
+                                        props.dataPointLabelShiftY ||
+                                        0) -
+                                    (item.y * containerHeight) / maxValue, children: showDataPointLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? dataPointLabelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : dataPointLabelComponent(item, index) })) : (_jsx(View, { style: {
+                                    position: 'absolute',
+                                    height: svgHeight,
+                                    width: dataPointLabelWidth,
+                                    left: initialSpacing +
+                                        (item.dataPointLabelShiftX ||
+                                            props.dataPointLabelShiftX ||
+                                            0) -
+                                        dataPointLabelWidth / 2 +
+                                        spacing * index,
+                                    top: containerHeight +
+                                        (item.dataPointLabelShiftY ||
+                                            props.dataPointLabelShiftY ||
+                                            0) -
+                                        (item.y * containerHeight) / maxValue,
+                                }, children: showDataPointLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? dataPointLabelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : dataPointLabelComponent(item, index) }))) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(spacingArray, index) -
+                                    dataPointsWidth +
+                                    (item.textShiftX || props.textShiftX || 0), y: getYOrSecondaryY(item.y) -
+                                    dataPointsHeight / 2 +
+                                    (item.textShiftY || props.textShiftY || 0), children: !showTextOnFocus && !showValuesAsDataPointsText
+                                    ? item.dataPointText
+                                    : text })) : 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 () {
+        var _a;
+        return (_jsxs(View, { style: [
+                svgWrapperViewStyle,
+                {
+                    width: totalWidth,
+                    height: containerHeightIncludingBelowXAxis,
+                    //   zIndex,
+                },
+            ], children: [_jsx(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: renderDataPoints(hideDataPoints, props.data, props.data, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, false, showValuesAsDataPointsText, cumulativeSpacing, 0) }), (_a = props.data) === null || _a === void 0 ? void 0 : _a.map(function (item, index) {
+                    var _a, _b, _c, _d, _e, _f;
+                    var secondaryLabel = (_c = (_a = item.secondaryLabel) !== null && _a !== void 0 ? _a : (_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelTexts) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : '';
+                    var secondaryLabelTextStyle = (_f = (_e = (_d = item.secondaryLabelTextStyle) !== null && _d !== void 0 ? _d : secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsTextStyle) !== null && _e !== void 0 ? _e : item.labelTextStyle) !== null && _f !== void 0 ? _f : props.xAxisLabelTextStyle;
+                    return (_jsxs(View, { children: [isAnimated
+                                ? renderAnimatedLabel(false, index, item.label ||
+                                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                        ? props.xAxisLabelTexts[index]
+                                        : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent)
+                                : renderLabel(false, index, item.label ||
+                                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                        ? props.xAxisLabelTexts[index]
+                                        : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent), secondaryXAxis
+                                ? isAnimated
+                                    ? renderAnimatedLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
+                                    : renderLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
+                                : null] }, 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: (_d = props.overScrollMode) !== null && _d !== void 0 ? _d : 'auto',
+    };
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled })));
+};

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;
@@ -101,7 +102,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.71",
+  "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.74"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",
@@ -79,6 +79,7 @@
     "star",
     "population",
     "pyramid",
+    "bubble",
     "react",
     "react native",
     "react-native"