react-native-gifted-charts 1.4.49 → 1.4.51

package/README.md

@@ -1,4 +1,5 @@
 # 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" />
@@ -6,35 +7,34 @@
   <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;
-  <a href="https://discord.gg/fnpcvzhe">
+  <a href="https://discord.gg/ptdwsw48">
     <img src="/demos/discord.png" height="auto" width="30" height="30" />
   </a>
 </p>
-The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
+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_**
 
-1. Plenty of features with minimal code
-2. Apply animations to your charts on load and on value change, just by adding a prop
-3. Smooth animations implemented using LayoutAnimation
-4. Clickable and scrollable
-5. Three-D and gradient effects
-6. Fully customizable (see the [props](docs/docs.md))
-7. Detailed [documentation](https://gifted-charts.web.app/) with examples
-8. Support for **_combined_** Bar and Line charts
-9. 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)
+- Plenty of features with minimal code
+- Apply animations to your charts on load and on value change, just by adding a prop
+- Smooth animations implemented using LayoutAnimation
+- Clickable and scrollable
+- Three-D and gradient effects
+- Fully customizable (see the [props](docs/docs.md))
+- Detailed [documentation](https://gifted-chart*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 🎉](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=''/>
@@ -48,7 +48,7 @@ See the **[release changes by version here.](release-notes/release-notes.md)**
     <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/pyrLarge.png' alt='' height=280 width=260/></td>
+    <td><img src='/demos/radar.png' alt='' height=280 width=260/></td>
     <td><img src='/demos/ppnLabelled.png' alt='' height=280 width=300/></td>
   </tr>
 </table>
@@ -75,14 +75,15 @@ Please note that `react-native-svg` and `react-native-linear-gradient`/`expo-lin
 
 # Docs
 
-[Documentation and gallery](https://gifted-charts.web.app/)
+- [Documentation and gallery](https://gifted-charts.web.app/) <br />
+- [Architecture and working (dev docs)](docs/dev/index.md)
 
 ## Usage
 
 The simplest usage of various types of charts can be done as below-
 
 ```js
-import { BarChart, LineChart, PieChart, PopulationPyramid } from "react-native-gifted-charts";
+import { BarChart, LineChart, PieChart, PopulationPyramid, RadarChart } from "react-native-gifted-charts";
 
 // ...
 const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
@@ -91,6 +92,7 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 <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
 
@@ -107,10 +109,11 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 
 ## 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)**
+**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
 
@@ -133,11 +136,10 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 
 ## 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/>
-220+ 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)
+- 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/>
+- 220+ 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)
 
 ## License
 

package/dist/BarChart/RenderBars.js

@@ -13,21 +13,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { View, TouchableOpacity, Animated, Text } from 'react-native';
 import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
 import Animated2DWithGradient from './Animated2DWithGradient';
-import { getPropsForAnimated2DWithGradient, AxesAndRulesDefaults, } from 'gifted-charts-core';
+import { getPropsForAnimated2DWithGradient, useRenderBars, } from 'gifted-charts-core';
 import Tooltip from '../Components/BarSpecificComponents/tooltip';
 var RenderBars = function (props) {
-    var _a, _b, _c, _d, _e;
-    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, propSpacing = props.propSpacing, 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, leftShiftForTooltip = props.leftShiftForTooltip, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, initialSpacing = props.initialSpacing, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, _f = props.xAxisThickness, xAxisThickness = _f === void 0 ? AxesAndRulesDefaults.xAxisThickness : _f, horizontal = props.horizontal, rtl = props.rtl, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, yAxisOffset = props.yAxisOffset, barWidth = props.barWidth, _g = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _g === void 0 ? 0 : _g, stepHeight = props.stepHeight, stepValue = props.stepValue, negativeStepHeight = props.negativeStepHeight, negativeStepValue = props.negativeStepValue, autoCenterTooltip = props.autoCenterTooltip, secondaryXAxis = props.secondaryXAxis, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis, _h = props.barMarginBottom, barMarginBottom = _h === void 0 ? 0 : _h;
-    var heightFactor = item.isSecondary
-        ? item.value < 0
-            ? (secondaryNegativeStepHeight !== null && secondaryNegativeStepHeight !== void 0 ? secondaryNegativeStepHeight : secondaryStepHeight) /
-                (secondaryNegativeStepValue !== null && secondaryNegativeStepValue !== void 0 ? secondaryNegativeStepValue : secondaryStepValue)
-            : secondaryStepHeight / secondaryStepValue
-        : item.value < 0
-            ? negativeStepHeight / negativeStepValue
-            : stepHeight / stepValue;
-    var barHeight = Math.max(minHeight, Math.abs(item.value) * heightFactor - xAxisThickness);
-    var _j = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _j.commonStyleForBar, barStyleWithBackground = _j.barStyleWithBackground, commonPropsFor2dAnd3dBars = _j.commonPropsFor2dAnd3dBars, isFocused = _j.isFocused, focusedBarConfig = _j.focusedBarConfig, localFrontColor = _j.localFrontColor;
+    var _a, _b;
+    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, _c = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _c === void 0 ? 0 : _c, secondaryXAxis = props.secondaryXAxis, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis, _d = props.barMarginBottom, barMarginBottom = _d === void 0 ? 0 : _d;
+    var _e = useRenderBars(props), heightFactor = _e.heightFactor, barHeight = _e.barHeight, tooltipProps = _e.tooltipProps;
+    var _f = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _f.commonStyleForBar, barStyleWithBackground = _f.barStyleWithBackground, commonPropsFor2dAnd3dBars = _f.commonPropsFor2dAnd3dBars, isFocused = _f.isFocused, focusedBarConfig = _f.focusedBarConfig, localFrontColor = _f.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)
@@ -145,79 +137,6 @@ var RenderBars = function (props) {
                     labelTextStyle,
                 ], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
     };
