react-native-gifted-charts 1.4.67 → 1.4.69

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

@@ -4,6 +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';
 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;
@@ -13,6 +14,7 @@ var RenderLineInBarChart = function (props) {
             ? 1
             : lowlightOpacity
         : 1;
+    var svgHeight = containerHeightIncludingBelowXAxis + labelsExtraHeight;
     var dataPointsProps = {
         data: data,
         lineConfig: lineConfig,
@@ -25,6 +27,8 @@ var RenderLineInBarChart = function (props) {
         selectedIndex: selectedIndex[0],
         yAxisOffset: yAxisOffset,
         opacity: opacity,
+        svgHeight: svgHeight,
+        totalWidth: totalWidth,
     };
     var specificVerticalLinesProps = {
         data: data,
@@ -49,21 +53,21 @@ var RenderLineInBarChart = function (props) {
     };
     var renderAnimatedLine = function () {
         var _a, _b, _c;
-        return (_jsx(Animated.View, { pointerEvents: "none", style: {
+        return (_jsx(Animated.View, { pointerEvents: isIos ? 'none' : 'box-none', style: {
                 position: 'absolute',
-                height: containerHeightIncludingBelowXAxis + labelsExtraHeight,
+                height: svgHeight,
                 left: 6 - yAxisLabelWidth,
                 bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
                 width: animatedWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'wheat',
-            }, children: _jsxs(Svg, { 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', 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 }))] }) }));
     };
     var renderLine = function () {
         var _a, _b, _c;
-        return (_jsx(View, { pointerEvents: "none", style: {
+        return (_jsx(View, { pointerEvents: isIos ? 'none' : 'box-none', style: {
                 position: 'absolute',
                 height: containerHeightIncludingBelowXAxis + labelsExtraHeight,
                 left: 6 - yAxisLabelWidth,
@@ -71,7 +75,7 @@ var RenderLineInBarChart = function (props) {
                 width: totalWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'rgba(200,150,150,0.1)'
-            }, children: _jsxs(Svg, { 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', 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/renderLineInBarChart/renderDataPoints.d.ts

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

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

@@ -1,51 +1,102 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
 import { styles } from '../../../BarChart/styles';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
-import { Rect, Text as CanvasText, Circle } from 'react-native-svg';
+import { Rect, Text as CanvasText, Circle, ForeignObject, } from 'react-native-svg';
+import { isWebApp } from '../../../utils';
 export var renderDataPoints = function (props) {
-    var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex, yAxisOffset = props.yAxisOffset, opacity = props.opacity;
-    return data.map(function (item, index) {
-        var _a, _b, _c, _d, _e;
-        if (index < lineConfig.startIndex ||
-            index > lineConfig.endIndex ||
-            item.hideDataPoint) {
-            return null;
-        }
-        var currentBarWidth = item.barWidth || barWidth || 30;
-        var customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
-        var dataPointColor = lineConfig.focusEnabled &&
-            index === ((_a = lineConfig.focusedDataPointIndex) !== null && _a !== void 0 ? _a : selectedIndex)
-            ? lineConfig.focusedDataPointColor
-            : lineConfig.dataPointsColor;
-        var dataPointRadius = lineConfig.focusEnabled &&
-            index === ((_b = lineConfig.focusedDataPointIndex) !== null && _b !== void 0 ? _b : selectedIndex)
-            ? lineConfig.focusedDataPointRadius
-            : lineConfig.dataPointsRadius;
-        var value = (_c = item.value) !== null && _c !== void 0 ? _c : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
-        if (customDataPoint) {
-            return (_jsx(View, { style: [
-                    styles.customDataPointContainer,
-                    {
-                        opacity: opacity,
-                        height: lineConfig.dataPointsHeight,
-                        width: lineConfig.dataPointsWidth,
-                        top: containerHeight -
-                            (value * containerHeight) / maxValue -
-                            ((_e = (_d = item.shiftY) !== null && _d !== void 0 ? _d : lineConfig.shiftY) !== null && _e !== void 0 ? _e : 0),
-                        left: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing),
-                    },
-                ], children: customDataPoint(item, index) }));
-        }
-        if (lineConfig.dataPointsShape === 'rectangular') {
-            return (_jsxs(Fragment, { children: [_jsx(Rect, { x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
-                            lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor, opacity: opacity }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
-                            lineConfig.dataPointsHeight / 2 +
-                            (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
-        }
-        return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), cy: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset), r: dataPointRadius, fill: dataPointColor, opacity: opacity }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
-                        lineConfig.dataPointsHeight / 2 +
-                        (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
-    });
+    var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex, yAxisOffset = props.yAxisOffset, opacity = props.opacity, svgHeight = props.svgHeight, totalWidth = props.totalWidth;
+    var focusEnabled = lineConfig.focusEnabled, dataPointLabelComponent = lineConfig.dataPointLabelComponent, showDataPointLabelOnFocus = lineConfig.showDataPointLabelOnFocus, focusedDataPointIndex = lineConfig.focusedDataPointIndex;
+    var _a = __read(useState(focusedDataPointIndex !== null && focusedDataPointIndex !== void 0 ? focusedDataPointIndex : -1), 2), selectedDataPointIndex = _a[0], setSelectedDataPointIndex = _a[1];
+    return (_jsxs(_Fragment, { children: [data.map(function (item, index) {
+                var _a, _b, _c;
+                if (index < lineConfig.startIndex ||
+                    index > lineConfig.endIndex ||
+                    item.hideDataPoint) {
+                    return null;
+                }
+                var currentBarWidth = item.barWidth || barWidth || 30;
+                var customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
+                var dataPointColor = lineConfig.focusEnabled && index === selectedDataPointIndex
+                    ? lineConfig.focusedDataPointColor
+                    : lineConfig.dataPointsColor;
+                var dataPointRadius = lineConfig.focusEnabled && index === selectedDataPointIndex
+                    ? lineConfig.focusedDataPointRadius
+                    : lineConfig.dataPointsRadius;
+                var value = (_a = item.value) !== null && _a !== void 0 ? _a : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
+                var x = getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing);
+                var y = getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset);
+                if (customDataPoint) {
+                    return (_jsx(TouchableOpacity, { style: [
+                            styles.customDataPointContainer,
+                            {
+                                opacity: opacity,
+                                height: lineConfig.dataPointsHeight,
+                                width: lineConfig.dataPointsWidth,
+                                top: containerHeight -
+                                    (value * containerHeight) / maxValue -
+                                    ((_c = (_b = item.shiftY) !== null && _b !== void 0 ? _b : lineConfig.shiftY) !== null && _c !== void 0 ? _c : 0),
+                                left: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing),
+                            },
+                        ], onPress: function () {
+                            if (focusEnabled)
+                                setSelectedDataPointIndex(index);
+                        }, children: customDataPoint(item, index) }, index + '.' + value + 'custom'));
+                }
+                if (lineConfig.dataPointsShape === 'rectangular') {
+                    return (_jsxs(Fragment, { children: [_jsx(Rect, { x: x, y: y - lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor, opacity: opacity, onPress: function () {
+                                    if (focusEnabled)
+                                        setSelectedDataPointIndex(index);
+                                } }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
+                                    lineConfig.dataPointsHeight / 2 +
+                                    (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index + '.' + value + 'rect'));
+                }
+                return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: x, cy: y, r: dataPointRadius, fill: dataPointColor, opacity: opacity, onPress: function () {
+                                if (focusEnabled)
+                                    setSelectedDataPointIndex(index);
+                            } }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
+                                lineConfig.dataPointsHeight / 2 +
+                                (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index + '.' + value + 'circ'));
+            }), dataPointLabelComponent
+                ? data.map(function (item, index) {
+                    var _a;
+                    if (index < lineConfig.startIndex ||
+                        index > lineConfig.endIndex ||
+                        item.hideDataPoint) {
+                        return null;
+                    }
+                    var currentBarWidth = item.barWidth || barWidth || 30;
+                    var value = (_a = item.value) !== null && _a !== void 0 ? _a : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
+                    var x = getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing);
+                    var y = getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset);
+                    if (isWebApp)
+                        return (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: x - 12, y: y - 24, children: showDataPointLabelOnFocus
+                                ? selectedDataPointIndex === index
+                                    ? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
+                                    : null
+                                : dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index) }, index + '.' + value + 'label'));
+                    return (_jsx(View, { style: { top: y - 24, left: x - 12, position: 'absolute' }, children: showDataPointLabelOnFocus
+                            ? selectedDataPointIndex === index
+                                ? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
+                                : null
+                            : dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index) }, index + '.' + value + 'label'));
+                })
+                : null] }));
 };

package/dist/Components/BarAndLineChartsWrapper/renderVerticalLines.js

@@ -1,9 +1,22 @@
+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 } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { View } from 'react-native';
 import { chartTypes } from 'gifted-charts-core';
 import { Line, Svg } from 'react-native-svg';
 var RenderVerticalLines = function (props) {
-    var 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 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) {
         if (verticalLinesUptoDataPoint) {
             if (index < data.length) {
@@ -32,6 +45,7 @@ var RenderVerticalLines = function (props) {
             width: totalWidth,
             zIndex: verticalLinesZIndex || -1,
         }, children: _jsx(Svg, { height: containerHeightIncludingBelowXAxis, width: totalWidth, children: verticalLinesAr.map(function (item, index) {
+                var _a, _b, _c, _d, _e, _f;
                 var totalSpacing = initialSpacing;
                 if (verticalLinesSpacing) {
                     totalSpacing = verticalLinesSpacing * (index + 1);
@@ -80,16 +94,40 @@ var RenderVerticalLines = function (props) {
                         totalSpacing += actualSpacing;
                     }
                 }
-                var x = verticalLinesShift +
+                if (!showVerticalLines && !item.showVerticalLine) {
+                    return null;
+                }
+                var verticalLinesShiftLocal = chartType === chartTypes.BAR
+                    ? ((_a = item.verticalLineShift) !== null && _a !== void 0 ? _a : verticalLinesShift)
+                    : verticalLinesShift;
+                var x = verticalLinesShiftLocal +
                     1 +
-                    (chartType === chartTypes.BAR
+                    (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
                             ? verticalLinesSpacing * (index + 1)
                             : index * spacing + (initialSpacing - 2));
-                return (_jsx(Line, { x1: x, y1: extendedContainerHeight -
+                var lineProps = 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
+                    ? {
+                        y2: containerHeightIncludingBelowXAxis -
+                            heightAdjustmentDueToStrokeLinecap,
+                        stroke: ((_b = item.verticalLineColor) !== null && _b !== void 0 ? _b : verticalLinesColor) ||
+                            'lightgray',
+                        strokeWidth: ((_c = item.verticalLineThickness) !== null && _c !== void 0 ? _c : verticalLinesThickness) || 2,
+                        strokeDasharray: (_e = (_d = item.verticalLineStrokeDashArray) !== null && _d !== void 0 ? _d : verticalLinesStrokeDashArray) !== null && _e !== void 0 ? _e : '',
+                        strokeLinecap: (_f = item.verticalLineStrokeLinecap) !== null && _f !== void 0 ? _f : verticalLinesStrokeLinecap,
+                    }
+                    : {
+                        y2: containerHeightIncludingBelowXAxis -
+                            heightAdjustmentDueToStrokeLinecap,
+                        stroke: verticalLinesColor || 'lightgray',
+                        strokeWidth: verticalLinesThickness || 2,
+                        strokeDasharray: verticalLinesStrokeDashArray !== null && verticalLinesStrokeDashArray !== void 0 ? verticalLinesStrokeDashArray : '',
+                        strokeLinecap: verticalLinesStrokeLinecap,
+                    };
+                return (_createElement(Line, __assign({}, lineProps, { key: index, x1: x, y1: extendedContainerHeight -
                         getHeightOfVerticalLine(index) +
-                        heightAdjustmentDueToStrokeLinecap, x2: x, y2: containerHeightIncludingBelowXAxis - heightAdjustmentDueToStrokeLinecap, stroke: verticalLinesColor || 'lightgray', strokeWidth: verticalLinesThickness || 2, strokeDasharray: verticalLinesStrokeDashArray !== null && verticalLinesStrokeDashArray !== void 0 ? verticalLinesStrokeDashArray : '', strokeLinecap: verticalLinesStrokeLinecap }, index));
+                        heightAdjustmentDueToStrokeLinecap, x2: x })));
             }) }) }));
 };
 export default RenderVerticalLines;

package/dist/LineChart/index.js

@@ -38,7 +38,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
 import { View, Animated, Easing, Text, Dimensions, I18nManager, } from 'react-native';
-import { screenWidth, usePrevious } from '../utils';
+import { isWebApp, screenWidth, usePrevious } from '../utils';
 import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, Defs, Mask, } from 'react-native-svg';
 import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, svgPath, useLineChart, adjustToOffset, LineDefaults, pointsWithPaddedRepititions, } from 'gifted-charts-core';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
@@ -260,7 +260,7 @@ export var LineChart = function (props) {
     var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
         var getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
         return dataForRender.map(function (item, index) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             if (index < startIndex || index > endIndex)
                 return null;
             if (item.hideDataPoint) {
@@ -328,9 +328,18 @@ export var LineChart = function (props) {
             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, item, locationY, onStripPress);
-                            }, onPressOut: handleUnFocus })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
+                            }, 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.value) - dataPointsHeight / 2, children: customDataPoint(item, index) })) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Rect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
+                                    ((_e = spacingArray[index - 1]) !== null && _e !== void 0 ? _e : 0), y: getYOrSecondaryY(item.value) - 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.value) - dataPointsHeight / 2,
+                                    opacity: isAnimated ? appearingOpacity : 1,
+                                }, children: customDataPoint(item, index) }))) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Rect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
                                         ? index === selectedIndex
                                             ? dataPointsColor
                                             : 'none'
@@ -362,7 +371,7 @@ export var LineChart = function (props) {
                                         if (!item.onPress && !props.onPress && focusEnabled) {
                                             handleUnFocus();
                                         }
-                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
+                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
                                     (item.dataPointLabelShiftX ||
                                         props.dataPointLabelShiftX ||
                                         0) -
@@ -376,7 +385,27 @@ export var LineChart = function (props) {
                                         (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) -
+                                    : 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.value * 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.value) -
                                     dataPointsHeight / 2 +

package/dist/PieChart/index.d.ts

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

package/dist/PieChart/index.js

@@ -32,6 +32,8 @@ import { pieColors, usePieChart } from 'gifted-charts-core';
 import { isWebApp } from '../utils';
 import { useState } from 'react';
 export var PieChart = function (props) {
+    if (!props.data)
+        return null;
     var _a = usePieChart(props), radius = _a.radius, extraRadius = _a.extraRadius, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, data = _a.data, showTooltip = _a.showTooltip, tooltipHorizontalShift = _a.tooltipHorizontalShift, tooltipVerticalShift = _a.tooltipVerticalShift, tooltipComponent = _a.tooltipComponent, getTooltipText = _a.getTooltipText, tooltipBackgroundColor = _a.tooltipBackgroundColor, tooltipBorderRadius = _a.tooltipBorderRadius, tooltipWidth = _a.tooltipWidth, tooltipTextNoOfLines = _a.tooltipTextNoOfLines, textColor = _a.textColor, textSize = _a.textSize, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, tooltipSelectedIndex = _a.tooltipSelectedIndex, setTooltipSelectedIndex = _a.setTooltipSelectedIndex;
     var _b = __read(useState(0), 2), touchX = _b[0], setTouchX = _b[1];
     var _c = __read(useState(0), 2), touchY = _c[0], setTouchY = _c[1];
@@ -117,7 +119,6 @@ export var PieChart = function (props) {
                         fontStyle: fontStyle,
                     }, children: getTooltipText(tooltipSelectedIndex) }) })) }));
     };
