@harveylx/react-native-gifted-charts 1.4.70

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Abhinandan Kushwaha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,162 @@
+# react-native-gifted-charts
+
+<p align="center">
+  <a href="https://gifted-charts.web.app">
+    <img src="/demos/favicon.png" height="auto" width="26" height="26" />
+  </a> &nbsp; &nbsp; &nbsp;
+  <a href="https://www.npmjs.com/package/react-native-gifted-charts">
+    <img src="/demos/npmIcon.png" height="auto" width="28" height="28" />
+  </a> &nbsp; &nbsp; &nbsp;
+  <a href="https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts">
+    <img src="/demos/gitLogo.png" height="auto" width="28" height="28" />
+  </a> &nbsp; &nbsp; &nbsp;
+  <a href="https://stackoverflow.com/questions/tagged/react-native-gifted-charts?tab=Newest">
+    <img src="/demos/stackOverflow.png" height="auto" width="28" height="28" />
+  </a> &nbsp; &nbsp; &nbsp;
+  <a href="https://discord.gg/FBbu9duJxs">
+    <img src="/demos/discord.png" height="auto" width="30" height="30" />
+  </a> &nbsp; &nbsp; &nbsp;
+  <a href="https://www.reddit.com/r/gifted_charts/">
+    <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.
+
+### Yet another chart library? Why?
+
+**_To bring Life to your data_**
+
+- Plenty of features with minimal code
+- Apply animations to your charts on load and on value change, just by adding a prop
+- Smooth animations implemented using the `Animated` API (no external library used for animations)
+- Clickable and scrollable
+- Three-D and gradient effects
+- Fully customizable (see the [props](docs/docs.md))
+- Detailed [documentation](https://gifted-charts.web.app/) with examples
+- Support for **_combined_** Bar and Line charts
+- Tested to be pixel perfect using [react-native-screenshot-test](https://www.npmjs.com/package/react-native-screenshot-test). See [the screenshot tests here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html)
+- Detailed and illustrated [dev docs](docs/dev/index.md) that explain the architecture and working of the library
+
+The web counterpart of this library is public now. Try out our new reactJS library- [react-gifted-charts](https://www.npmjs.com/package/react-gifted-charts) <br />
+The exact same piece of code that you write to render charts in react-native, can be used to render charts in reactJS using this library!
+
+## [Release notes (Changelog) 🎉](release-notes/release-notes.md)
+
+See the **[release changes by version here.](release-notes/release-notes.md)**
+
+<img src='/demos/bars.png' alt=''/>
+<img src='/demos/lineArea.png' alt=''/>
+<img src='/demos/blues.png' alt=''/>
+<table>
+  <tr>
+    <td><img src='/demos/scrollLine.gif' alt='' width=320 height=280/></td>
+    <td><img src='/demos/animatedDataLine.gif' alt='' width=320 height=260/></td>
+  </tr>
+  
+  <tr>
+    <td><img src='/demos/crossHair.gif' alt='' height=280 /></td>
+    <td><img src='/demos/movingBars.gif' alt='' width=270 height=300/></td>
+  <tr>
+    <td><img src='/demos/radar.png' alt='' height=280 width=320/></td>
+    <td><img src='/demos/ppnLabelled.png' alt='' height=280 width=300/></td>
+  </tr>
+</table>
+<img src='/demos/pieExt.png' alt='' height=280 />
+
+---
+
+## Installation
+
+### React Native CLI
+
+```sh
+npm install react-native-gifted-charts react-native-linear-gradient react-native-svg
+```
+
+### Expo
+
+```sh
+npx expo install react-native-gifted-charts expo-linear-gradient react-native-svg
+```
+
+Please note that `react-native-svg` and `react-native-linear-gradient`/`expo-linear-gradient` are needed for the library to work, so make sure they are installed in your project. <br />
+**[gifted-charts-core](https://www.npmjs.com/package/gifted-charts-core)** contains the mathematical and logical utilities used by this library.
+
+# 📚 Docs & Demos 🎦
+
+- [Documentation and gallery](https://gifted-charts.web.app/) <br />
+- [Architecture and working (dev docs)](docs/dev/index.md)
+- [Demo repo and snacks list](https://github.com/Abhinandan-Kushwaha/GiftedChartsDemo?tab=readme-ov-file#gifted-charts-demo)
+- [Demo app on Play Store](https://play.google.com/store/apps/details?id=com.giftedcharts.demo)
+
+## Usage
+
+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";
+
+// ...
+const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
+
+<BarChart data = {data} />
+<LineChart data = {data} />
+<PieChart data = {data} />
+<PopulationPyramid data = {[{left:10,right:12}, {left:9,right:8}]} />
+<RadarChart data = {[50, 80, 90, 70]} />
+
+// For Horizontal Bar chart, just add the prop horizontal to the <BarChart/> component
+
+<BarChart data = {data} horizontal />
+
+// For Area chart, just add the prop areaChart to the <LineChart/> component
+
+<LineChart data = {data} areaChart />
+
+// For Donut chart, just add the prop donut to the <PieChart/> component
+
+<PieChart data = {data} donut />
+```
+
+## Props tables
+
+**1. [BarChart, Horizontal BarChart and Stacked Bar Chart props](docs/BarChart/BarChartProps.md)** \
+**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)**
+
+## 🤝 Contributing
+
+This project exists thanks to all the people who contribute.
+
+<a href="https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Abhinandan-Kushwaha/react-native-gifted-charts" />
+</a>
+<br/><br/>
+
+_Dear developers_! Your small contribution can make someone's day 😊
+
+One of the ways you can contribute is to address an [open issue](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues).
+
+Sometimes people report issues which don't exist, or request for features which are already present. Such issues can be addressed without pushing any code to the repo. Just show them in the comments how to do it.
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+📝 [To do list](./src/todos.md)
+
+## 🧐 Test cases
+
+- Test strategy and cases are discussed here- [TESTS.md](./TESTS.md) <br />
+- Pixel perfection is assured using [react-native-screenshot-test](https://www.npmjs.com/package/react-native-screenshot-test). <br/>
+- 290+ screenshot tests have been written. See the [Reports here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html).
+- Screenshot tests are written in a separate repo named [TestingCharts](https://github.com/Abhinandan-Kushwaha/TestingCharts)
+
+## 🏆 Showcase
+
+Showcase your dashing charts on [Expo snack](https://snack.expo.dev/) and list them on the [Demo app repo](https://github.com/Abhinandan-Kushwaha/GiftedChartsDemo?tab=readme-ov-file#gifted-charts-demo).<br />
+Your snack might get published in the [Demo app on Play Store!](https://play.google.com/store/apps/details?id=com.giftedcharts.demo)
+
+## License
+
+MIT

package/dist/BarChart/Animated2DWithGradient.d.ts

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

package/dist/BarChart/Animated2DWithGradient.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Text, Animated } from 'react-native';
+import Svg, { Defs, Rect } from 'react-native-svg';
+import Cap from '../Components/BarSpecificComponents/cap';
+import LinearGradient from '../Components/common/LinearGradient';
+var Animated2DWithGradient = function (props) {
+    var _a, _b;
+    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, bWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, barInnerComponent = props.barInnerComponent, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, commonStyleForBar = props.commonStyleForBar, barStyleWithBackground = props.barStyleWithBackground, yAxisOffset = props.yAxisOffset, height = props.height;
+    var barWidth = (_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth; // setting width in state for animation purpose
+    var topLabelPosition = (item.barWidth || barWidth || 30) * -1;
+    var animatedHeight = useRef(new Animated.Value(0)).current; // initial height = 0
+    var animatedLabelHeight = useRef(new Animated.Value(height + topLabelPosition)).current;
+    var elevate = function () {
+        Animated.parallel([
+            Animated.timing(animatedHeight, {
+                toValue: height,
+                duration: animationDuration,
+                useNativeDriver: false,
+            }),
+            Animated.timing(animatedLabelHeight, {
+                toValue: topLabelPosition,
+                duration: animationDuration,
+                useNativeDriver: false,
+            }),
+        ]).start();
+    };
+    useEffect(function () {
+        if (!noAnimation) {
+            elevate();
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs(Animated.View, { style: [
+                    {
+                        position: 'absolute',
+                        bottom: 0,
+                        width: barWidth,
+                        overflow: 'hidden',
+                        height: noAnimation ? height : animatedHeight,
+                    },
+                    item.barStyle || barStyle,
+                ], children: [noGradient ? (_jsx(View, { style: barStyleWithBackground, children: props.cappedBars && item.value ? (_jsx(Cap, { capThicknessFromItem: item.capThickness, capThicknessFromProps: props.capThickness, capColorFromItem: item.capColor, capColorFromProps: props.capColor, capRadiusFromItem: item.capRadius, capRadiusFromProps: props.capRadius })) : null })) : (_jsx(LinearGradient, { style: commonStyleForBar, start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, colors: [
+                            item.gradientColor || props.gradientColor || 'white',
+                            item.frontColor || props.frontColor || 'black',
+                        ], children: props.cappedBars && (_jsx(View, { style: {
+                                position: 'absolute',
+                                width: '100%',
+                                height: item.capThickness === 0
+                                    ? 0
+                                    : item.capThickness || props.capThickness || 6,
+                                backgroundColor: item.capColor || props.capColor || 'black',
+                                borderTopLeftRadius: item.capRadius === 0
+                                    ? 0
+                                    : item.capRadius || props.capRadius || 0,
+                                borderTopRightRadius: item.capRadius === 0
+                                    ? 0
+                                    : item.capRadius || props.capRadius || 0,
+                            } })) })), (item.barBackgroundPattern || barBackgroundPattern) && (_jsxs(Svg, { children: [_jsx(Defs, { children: item.barBackgroundPattern
+                                    ? item.barBackgroundPattern()
+                                    : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "1", y: "1", width: item.barWidth || barWidth || 30, height: noAnimation ? Math.abs(height) : height, fill: "url(#".concat(item.patternId || patternId, ")") })] })), barInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }), item.topLabelComponent || showValuesAsTopLabel ? (_jsx(Animated.View, { style: [
+                    {
+                        position: 'absolute',
+                        top: noAnimation ? topLabelPosition : animatedLabelHeight,
+                        height: item.barWidth || barWidth || 30,
+                        width: item.barWidth || barWidth || 30,
+                        justifyContent: (props.horizontal && !intactTopLabel) || item.value < 0
+                            ? 'center'
+                            : 'flex-end',
+                        alignItems: 'center',
+                        opacity: opacity,
+                    },
+                    item.value < 0 && { transform: [{ rotate: '180deg' }] },
+                    props.horizontal &&
+                        !intactTopLabel && { transform: [{ rotate: '270deg' }] },
+                    topLabelContainerStyle !== null && topLabelContainerStyle !== void 0 ? topLabelContainerStyle : item.topLabelContainerStyle,
+                ], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value + yAxisOffset })) : ((_b = item.topLabelComponent) === null || _b === void 0 ? void 0 : _b.call(item)) })) : null] }));
+};
+export default Animated2DWithGradient;

package/dist/BarChart/RenderBars.d.ts

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

package/dist/BarChart/RenderBars.js

@@ -0,0 +1,222 @@
+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 { View, TouchableOpacity, Animated, Text } from 'react-native';
+import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
+import Animated2DWithGradient from './Animated2DWithGradient';
+import { getPropsForAnimated2DWithGradient, useRenderBars, } from '@harveylx/gifted-charts-core';
+import Tooltip from '../Components/BarSpecificComponents/tooltip';
+var isIndexSelected = function (values, idx) {
+    if (Array.isArray(values))
+        return values.includes(idx);
+    return values === idx;
+};
+var RenderBars = function (props) {
+    var _a, _b, _c;
+    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, side = props.side, data = props.data, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, isThreeD = props.isThreeD, isAnimated = props.isAnimated, rotateLabel = props.rotateLabel, appearingOpacity = props.appearingOpacity, animationDuration = props.animationDuration, autoShiftLabels = props.autoShiftLabels, label = props.label, secondaryLabel = props.secondaryLabel, labelTextStyle = props.labelTextStyle, secondaryLabelTextStyle = props.secondaryLabelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, horizontal = props.horizontal, rtl = props.rtl, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, barWidth = props.barWidth, _d = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _d === void 0 ? 0 : _d, secondaryXAxis = props.secondaryXAxis, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis, _e = props.barMarginBottom, barMarginBottom = _e === void 0 ? 0 : _e, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity;
+    var _f = useRenderBars(props), heightFactor = _f.heightFactor, barHeight = _f.barHeight, tooltipProps = _f.tooltipProps;
+    var _g = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _g.commonStyleForBar, barStyleWithBackground = _g.barStyleWithBackground, commonPropsFor2dAnd3dBars = _g.commonPropsFor2dAnd3dBars, isFocused = _g.isFocused, focusedBarConfig = _g.focusedBarConfig, localFrontColor = _g.localFrontColor;
+    var itemOrPropsBarInnerComponent = (_a = item.barInnerComponent) !== null && _a !== void 0 ? _a : props.barInnerComponent;
+    var localBarInnerComponent = isFocused
+        ? ((_b = focusedBarConfig === null || focusedBarConfig === void 0 ? void 0 : focusedBarConfig.barInnerComponent) !== null && _b !== void 0 ? _b : itemOrPropsBarInnerComponent)
+        : itemOrPropsBarInnerComponent;
+    var renderLabel = function (top, label, labelTextStyle, value) {
+        var _a, _b;
+        return (_jsx(View, { style: [
+                {
+                    width: (item.labelWidth ||
+                        props.labelWidth ||
+                        item.barWidth ||
+                        barWidth) + spacing,
+                    left: spacing / -2,
+                    position: 'absolute',
+                    height: (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18,
+                    bottom: top
+                        ? (containerHeight || 200) +
+                            ((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
+                        : (rotateLabel
+                            ? -40
+                            : -6 -
+                                xAxisTextNumberOfLines * 18 -
+                                (value < 0
+                                    ? -xAxisLabelsVerticalShift
+                                    : xAxisLabelsVerticalShift)) -
+                            barMarginBottom -
+                            (value < 0 && !autoShiftLabels
+                                ? -labelsDistanceFromXaxis
+                                : labelsDistanceFromXaxis),
+                },
+                rotateLabel
+                    ? horizontal
+                        ? { transform: [{ rotate: '330deg' }] }
+                        : {
+                            transform: [
+                                { rotate: value < 0 ? '240deg' : '60deg' },
+                                { translateX: value < 0 ? 56 : 0 },
+                                { translateY: value < 0 ? 32 : 0 },
+                            ],
+                        }
+                    : horizontal
+                        ? { transform: [{ rotate: '-90deg' }] }
+                        : value < 0
+                            ? {
+                                transform: [
+                                    { rotate: '180deg' },
+                                    {
+                                        translateY: autoShiftLabels
+                                            ? 0
+                                            : 16.5 * xAxisTextNumberOfLines + 12,
+                                    },
+                                ],
+                            }
+                            : {},
+            ], children: top ? (item.secondaryLabelComponent ? (item.secondaryLabelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label }))) : item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var renderAnimatedLabel = function (top, label, labelTextStyle, value) {
+        var _a, _b;
+        return (_jsx(Animated.View, { style: [
+                {
+                    width: (item.labelWidth ||
+                        props.labelWidth ||
+                        item.barWidth ||
+                        barWidth) + spacing,
+                    left: spacing / -2,
+                    position: 'absolute',
+                    height: (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18 -
+                        (value < 0
+                            ? -xAxisLabelsVerticalShift
+                            : xAxisLabelsVerticalShift),
+                    bottom: top
+                        ? (containerHeight || 200) +
+                            ((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
+                        : (rotateLabel
+                            ? -40
+                            : -6 -
+                                xAxisTextNumberOfLines * 18 -
+                                xAxisLabelsVerticalShift) - barMarginBottom,
+                    opacity: appearingOpacity,
+                },
+                value < 0 && { transform: [{ rotate: '180deg' }] },
+                rotateLabel
+                    ? horizontal
+                        ? { transform: [{ rotate: '330deg' }] }
+                        : { transform: [{ rotate: '60deg' }] }
+                    : horizontal
+                        ? { transform: [{ rotate: '-90deg' }] }
+                        : value < 0
+                            ? {
+                                transform: [
+                                    { rotate: '180deg' },
+                                    {
+                                        translateY: autoShiftLabels
+                                            ? 0
+                                            : 16.5 * xAxisTextNumberOfLines + 12,
+                                    },
+                                ],
+                            }
+                            : {},
+            ], children: top ? (item.secondaryLabelComponent ? (item.secondaryLabelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label }))) : item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var barWrapperStyle = [
+        {
+            // overflow: 'visible',
+            opacity: highlightEnabled
+                ? isIndexSelected(highlightedBarIndex, -1)
+                    ? 1
+                    : isIndexSelected(highlightedBarIndex, index)
+                        ? 1
+                        : lowlightOpacity
+                : 1,
+            marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift - 0.5,
+            width: commonPropsFor2dAnd3dBars.barWidth,
+            height: barHeight,
+            marginRight: spacing,
+            transform: [
+                {
+                    translateY: (containerHeight || 200) -
+                        (barHeight - 10 + xAxisLabelsVerticalShift) +
+                        (item.value < 0
+                            ? Math.max(minHeight, Math.abs(item.value) * heightFactor)
+                            : 0),
+                },
+                { rotateZ: item.value < 0 ? '180deg' : '0deg' },
+            ],
+        },
+        side !== 'right' && { zIndex: data.length - index },
+    ];
+    var pressDisabled = item.disablePress ||
+        props.disablePress ||
+        (pointerConfig && pointerConfig.barTouchable !== true);
+    var barContent = function () {
+        var isBarBelowXaxisAndInvisible = item.value < 0 &&
+            !(noOfSectionsBelowXAxis || secondaryNoOfSectionsBelowXAxis);
+        var animated2DWithGradient = function (noGradient, noAnimation) { return (_jsx(Animated2DWithGradient, __assign({}, commonPropsFor2dAnd3dBars, { animationDuration: animationDuration || 800, roundedBottom: props.roundedBottom || false, roundedTop: props.roundedTop || false, noGradient: noGradient, noAnimation: noAnimation, containerHeight: containerHeight, maxValue: maxValue, minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : 0, barMarginBottom: barMarginBottom, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, horizontal: horizontal, barBorderWidth: barBorderWidth, barBorderColor: barBorderColor, commonStyleForBar: commonStyleForBar, barStyleWithBackground: barStyleWithBackground }))); };
+        return (_jsxs(_Fragment, { children: [(props.showXAxisIndices || item.showXAxisIndex) && (_jsx(View, { style: {
+                        zIndex: 2,
+                        position: 'absolute',
+                        height: props.xAxisIndicesHeight,
+                        width: props.xAxisIndicesWidth,
+                        bottom: props.xAxisIndicesHeight / -2,
+                        left: ((item.barWidth || barWidth) - props.xAxisIndicesWidth) / 2,
+                        backgroundColor: props.xAxisIndicesColor,
+                    } })), isBarBelowXaxisAndInvisible ? null : isThreeD ? (_jsx(AnimatedThreeDBar, __assign({}, commonPropsFor2dAnd3dBars, { sideWidth: item.sideWidth ||
+                        props.sideWidth ||
+                        (item.barWidth || barWidth) / 2, side: side || 'left', sideColor: item.sideColor || props.sideColor || '', topColor: item.topColor || props.topColor || '', horizontal: horizontal, isAnimated: isAnimated, animationDuration: animationDuration || 800, selectedIndex: selectedIndex, containerHeight: containerHeight || 200 }))) : item.showGradient || props.showGradient ? (isAnimated ? (animated2DWithGradient(false, false)) : (animated2DWithGradient(false, true))) : isAnimated ? (animated2DWithGradient(true, false)) : (animated2DWithGradient(true, true)), isAnimated
+                    ? renderAnimatedLabel(false, label, labelTextStyle, item.value)
+                    : renderLabel(false, label, labelTextStyle, item.value), secondaryXAxis
+                    ? isAnimated
+                        ? renderAnimatedLabel(true, secondaryLabel, secondaryLabelTextStyle, item.value)
+                        : renderLabel(true, secondaryLabel, secondaryLabelTextStyle, item.value)
+                    : null] }));
+    };
+    return (_jsxs(_Fragment, { children: [pressDisabled ? (_jsx(View, { pointerEvents: "none", style: barWrapperStyle, children: barContent() })) : (_jsx(TouchableOpacity, { activeOpacity: props.activeOpacity || 0.2, onPress: function () {
+                    if (renderTooltip || props.focusBarOnPress || highlightEnabled) {
+                        if (props.focusedBarIndex === undefined || !props.onPress) {
+                            setSelectedIndex([index]);
+                        }
+                    }
+                    item.onPress
+                        ? item.onPress()
+                        : props.onPress
+                            ? props.onPress(item, index)
+                            : null;
+                }, onLongPress: function () {
+                    item.onLongPress
+                        ? item.onLongPress()
+                        : props.onLongPress
+                            ? props.onLongPress(item, index)
+                            : null;
+                }, onPressOut: function () {
+                    item.onPressOut
+                        ? item.onPressOut()
+                        : props.onPressOut
+                            ? props.onPressOut(item, index)
+                            : null;
+                }, style: barWrapperStyle, children: barContent() })), renderTooltip && ((_c = selectedIndex.includes) === null || _c === void 0 ? void 0 : _c.call(selectedIndex, index)) && (_jsx(Tooltip, __assign({}, tooltipProps)))] }));
+};
+export default RenderBars;

package/dist/BarChart/RenderStackBars.d.ts

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