-    var leftSpacing = initialSpacing;
-    for (var i = 0; i < index; i++) {
-        leftSpacing +=
-            ((_c = data[i].spacing) !== null && _c !== void 0 ? _c : propSpacing) + (data[i].barWidth || barWidth);
-    }
-    // const static2DWithGradient = (item: barDataItem) => {
-    //   const localGradientColor =
-    //     item.gradientColor || props.gradientColor || 'white';
-    //   return (
-    //     <>
-    //       <LinearGradient
-    //         style={commonStyleForBar}
-    //         start={{x: 0, y: 0}}
-    //         end={{x: 0, y: 1}}
-    //         colors={[
-    //           isFocused
-    //             ? (focusedBarConfig?.gradientColor ?? localGradientColor)
-    //             : localGradientColor,
-    //           localFrontColor,
-    //         ]}>
-    //         {props.cappedBars && item.value ? (
-    //           <Cap
-    //             capThicknessFromItem={item.capThickness}
-    //             capThicknessFromProps={props.capThickness}
-    //             capColorFromItem={item.capColor}
-    //             capColorFromProps={props.capColor}
-    //             capRadiusFromItem={item.capRadius}
-    //             capRadiusFromProps={props.capRadius}
-    //           />
-    //         ) : null}
-    //       </LinearGradient>
-    //       {(item.barBackgroundPattern || props.barBackgroundPattern) && (
-    //         <BarBackgroundPattern
-    //           barBackgroundPatternFromItem={item.barBackgroundPattern}
-    //           barBackgroundPatternFromProps={props.barBackgroundPattern}
-    //           patternIdFromItem={item.patternId}
-    //           patternIdFromProps={props.patternId}
-    //         />
-    //       )}
-    //       {(item.topLabelComponent || showValuesAsTopLabel) && (
-    //         <View
-    //           style={[
-    //             {
-    //               position: 'absolute',
-    //               top: (item.barWidth || barWidth) * -1,
-    //               height: item.barWidth || barWidth,
-    //               width: item.barWidth || barWidth,
-    //               justifyContent:
-    //                 (horizontal && !intactTopLabel) || item.value < 0
-    //                   ? 'center'
-    //                   : 'flex-end',
-    //               alignItems: 'center',
-    //             },
-    //             item.value < 0 && {transform: [{rotate: '180deg'}]},
-    //             horizontal &&
-    //               !intactTopLabel && {transform: [{rotate: '270deg'}]},
-    //             topLabelContainerStyle ?? item.topLabelContainerStyle,
-    //           ]}>
-    //           {showValuesAsTopLabel ? (
-    //             <Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
-    //           ) : (
-    //             item.topLabelComponent?.()
-    //           )}
-    //         </View>
-    //       )}
-    //       {localBarInnerComponent ? (
-    //         <View style={{height: '100%', width: '100%'}}>
-    //           {localBarInnerComponent(item, index)}
-    //         </View>
-    //       ) : null}
-    //     </>
-    //   );
-    // };
     var barWrapperStyle = [
         {
             // overflow: 'visible',
@@ -261,19 +180,6 @@ var RenderBars = function (props) {
                         : renderLabel(true, secondaryLabel, secondaryLabelTextStyle, item.value)
                     : null] }));
     };