-    // if (!total) return null;
     return (_jsxs(View, { style: {
             height: (radius + extraRadius + paddingVertical / 2) *
                 (props.semiCircle ? 1 : 2),

package/dist/PieChart/main.js

@@ -21,13 +21,14 @@ import Svg, { Path, Circle, Text as SvgText, Defs, RadialGradient, Stop, G, Line
 import { getPieChartMainProps, pieColors, } from 'gifted-charts-core';
 import { isWebApp, rnVersion } from '../utils';
 export var PieChartMain = function (props) {
-    var _a = getPieChartMainProps(props), isThreeD = _a.isThreeD, isBiggerPie = _a.isBiggerPie, data = _a.data, showInnerComponent = _a.showInnerComponent, radius = _a.radius, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, shadowWidth = _a.shadowWidth, backgroundColor = _a.backgroundColor, shadowColor = _a.shadowColor, semiCircle = _a.semiCircle, pi = _a.pi, initialAngle = _a.initialAngle, shadow = _a.shadow, donut = _a.donut, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, innerRadius = _a.innerRadius, showText = _a.showText, textColor = _a.textColor, textSize = _a.textSize, tiltAngle = _a.tiltAngle, labelsPosition = _a.labelsPosition, showTextBackground = _a.showTextBackground, textBackgroundColor = _a.textBackgroundColor, showValuesAsLabels = _a.showValuesAsLabels, showGradient = _a.showGradient, gradientCenterColor = _a.gradientCenterColor, minShiftX = _a.minShiftX, minShiftY = _a.minShiftY, total = _a.total, horizAdjustment = _a.horizAdjustment, vertAdjustment = _a.vertAdjustment, cx = _a.cx, cy = _a.cy, mData = _a.mData, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, extraRadius = _a.extraRadius, showExternalLabels = _a.showExternalLabels, getExternaLabelProperties = _a.getExternaLabelProperties, coordinates = _a.coordinates, onPressed = _a.onPressed, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, edgesPressable = _a.edgesPressable;
+    var _a;
+    var _b = getPieChartMainProps(props), isThreeD = _b.isThreeD, isBiggerPie = _b.isBiggerPie, data = _b.data, showInnerComponent = _b.showInnerComponent, radius = _b.radius, canvasWidth = _b.canvasWidth, canvasHeight = _b.canvasHeight, shadowWidth = _b.shadowWidth, backgroundColor = _b.backgroundColor, shadowColor = _b.shadowColor, semiCircle = _b.semiCircle, pi = _b.pi, initialAngle = _b.initialAngle, shadow = _b.shadow, donut = _b.donut, strokeWidth = _b.strokeWidth, strokeColor = _b.strokeColor, innerRadius = _b.innerRadius, showText = _b.showText, textColor = _b.textColor, textSize = _b.textSize, tiltAngle = _b.tiltAngle, labelsPosition = _b.labelsPosition, showTextBackground = _b.showTextBackground, textBackgroundColor = _b.textBackgroundColor, showValuesAsLabels = _b.showValuesAsLabels, showGradient = _b.showGradient, gradientCenterColor = _b.gradientCenterColor, minShiftX = _b.minShiftX, minShiftY = _b.minShiftY, total = _b.total, horizAdjustment = _b.horizAdjustment, vertAdjustment = _b.vertAdjustment, cx = _b.cx, cy = _b.cy, mData = _b.mData, paddingHorizontal = _b.paddingHorizontal, paddingVertical = _b.paddingVertical, extraRadius = _b.extraRadius, showExternalLabels = _b.showExternalLabels, getExternaLabelProperties = _b.getExternaLabelProperties, coordinates = _b.coordinates, onPressed = _b.onPressed, font = _b.font, fontWeight = _b.fontWeight, fontStyle = _b.fontStyle, edgesPressable = _b.edgesPressable;
     var setTouchX = props.setTouchX, setTouchY = props.setTouchY;
     var prevSide = 'right';
     var prevLabelComponentX = 0;
     var wasFirstItemOnPole = false;
-    var _b = __read(useState(0), 2), top = _b[0], setTop = _b[1];
-    var _c = __read(useState(0), 2), left = _c[0], setLeft = _c[1];
+    var _c = __read(useState(0), 2), top = _c[0], setTop = _c[1];
+    var _d = __read(useState(0), 2), left = _d[0], setLeft = _d[1];
     var onPressHandler = function (e) {
         var x = 0, y = 0;
         if (isWebApp) {
@@ -88,9 +89,9 @@ export var PieChartMain = function (props) {
                         vertAdjustment +
                         (vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadius) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadius) * 2 + strokeWidth + paddingHorizontal, children: [_jsx(Defs, { children: data.map(function (item, index) {
                                 return (_jsxs(RadialGradient, { id: 'grad' + index, cx: "50%", cy: "50%", rx: "50%", ry: "50%", fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: item.gradientCenterColor || gradientCenterColor, stopOpacity: "1" }), _jsx(Stop, { offset: "100%", stopColor: item.color || pieColors[index % 9], stopOpacity: "1" })] }, index + ''));
-                            }) }), (data.length === 1 || !total) ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
+                            }) }), data.length === 1 || !total ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
                                     ? "url(#grad".concat(0, ")")
-                                    : data[0].color || pieColors[0 % 9] }) })) : (data.map(function (item, index) {
+                                    : ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.color) || pieColors[0 % 9] }) })) : (data.map(function (item, index) {
                             var _a = coordinates[index], sx = _a.sx, sy = _a.sy, ax = _a.ax, ay = _a.ay;
                             if (isBiggerPie && index)
                                 return null;

package/dist/utils/index.d.ts

@@ -2,3 +2,4 @@ export declare const rnVersion: number;
 export declare const screenWidth: number;
 export declare function usePrevious(value: string): string;
 export declare const isWebApp: boolean;
+export declare const isIos: boolean;

package/dist/utils/index.js

@@ -19,3 +19,4 @@ export function usePrevious(value) {
     return ref.current; //in the end, return the current ref value.
 }
 export var isWebApp = Platform.OS === 'web';
+export var isIos = Platform.OS === 'ios';

package/package.json

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