-    var tooltipProps = {
-        barHeight: barHeight,
-        barWidth: item.barWidth || barWidth,
-        item: item,
-        index: index,
-        isLast: index === data.length - 1,
-        leftSpacing: leftSpacing,
-        leftShiftForLastIndexTooltip: leftShiftForLastIndexTooltip,
-        leftShiftForTooltip: (_e = (_d = item.leftShiftForTooltip) !== null && _d !== void 0 ? _d : leftShiftForTooltip) !== null && _e !== void 0 ? _e : 0,
-        renderTooltip: renderTooltip,
-        autoCenterTooltip: autoCenterTooltip,
-        horizontal: horizontal,
-    };
     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) {
                         if (props.focusedBarIndex === undefined || !props.onPress) {

package/dist/Components/BarSpecificComponents/tooltip.d.ts

@@ -1,15 +1,3 @@
-interface TooltipProps {
-    barHeight: number;
-    barWidth: number;
-    item: any;
-    index: number;
-    isLast: boolean;
-    leftSpacing: number;
-    leftShiftForLastIndexTooltip: number;
-    leftShiftForTooltip: number;
-    renderTooltip?: Function;
-    autoCenterTooltip?: boolean;
-    horizontal?: boolean;
-}
+import { TooltipProps } from 'gifted-charts-core/dist/utils/types';
 declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/Components/BarSpecificComponents/tooltip.js

@@ -18,11 +18,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { View } from 'react-native';
 var Tooltip = function (props) {
-    var barHeight = props.barHeight, barWidth = props.barWidth, item = props.item, index = props.index, isLast = props.isLast, leftSpacing = props.leftSpacing, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, leftShiftForTooltip = props.leftShiftForTooltip, renderTooltip = props.renderTooltip, autoCenterTooltip = props.autoCenterTooltip, horizontal = props.horizontal;
+    var barWidth = props.barWidth, item = props.item, index = props.index, isLast = props.isLast, leftSpacing = props.leftSpacing, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, leftShiftForTooltip = props.leftShiftForTooltip, renderTooltip = props.renderTooltip, autoCenterTooltip = props.autoCenterTooltip, horizontal = props.horizontal, bottom = props.bottom;
     var _a = __read(useState(0), 2), leftShiftTooltipForCentering = _a[0], setLeftShiftTooltipForCentering = _a[1];
     return (_jsx(View, { style: {
             position: 'absolute',
-            bottom: barHeight + 60,
+            bottom: bottom,
             left: leftSpacing -
                 (isLast ? leftShiftForLastIndexTooltip : leftShiftForTooltip) -
                 leftShiftTooltipForCentering,

package/dist/LineChart/index.js

@@ -35,9 +35,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, } from 'react';
 import { View, Animated, Easing, Text, Dimensions, I18nManager, } from 'react-native';
-import { styles } from './styles';
 import { screenWidth, usePrevious } from '../utils';
 import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, } from 'react-native-svg';
 import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, useLineChart, adjustToOffset, LineDefaults, pointsWithPaddedRepititions, } from 'gifted-charts-core';
@@ -55,7 +54,7 @@ export var LineChart = function (props) {
     var widthValue3 = useMemo(function () { return new Animated.Value(0); }, []);
     var widthValue4 = useMemo(function () { return new Animated.Value(0); }, []);
     var widthValue5 = useMemo(function () { return new Animated.Value(0); }, []);
-    var _d = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _d.curveType, scrollX = _d.scrollX, setScrollX = _d.setScrollX, arrow1Points = _d.arrow1Points, arrow2Points = _d.arrow2Points, arrow3Points = _d.arrow3Points, arrow4Points = _d.arrow4Points, arrow5Points = _d.arrow5Points, secondaryArrowPoints = _d.secondaryArrowPoints, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, pointerX = _d.pointerX, setPointerX = _d.setPointerX, pointerY = _d.pointerY, setPointerY = _d.setPointerY, pointerItem = _d.pointerItem, setPointerItem = _d.setPointerItem, pointerY2 = _d.pointerY2, setPointerY2 = _d.setPointerY2, pointerItem2 = _d.pointerItem2, setPointerItem2 = _d.setPointerItem2, pointerY3 = _d.pointerY3, setPointerY3 = _d.setPointerY3, pointerItem3 = _d.pointerItem3, setPointerItem3 = _d.setPointerItem3, pointerY4 = _d.pointerY4, setPointerY4 = _d.setPointerY4, pointerItem4 = _d.pointerItem4, setPointerItem4 = _d.setPointerItem4, pointerY5 = _d.pointerY5, setPointerY5 = _d.setPointerY5, pointerYsForDataSet = _d.pointerYsForDataSet, setPointerYsForDataSet = _d.setPointerYsForDataSet, pointerItem5 = _d.pointerItem5, setPointerItem5 = _d.setPointerItem5, secondaryPointerY = _d.secondaryPointerY, setSecondaryPointerY = _d.setSecondaryPointerY, secondaryPointerItem = _d.secondaryPointerItem, setSecondaryPointerItem = _d.setSecondaryPointerItem, pointerItemsForSet = _d.pointerItemsForSet, setPointerItemsForSet = _d.setPointerItemsForSet, secondaryPointerItemsForSet = _d.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _d.setSecondaryPointerItemsForSet, responderStartTime = _d.responderStartTime, setResponderStartTime = _d.setResponderStartTime, setResponderActive = _d.setResponderActive, points = _d.points, points2 = _d.points2, points3 = _d.points3, points4 = _d.points4, points5 = _d.points5, secondaryPoints = _d.secondaryPoints, fillPoints = _d.fillPoints, fillPoints2 = _d.fillPoints2, fillPoints3 = _d.fillPoints3, fillPoints4 = _d.fillPoints4, fillPoints5 = _d.fillPoints5, secondaryFillPoints = _d.secondaryFillPoints, pointsFromSet = _d.pointsFromSet, fillPointsFromSet = _d.fillPointsFromSet, arrowPointsFromSet = _d.arrowPointsFromSet, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, containerHeight = _d.containerHeight, data = _d.data, data2 = _d.data2, data3 = _d.data3, data4 = _d.data4, data5 = _d.data5, secondaryData = _d.secondaryData, dataSet = _d.dataSet, data0 = _d.data0, labelsExtraHeight = _d.labelsExtraHeight, animationDuration = _d.animationDuration, onDataChangeAnimationDuration = _d.onDataChangeAnimationDuration, animateTogether = _d.animateTogether, renderDataPointsAfterAnimationEnds = _d.renderDataPointsAfterAnimationEnds, animateOnDataChange = _d.animateOnDataChange, startIndex1 = _d.startIndex1, startIndex2 = _d.startIndex2, endIndex1 = _d.endIndex1, endIndex2 = _d.endIndex2, startIndex3 = _d.startIndex3, endIndex3 = _d.endIndex3, startIndex4 = _d.startIndex4, endIndex4 = _d.endIndex4, startIndex5 = _d.startIndex5, endIndex5 = _d.endIndex5, initialSpacing = _d.initialSpacing, thickness = _d.thickness, yAxisLabelWidth = _d.yAxisLabelWidth, spacing = _d.spacing, xAxisThickness = _d.xAxisThickness, dataPointsHeight1 = _d.dataPointsHeight1, dataPointsWidth1 = _d.dataPointsWidth1, dataPointsRadius1 = _d.dataPointsRadius1, dataPointsColor1 = _d.dataPointsColor1, dataPointsShape1 = _d.dataPointsShape1, dataPointsHeight2 = _d.dataPointsHeight2, dataPointsWidth2 = _d.dataPointsWidth2, dataPointsRadius2 = _d.dataPointsRadius2, dataPointsColor2 = _d.dataPointsColor2, dataPointsShape2 = _d.dataPointsShape2, dataPointsHeight3 = _d.dataPointsHeight3, dataPointsWidth3 = _d.dataPointsWidth3, dataPointsRadius3 = _d.dataPointsRadius3, dataPointsColor3 = _d.dataPointsColor3, dataPointsShape3 = _d.dataPointsShape3, dataPointsHeight4 = _d.dataPointsHeight4, dataPointsWidth4 = _d.dataPointsWidth4, dataPointsRadius4 = _d.dataPointsRadius4, dataPointsColor4 = _d.dataPointsColor4, dataPointsShape4 = _d.dataPointsShape4, dataPointsHeight5 = _d.dataPointsHeight5, dataPointsWidth5 = _d.dataPointsWidth5, dataPointsRadius5 = _d.dataPointsRadius5, dataPointsColor5 = _d.dataPointsColor5, dataPointsShape5 = _d.dataPointsShape5, getIsNthAreaChart = _d.getIsNthAreaChart, textFontSize1 = _d.textFontSize1, textFontSize2 = _d.textFontSize2, textFontSize3 = _d.textFontSize3, textFontSize4 = _d.textFontSize4, textFontSize5 = _d.textFontSize5, textColor1 = _d.textColor1, textColor2 = _d.textColor2, textColor3 = _d.textColor3, textColor4 = _d.textColor4, textColor5 = _d.textColor5, totalWidth = _d.totalWidth, maxValue = _d.maxValue, overflowTop = _d.overflowTop, extendedContainerHeight = _d.extendedContainerHeight, getX = _d.getX, getY = _d.getY, getSecondaryY = _d.getSecondaryY, secondaryMaxValue = _d.secondaryMaxValue, showValuesAsDataPointsText = _d.showValuesAsDataPointsText, thickness1 = _d.thickness1, thickness2 = _d.thickness2, thickness3 = _d.thickness3, thickness4 = _d.thickness4, thickness5 = _d.thickness5, zIndex1 = _d.zIndex1, zIndex2 = _d.zIndex2, zIndex3 = _d.zIndex3, zIndex4 = _d.zIndex4, zIndex5 = _d.zIndex5, strokeDashArray1 = _d.strokeDashArray1, strokeDashArray2 = _d.strokeDashArray2, strokeDashArray3 = _d.strokeDashArray3, strokeDashArray4 = _d.strokeDashArray4, strokeDashArray5 = _d.strokeDashArray5, rotateLabel = _d.rotateLabel, isAnimated = _d.isAnimated, hideDataPoints1 = _d.hideDataPoints1, hideDataPoints2 = _d.hideDataPoints2, hideDataPoints3 = _d.hideDataPoints3, hideDataPoints4 = _d.hideDataPoints4, hideDataPoints5 = _d.hideDataPoints5, color1 = _d.color1, color2 = _d.color2, color3 = _d.color3, color4 = _d.color4, color5 = _d.color5, startFillColor1 = _d.startFillColor1, endFillColor1 = _d.endFillColor1, startOpacity1 = _d.startOpacity1, endOpacity1 = _d.endOpacity1, startFillColor2 = _d.startFillColor2, endFillColor2 = _d.endFillColor2, startOpacity2 = _d.startOpacity2, endOpacity2 = _d.endOpacity2, startFillColor3 = _d.startFillColor3, endFillColor3 = _d.endFillColor3, startOpacity3 = _d.startOpacity3, endOpacity3 = _d.endOpacity3, startFillColor4 = _d.startFillColor4, endFillColor4 = _d.endFillColor4, startOpacity4 = _d.startOpacity4, endOpacity4 = _d.endOpacity4, startFillColor5 = _d.startFillColor5, endFillColor5 = _d.endFillColor5, startOpacity5 = _d.startOpacity5, endOpacity5 = _d.endOpacity5, arrowStrokeWidth1 = _d.arrowStrokeWidth1, arrowStrokeColor1 = _d.arrowStrokeColor1, arrowFillColor1 = _d.arrowFillColor1, arrowStrokeWidth2 = _d.arrowStrokeWidth2, arrowStrokeColor2 = _d.arrowStrokeColor2, arrowFillColor2 = _d.arrowFillColor2, arrowStrokeWidth3 = _d.arrowStrokeWidth3, arrowStrokeColor3 = _d.arrowStrokeColor3, arrowFillColor3 = _d.arrowFillColor3, arrowStrokeWidth4 = _d.arrowStrokeWidth4, arrowStrokeColor4 = _d.arrowStrokeColor4, arrowFillColor4 = _d.arrowFillColor4, arrowStrokeWidth5 = _d.arrowStrokeWidth5, arrowStrokeColor5 = _d.arrowStrokeColor5, arrowFillColor5 = _d.arrowFillColor5, arrowStrokeWidthsFromSet = _d.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _d.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _d.arrowFillColorsFromSet, secondaryLineConfig = _d.secondaryLineConfig, gradientDirection = _d.gradientDirection, stepHeight = _d.stepHeight, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _d.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, pointerConfig = _d.pointerConfig, pointerHeight = _d.pointerHeight, pointerWidth = _d.pointerWidth, pointerRadius = _d.pointerRadius, pointerColor = _d.pointerColor, pointerComponent = _d.pointerComponent, showPointerStrip = _d.showPointerStrip, pointerStripHeight = _d.pointerStripHeight, pointerStripWidth = _d.pointerStripWidth, pointerStripColor = _d.pointerStripColor, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerLabelComponent = _d.pointerLabelComponent, stripOverPointer = _d.stripOverPointer, shiftPointerLabelX = _d.shiftPointerLabelX, shiftPointerLabelY = _d.shiftPointerLabelY, pointerLabelWidth = _d.pointerLabelWidth, pointerLabelHeight = _d.pointerLabelHeight, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerVanishDelay = _d.pointerVanishDelay, activatePointersOnLongPress = _d.activatePointersOnLongPress, activatePointersInstantlyOnTouch = _d.activatePointersInstantlyOnTouch, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, resetPointerIndexOnRelease = _d.resetPointerIndexOnRelease, hidePointers = _d.hidePointers, hidePointer1 = _d.hidePointer1, hidePointer2 = _d.hidePointer2, hidePointer3 = _d.hidePointer3, hidePointer4 = _d.hidePointer4, hidePointer5 = _d.hidePointer5, cumulativeSpacing1 = _d.cumulativeSpacing1, cumulativeSpacing2 = _d.cumulativeSpacing2, cumulativeSpacing3 = _d.cumulativeSpacing3, cumulativeSpacing4 = _d.cumulativeSpacing4, cumulativeSpacing5 = _d.cumulativeSpacing5, cumulativeSpacingSecondary = _d.cumulativeSpacingSecondary, cumulativeSpacingForSet = _d.cumulativeSpacingForSet, hideSecondaryPointer = _d.hideSecondaryPointer, hidePointerDataPointForMissingValues = _d.hidePointerDataPointForMissingValues, pointerEvents = _d.pointerEvents, focusEnabled = _d.focusEnabled, showDataPointOnFocus = _d.showDataPointOnFocus, showStripOnFocus = _d.showStripOnFocus, stripOverDataPoints = _d.stripOverDataPoints, showTextOnFocus = _d.showTextOnFocus, showDataPointLabelOnFocus = _d.showDataPointLabelOnFocus, stripHeight = _d.stripHeight, stripWidth = _d.stripWidth, stripColor = _d.stripColor, stripOpacity = _d.stripOpacity, stripStrokeDashArray = _d.stripStrokeDashArray, unFocusOnPressOut = _d.unFocusOnPressOut, delayBeforeUnFocus = _d.delayBeforeUnFocus, _e = _d.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _e === void 0 ? 0 : _e, lineGradient = _d.lineGradient, lineGradientDirection = _d.lineGradientDirection, lineGradientStartColor = _d.lineGradientStartColor, lineGradientEndColor = _d.lineGradientEndColor, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, areaChart = _d.areaChart, mostNegativeValue = _d.mostNegativeValue, strips = _d.strips, lastLineNumber = _d.lastLineNumber, focusTogether = _d.focusTogether, focusProximity = _d.focusProximity;
+    var _d = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _d.curveType, scrollX = _d.scrollX, setScrollX = _d.setScrollX, arrow1Points = _d.arrow1Points, arrow2Points = _d.arrow2Points, arrow3Points = _d.arrow3Points, arrow4Points = _d.arrow4Points, arrow5Points = _d.arrow5Points, secondaryArrowPoints = _d.secondaryArrowPoints, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, pointerX = _d.pointerX, setPointerX = _d.setPointerX, pointerY = _d.pointerY, setPointerY = _d.setPointerY, pointerItem = _d.pointerItem, setPointerItem = _d.setPointerItem, pointerY2 = _d.pointerY2, setPointerY2 = _d.setPointerY2, pointerItem2 = _d.pointerItem2, setPointerItem2 = _d.setPointerItem2, pointerY3 = _d.pointerY3, setPointerY3 = _d.setPointerY3, pointerItem3 = _d.pointerItem3, setPointerItem3 = _d.setPointerItem3, pointerY4 = _d.pointerY4, setPointerY4 = _d.setPointerY4, pointerItem4 = _d.pointerItem4, setPointerItem4 = _d.setPointerItem4, pointerY5 = _d.pointerY5, setPointerY5 = _d.setPointerY5, pointerYsForDataSet = _d.pointerYsForDataSet, setPointerYsForDataSet = _d.setPointerYsForDataSet, pointerItem5 = _d.pointerItem5, setPointerItem5 = _d.setPointerItem5, secondaryPointerY = _d.secondaryPointerY, setSecondaryPointerY = _d.setSecondaryPointerY, secondaryPointerItem = _d.secondaryPointerItem, setSecondaryPointerItem = _d.setSecondaryPointerItem, pointerItemsForSet = _d.pointerItemsForSet, setPointerItemsForSet = _d.setPointerItemsForSet, secondaryPointerItemsForSet = _d.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _d.setSecondaryPointerItemsForSet, responderStartTime = _d.responderStartTime, setResponderStartTime = _d.setResponderStartTime, setResponderActive = _d.setResponderActive, points = _d.points, points2 = _d.points2, points3 = _d.points3, points4 = _d.points4, points5 = _d.points5, secondaryPoints = _d.secondaryPoints, fillPoints = _d.fillPoints, fillPoints2 = _d.fillPoints2, fillPoints3 = _d.fillPoints3, fillPoints4 = _d.fillPoints4, fillPoints5 = _d.fillPoints5, secondaryFillPoints = _d.secondaryFillPoints, pointsFromSet = _d.pointsFromSet, fillPointsFromSet = _d.fillPointsFromSet, arrowPointsFromSet = _d.arrowPointsFromSet, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, containerHeight = _d.containerHeight, data = _d.data, data2 = _d.data2, data3 = _d.data3, data4 = _d.data4, data5 = _d.data5, secondaryData = _d.secondaryData, dataSet = _d.dataSet, data0 = _d.data0, labelsExtraHeight = _d.labelsExtraHeight, animationDuration = _d.animationDuration, onDataChangeAnimationDuration = _d.onDataChangeAnimationDuration, animateTogether = _d.animateTogether, renderDataPointsAfterAnimationEnds = _d.renderDataPointsAfterAnimationEnds, animateOnDataChange = _d.animateOnDataChange, startIndex1 = _d.startIndex1, startIndex2 = _d.startIndex2, endIndex1 = _d.endIndex1, endIndex2 = _d.endIndex2, startIndex3 = _d.startIndex3, endIndex3 = _d.endIndex3, startIndex4 = _d.startIndex4, endIndex4 = _d.endIndex4, startIndex5 = _d.startIndex5, endIndex5 = _d.endIndex5, initialSpacing = _d.initialSpacing, thickness = _d.thickness, yAxisLabelWidth = _d.yAxisLabelWidth, spacing = _d.spacing, xAxisThickness = _d.xAxisThickness, dataPointsHeight1 = _d.dataPointsHeight1, dataPointsWidth1 = _d.dataPointsWidth1, dataPointsRadius1 = _d.dataPointsRadius1, dataPointsColor1 = _d.dataPointsColor1, dataPointsShape1 = _d.dataPointsShape1, dataPointsHeight2 = _d.dataPointsHeight2, dataPointsWidth2 = _d.dataPointsWidth2, dataPointsRadius2 = _d.dataPointsRadius2, dataPointsColor2 = _d.dataPointsColor2, dataPointsShape2 = _d.dataPointsShape2, dataPointsHeight3 = _d.dataPointsHeight3, dataPointsWidth3 = _d.dataPointsWidth3, dataPointsRadius3 = _d.dataPointsRadius3, dataPointsColor3 = _d.dataPointsColor3, dataPointsShape3 = _d.dataPointsShape3, dataPointsHeight4 = _d.dataPointsHeight4, dataPointsWidth4 = _d.dataPointsWidth4, dataPointsRadius4 = _d.dataPointsRadius4, dataPointsColor4 = _d.dataPointsColor4, dataPointsShape4 = _d.dataPointsShape4, dataPointsHeight5 = _d.dataPointsHeight5, dataPointsWidth5 = _d.dataPointsWidth5, dataPointsRadius5 = _d.dataPointsRadius5, dataPointsColor5 = _d.dataPointsColor5, dataPointsShape5 = _d.dataPointsShape5, getIsNthAreaChart = _d.getIsNthAreaChart, textFontSize1 = _d.textFontSize1, textFontSize2 = _d.textFontSize2, textFontSize3 = _d.textFontSize3, textFontSize4 = _d.textFontSize4, textFontSize5 = _d.textFontSize5, textColor1 = _d.textColor1, textColor2 = _d.textColor2, textColor3 = _d.textColor3, textColor4 = _d.textColor4, textColor5 = _d.textColor5, totalWidth = _d.totalWidth, maxValue = _d.maxValue, overflowTop = _d.overflowTop, extendedContainerHeight = _d.extendedContainerHeight, getX = _d.getX, getY = _d.getY, getSecondaryY = _d.getSecondaryY, secondaryMaxValue = _d.secondaryMaxValue, showValuesAsDataPointsText = _d.showValuesAsDataPointsText, thickness1 = _d.thickness1, thickness2 = _d.thickness2, thickness3 = _d.thickness3, thickness4 = _d.thickness4, thickness5 = _d.thickness5, zIndex1 = _d.zIndex1, zIndex2 = _d.zIndex2, zIndex3 = _d.zIndex3, zIndex4 = _d.zIndex4, zIndex5 = _d.zIndex5, strokeDashArray1 = _d.strokeDashArray1, strokeDashArray2 = _d.strokeDashArray2, strokeDashArray3 = _d.strokeDashArray3, strokeDashArray4 = _d.strokeDashArray4, strokeDashArray5 = _d.strokeDashArray5, rotateLabel = _d.rotateLabel, isAnimated = _d.isAnimated, hideDataPoints1 = _d.hideDataPoints1, hideDataPoints2 = _d.hideDataPoints2, hideDataPoints3 = _d.hideDataPoints3, hideDataPoints4 = _d.hideDataPoints4, hideDataPoints5 = _d.hideDataPoints5, color1 = _d.color1, color2 = _d.color2, color3 = _d.color3, color4 = _d.color4, color5 = _d.color5, startFillColor1 = _d.startFillColor1, endFillColor1 = _d.endFillColor1, startOpacity1 = _d.startOpacity1, endOpacity1 = _d.endOpacity1, startFillColor2 = _d.startFillColor2, endFillColor2 = _d.endFillColor2, startOpacity2 = _d.startOpacity2, endOpacity2 = _d.endOpacity2, startFillColor3 = _d.startFillColor3, endFillColor3 = _d.endFillColor3, startOpacity3 = _d.startOpacity3, endOpacity3 = _d.endOpacity3, startFillColor4 = _d.startFillColor4, endFillColor4 = _d.endFillColor4, startOpacity4 = _d.startOpacity4, endOpacity4 = _d.endOpacity4, startFillColor5 = _d.startFillColor5, endFillColor5 = _d.endFillColor5, startOpacity5 = _d.startOpacity5, endOpacity5 = _d.endOpacity5, arrowStrokeWidth1 = _d.arrowStrokeWidth1, arrowStrokeColor1 = _d.arrowStrokeColor1, arrowFillColor1 = _d.arrowFillColor1, arrowStrokeWidth2 = _d.arrowStrokeWidth2, arrowStrokeColor2 = _d.arrowStrokeColor2, arrowFillColor2 = _d.arrowFillColor2, arrowStrokeWidth3 = _d.arrowStrokeWidth3, arrowStrokeColor3 = _d.arrowStrokeColor3, arrowFillColor3 = _d.arrowFillColor3, arrowStrokeWidth4 = _d.arrowStrokeWidth4, arrowStrokeColor4 = _d.arrowStrokeColor4, arrowFillColor4 = _d.arrowFillColor4, arrowStrokeWidth5 = _d.arrowStrokeWidth5, arrowStrokeColor5 = _d.arrowStrokeColor5, arrowFillColor5 = _d.arrowFillColor5, arrowStrokeWidthsFromSet = _d.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _d.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _d.arrowFillColorsFromSet, secondaryLineConfig = _d.secondaryLineConfig, gradientDirection = _d.gradientDirection, stepHeight = _d.stepHeight, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _d.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, pointerConfig = _d.pointerConfig, pointerHeight = _d.pointerHeight, pointerWidth = _d.pointerWidth, pointerRadius = _d.pointerRadius, pointerColor = _d.pointerColor, pointerComponent = _d.pointerComponent, showPointerStrip = _d.showPointerStrip, pointerStripHeight = _d.pointerStripHeight, pointerStripWidth = _d.pointerStripWidth, pointerStripColor = _d.pointerStripColor, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerLabelComponent = _d.pointerLabelComponent, stripOverPointer = _d.stripOverPointer, shiftPointerLabelX = _d.shiftPointerLabelX, shiftPointerLabelY = _d.shiftPointerLabelY, pointerLabelWidth = _d.pointerLabelWidth, pointerLabelHeight = _d.pointerLabelHeight, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerVanishDelay = _d.pointerVanishDelay, activatePointersOnLongPress = _d.activatePointersOnLongPress, activatePointersInstantlyOnTouch = _d.activatePointersInstantlyOnTouch, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, resetPointerIndexOnRelease = _d.resetPointerIndexOnRelease, hidePointers = _d.hidePointers, hidePointer1 = _d.hidePointer1, hidePointer2 = _d.hidePointer2, hidePointer3 = _d.hidePointer3, hidePointer4 = _d.hidePointer4, hidePointer5 = _d.hidePointer5, cumulativeSpacing1 = _d.cumulativeSpacing1, cumulativeSpacing2 = _d.cumulativeSpacing2, cumulativeSpacing3 = _d.cumulativeSpacing3, cumulativeSpacing4 = _d.cumulativeSpacing4, cumulativeSpacing5 = _d.cumulativeSpacing5, cumulativeSpacingSecondary = _d.cumulativeSpacingSecondary, cumulativeSpacingForSet = _d.cumulativeSpacingForSet, hideSecondaryPointer = _d.hideSecondaryPointer, hidePointerDataPointForMissingValues = _d.hidePointerDataPointForMissingValues, pointerEvents = _d.pointerEvents, focusEnabled = _d.focusEnabled, showDataPointOnFocus = _d.showDataPointOnFocus, showStripOnFocus = _d.showStripOnFocus, stripOverDataPoints = _d.stripOverDataPoints, showTextOnFocus = _d.showTextOnFocus, showDataPointLabelOnFocus = _d.showDataPointLabelOnFocus, stripHeight = _d.stripHeight, stripWidth = _d.stripWidth, stripColor = _d.stripColor, stripOpacity = _d.stripOpacity, stripStrokeDashArray = _d.stripStrokeDashArray, _e = _d.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _e === void 0 ? 0 : _e, lineGradient = _d.lineGradient, lineGradientDirection = _d.lineGradientDirection, lineGradientStartColor = _d.lineGradientStartColor, lineGradientEndColor = _d.lineGradientEndColor, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, areaChart = _d.areaChart, mostNegativeValue = _d.mostNegativeValue, strips = _d.strips, lastLineNumber = _d.lastLineNumber, focusTogether = _d.focusTogether, selectedLineNumber = _d.selectedLineNumber, handleFocus = _d.handleFocus, handleUnFocus = _d.handleUnFocus;
     var svgHeight = containerHeightIncludingBelowXAxis +
         ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : dataPointsRadius1);
     var secondaryXAxis = props.secondaryXAxis, intersectionAreaConfig = props.intersectionAreaConfig;
@@ -259,7 +258,7 @@ export var LineChart = function (props) {
             props.onFocus(item, index);
         }
     };
-    var _f = __read(useState(-1), 2), selectedLineNumber = _f[0], setSelectedLineNumber = _f[1];
+    // const [selectedLineNumber, setSelectedLineNumber] = useState(-1);
     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) {
@@ -319,80 +318,15 @@ export var LineChart = function (props) {
             if (showValuesAsDataPointsText) {
                 text = originalDataFromProps[index].value;
             }
+            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 _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                                 var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
-                                var lineNumber = 0;
-                                if (dataSet) {
-                                    var minDistance_1 = Infinity;
-                                    dataSet.forEach(function (setItem, setIndex) {
-                                        var _a;
-                                        var distance = Math.abs(getY((_a = setItem.data[index]) === null || _a === void 0 ? void 0 : _a.value) - locationY);
-                                        if (distance < minDistance_1) {
-                                            minDistance_1 = distance;
-                                            lineNumber = setIndex + 1;
-                                        }
-                                    });
-                                }
-                                else {
-                                    var distance1 = void 0, distance2 = void 0, distance3 = void 0, distance4 = void 0, distance5 = void 0, distance6 = void 0;
-                                    var minDistance = Infinity;
-                                    if (typeof ((_a = data[index]) === null || _a === void 0 ? void 0 : _a.value) === 'number') {
-                                        distance1 = Math.abs(getY((_b = data[index]) === null || _b === void 0 ? void 0 : _b.value) - locationY);
-                                        minDistance = distance1;
-                                        if (distance1 < focusProximity)
-                                            lineNumber = 1;
-                                    }
-                                    if (typeof ((_c = data2[index]) === null || _c === void 0 ? void 0 : _c.value) === 'number') {
-                                        distance2 = Math.abs(getY((_d = data2[index]) === null || _d === void 0 ? void 0 : _d.value) - locationY);
-                                        if (minDistance > distance2 &&
-                                            distance2 < focusProximity) {
-                                            minDistance = distance2;
-                                            lineNumber = 2;
-                                        }
-                                    }
-                                    if (typeof ((_e = data3[index]) === null || _e === void 0 ? void 0 : _e.value) === 'number') {
-                                        distance3 = Math.abs(getY((_f = data3[index]) === null || _f === void 0 ? void 0 : _f.value) - locationY);
-                                        if (minDistance > distance3 &&
-                                            distance3 < focusProximity) {
-                                            minDistance = distance3;
-                                            lineNumber = 3;
-                                        }
-                                    }
-                                    if (typeof ((_g = data4[index]) === null || _g === void 0 ? void 0 : _g.value) === 'number') {
-                                        distance4 = Math.abs(getY((_h = data4[index]) === null || _h === void 0 ? void 0 : _h.value) - locationY);
-                                        if (minDistance > distance4 &&
-                                            distance4 < focusProximity) {
-                                            minDistance = distance4;
-                                            lineNumber = 4;
-                                        }
-                                    }
-                                    if (typeof ((_j = data5[index]) === null || _j === void 0 ? void 0 : _j.value) === 'number') {
-                                        distance5 = Math.abs(getY((_k = data5[index]) === null || _k === void 0 ? void 0 : _k.value) - locationY);
-                                        if (minDistance > distance5 &&
-                                            distance5 < focusProximity) {
-                                            minDistance = distance5;
-                                            lineNumber = 5;
-                                        }
-                                    }
-                                    if (typeof ((_l = secondaryData[index]) === null || _l === void 0 ? void 0 : _l.value) === 'number') {
-                                        distance6 = Math.abs(getY((_m = secondaryData[index]) === null || _m === void 0 ? void 0 : _m.value) - locationY);
-                                        if (minDistance > distance6 &&
-                                            distance6 < focusProximity) {
-                                            minDistance = distance6;
-                                            lineNumber = 6666;
-                                        }
-                                    }
-                                }
-                                setSelectedLineNumber(lineNumber - 1);
-                                if (lineNumber) {
-                                    onStripPress(item, index);
-                                }
-                            }, onPressOut: function () {
-                                if (unFocusOnPressOut) {
-                                    setTimeout(function () { return setSelectedIndex(-1); }, delayBeforeUnFocus);
-                                }
-                            } })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
+                                handleFocus(index, item, locationY, onStripPress);
+                            }, onPressOut: handleUnFocus })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_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
                                         ? index === selectedIndex
@@ -403,7 +337,13 @@ export var LineChart = function (props) {
                                             ? item.onPress(item, index)
                                             : props.onPress
                                                 ? props.onPress(item, index)
-                                                : null;
+                                                : focusEnabled
+                                                    ? handleFocus(index, item, 0, onStripPress)
+                                                    : null;
+                                    }, onPressOut: function () {
+                                        if (!item.onPress && !props.onPress && focusEnabled) {
+                                            handleUnFocus();
+                                        }
                                     } })) }, index)) : (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Circle, { cx: getX(spacingArray, index), cy: getYOrSecondaryY(item.value), r: dataPointsRadius, fill: showDataPointOnFocus
                                         ? index === selectedIndex
                                             ? dataPointsColor
@@ -413,34 +353,28 @@ export var LineChart = function (props) {
                                             ? item.onPress(item, index)
                                             : props.onPress
                                                 ? props.onPress(item, index)
-                                                : null;
-                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (_jsx(View, { style: [
-                                    styles.customDataPointContainer,
-                                    {
-                                        zIndex: index === selectedIndex ? 1000 : 0,
-                                        top: containerHeight +
-                                            (item.dataPointLabelShiftY ||
-                                                props.dataPointLabelShiftY ||
-                                                0) -
-                                            (item.value * containerHeight) / maxValue,
-                                        left: initialSpacing +
-                                            (item.dataPointLabelShiftX ||
-                                                props.dataPointLabelShiftX ||
-                                                0) -
-                                            (item.dataPointLabelWidth
-                                                ? item.dataPointLabelWidth + 20
-                                                : props.dataPointLabelWidth
-                                                    ? props.dataPointLabelWidth + 20
-                                                    : 50) /
-                                                2 +
-                                            spacing * index,
-                                    },
-                                ], children: showDataPointLabelOnFocus
+                                                : focusEnabled
+                                                    ? handleFocus(index, item, 0, onStripPress)
+                                                    : null;
+                                    }, onPressOut: function () {
+                                        if (!item.onPress && !props.onPress && focusEnabled) {
+                                            handleUnFocus();
+                                        }
+                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing +
+                                    (item.dataPointLabelShiftX ||
+                                        props.dataPointLabelShiftX ||
+                                        0) -
+                                    dataPointLabelWidth / 2 +
+                                    spacing * index, y: containerHeight +
+                                    (item.dataPointLabelShiftY ||
+                                        props.dataPointLabelShiftY ||
+                                        0) -
+                                    (item.value * containerHeight) / maxValue, children: showDataPointLabelOnFocus
                                     ? index === selectedIndex &&
                                         (focusTogether || key == selectedLineNumber)
-                                        ? dataPointLabelComponent()
+                                        ? dataPointLabelComponent(item, index) // not pushed in latest release
                                         : null
-                                    : dataPointLabelComponent() })) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(spacingArray, index) -
+                                    : 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/RadarChart/index.d.ts

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

package/dist/RadarChart/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View } from 'react-native';
+import Svg, { Line, Polygon, Circle, Text as SvgText, Defs, RadialGradient, Stop, } from 'react-native-svg';
+import { useRadarChart } from 'gifted-charts-core';
+export var RadarChart = function (props) {
+    var _a = useRadarChart(props), data = _a.data, center = _a.center, radius = _a.radius, chartSize = _a.chartSize, polarToCartesian = _a.polarToCartesian, labels = _a.labels, labelConfigArray = _a.labelConfigArray, labelsPositionOffset = _a.labelsPositionOffset, dataLabelConfigArray = _a.dataLabelConfigArray, maxValue = _a.maxValue, dataLabels = _a.dataLabels, gridSections = _a.gridSections, gridFill = _a.gridFill, fontSize = _a.fontSize, stroke = _a.stroke, textAnchor = _a.textAnchor, alignmentBaseline = _a.alignmentBaseline, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, dataLabelsFontSize = _a.dataLabelsFontSize, dataLabelsColor = _a.dataLabelsColor, dataLabelsTextAnchor = _a.dataLabelsTextAnchor, dataLabelsAlignmentBaseline = _a.dataLabelsAlignmentBaseline, dataLabelsPositionOffset = _a.dataLabelsPositionOffset, dataLabelsFontWeight = _a.dataLabelsFontWeight, dataLabelsFontFamily = _a.dataLabelsFontFamily, polygonStroke = _a.polygonStroke, polygonStrokeWidth = _a.polygonStrokeWidth, polygonStrokeDashArray = _a.polygonStrokeDashArray, polygonFill = _a.polygonFill, polygonGradientColor = _a.polygonGradientColor, polygonShowGradient = _a.polygonShowGradient, polygonOpacity = _a.polygonOpacity, polygonGradientOpacity = _a.polygonGradientOpacity, asterLinesStroke = _a.asterLinesStroke, asterLinesStrokeWidth = _a.asterLinesStrokeWidth, asterLinesStrokeDashArray = _a.asterLinesStrokeDashArray, points = _a.points, polygonPoints = _a.polygonPoints, angleStep = _a.angleStep, circular = _a.circular, hideGrid = _a.hideGrid, hideAsterLines = _a.hideAsterLines, getGridLevelProps = _a.getGridLevelProps;
+    return (_jsx(View, { style: { justifyContent: 'center', alignItems: 'center' }, children: _jsxs(Svg, { height: chartSize, width: chartSize, children: [_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') }), 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)))] }));
+                    }), _jsx(Polygon, { points: polygonPoints, fill: polygonShowGradient ? 'url(#polygon)' : polygonFill, stroke: polygonStroke, strokeWidth: polygonStrokeWidth, strokeDasharray: polygonStrokeDashArray, opacity: polygonOpacity }), (dataLabels === null || dataLabels === void 0 ? void 0 : dataLabels.length) ? (_jsx(SvgText, { children: dataLabels.map(function (label, index) {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                        var _q = polarToCartesian(index * angleStep, data[index] + dataLabelsPositionOffset), x = _q.x, y = _q.y;
+                        var dataLabelsFontSizeLocal = (_b = (_a = dataLabelConfigArray === null || dataLabelConfigArray === void 0 ? void 0 : dataLabelConfigArray[index]) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : dataLabelsFontSize;
+                        var dataLabelsFontWeightLocal = (_d = (_c = dataLabelConfigArray === null || dataLabelConfigArray === void 0 ? void 0 : dataLabelConfigArray[index]) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : dataLabelsFontWeight;
+                        var dataLabelsFontFamilyLocal = (_f = (_e = dataLabelConfigArray === null || dataLabelConfigArray === void 0 ? void 0 : dataLabelConfigArray[index]) === null || _e === void 0 ? void 0 : _e.fontFamily) !== null && _f !== void 0 ? _f : dataLabelsFontFamily;
+                        var dataLabelsColorLocal = (_h = (_g = dataLabelConfigArray === null || dataLabelConfigArray === void 0 ? void 0 : dataLabelConfigArray[index]) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : dataLabelsColor;
+                        var dataLabelsTextAnchorLocal = (_k = (_j = dataLabelConfigArray === null || dataLabelConfigArray === void 0 ? void 0 : dataLabelConfigArray[index]) === null || _j === void 0 ? void 0 : _j.textAnchor) !== null && _k !== void 0 ? _k : dataLabelsTextAnchor;
+                        var dataLabelsAlignmentBaselineLocal = (_m = (_l = dataLabelConfigArray === null || dataLabelConfigArray === void 0 ? void 0 : dataLabelConfigArray[index]) === null || _l === void 0 ? void 0 : _l.alignmentBaseline) !== null && _m !== void 0 ? _m : dataLabelsAlignmentBaseline;
+                        return (_jsx(SvgText, { x: x, y: y, fontSize: dataLabelsFontSizeLocal, fill: dataLabelsColorLocal, fontWeight: dataLabelsFontWeightLocal, fontFamily: dataLabelsFontFamilyLocal, textAnchor: (_o = dataLabelsTextAnchorLocal) !== null && _o !== void 0 ? _o : 'middle', alignmentBaseline: (_p = dataLabelsAlignmentBaselineLocal) !== null && _p !== void 0 ? _p : 'middle', children: label }, "data-label-".concat(index)));
+                    }) })) : null, hideAsterLines
+                    ? null
+                    : labels.map(function (_, index) {
+                        var angle = index * angleStep;
+                        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)));
+                    }), labels.map(function (category, index) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                    var angle = index * angleStep;
+                    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 }, "label-".concat(index)));
+                })] }) }));
+};

package/dist/index.d.ts

@@ -4,4 +4,5 @@ export { PieChartPro } from './PieChartPro';
 export { LineChart } from './LineChart';
 export { LineChartBicolor } from './LineChart/LineChartBicolor';
 export { PopulationPyramid } from './PopulationPyramid';
-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, yAxisSides, EdgePosition, type DataSet, type DataSetNullSafe, type Linecap, } from 'gifted-charts-core';
+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';

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.49",
+  "version": "1.4.51",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid 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.50"
+    "gifted-charts-core": "0.1.53"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",