react-native-gifted-charts 1.4.44 → 1.4.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # react-native-gifted-charts
2
-
2
+ <p align="center">
3
+ <a href="https://gifted-charts.web.app">
4
+ <img src="/demos/favicon.png" height="auto" width="26" height="26" />
5
+ </a> &nbsp; &nbsp;
6
+ <a href="https://www.npmjs.com/package/react-native-gifted-charts">
7
+ <img src="/demos/npmIcon.png" height="auto" width="28" height="28" />
8
+ </a> &nbsp; &nbsp;
9
+ <a href="https://discord.gg/fnpcvzhe">
10
+ <img src="/demos/discord.png" height="auto" width="30" height="30" />
11
+ </a>
12
+ </p>
3
13
  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.
4
14
 
5
15
  ### Yet another chart library? Why?
@@ -35,14 +45,14 @@ See the **[release changes by version here.](release-notes/release-notes.md)**
35
45
  </tr>
36
46
 
37
47
  <tr>
48
+ <td><img src='/demos/crossHair.gif' alt='' height=280 /></td>
38
49
  <td><img src='/demos/movingBars.gif' alt='' width=270 height=300/></td>
39
- <td><img src='/demos/pielabbelled.svg' alt='' height=280 width=270/></td>
40
- </tr>
41
50
  <tr>
42
- <td><img src='/demos/pyrLarge.png' alt='' height=280 width=260/></td>
43
- <td><img src='/demos/popnPyramidLabelled.png' alt='' height=280 width=300/></td>
51
+ <td><img src='/demos/pyrLarge.png' alt='' height=280 width=260/></td>
52
+ <td><img src='/demos/ppnLabelled.png' alt='' height=280 width=300/></td>
44
53
  </tr>
45
54
  </table>
55
+ <img src='/demos/pieExt.png' alt='' height=280 />
46
56
 
47
57
  ---
48
58
 
@@ -125,7 +135,7 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
125
135
 
126
136
  Test strategy and cases are discussed here- [TESTS.md](./TESTS.md) <br />
127
137
  Pixel perfection is assured using [react-native-screenshot-test](https://www.npmjs.com/package/react-native-screenshot-test). <br/>
128
- 200+ screenshot tests have been written. See the [Reports here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html).
138
+ 220+ screenshot tests have been written. See the [Reports here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html).
129
139
 
130
140
  Screenshot tests are written in a separate repo named [TestingCharts](https://github.com/Abhinandan-Kushwaha/TestingCharts)
131
141
 
@@ -6,8 +6,8 @@ export var Pointer = function (props) {
6
6
  return null;
7
7
  return (_jsx(View, { style: {
8
8
  position: 'absolute',
9
- left: pointerX + (pointerX.pointerShiftX || 0),
10
- top: pointerYLocal - 2,
9
+ left: pointerX + 1 + (pointerX.pointerShiftX || 0),
10
+ top: pointerYLocal - 4,
11
11
  }, children: pointerComponent ? (pointerComponent()) : (_jsx(View, { style: {
12
12
  height: pointerHeight || pointerRadius * 2,
13
13
  width: pointerWidth || pointerRadius * 2,
@@ -3,42 +3,53 @@ import { View } from 'react-native';
3
3
  import Svg, { Line } from 'react-native-svg';
4
4
  import { getTopAndLeftForStripAndLabel, } from 'gifted-charts-core';
5
5
  export var StripAndLabel = function (props) {
6
- var _a;
7
- var pointerX = props.pointerX, pointerLabelWidth = props.pointerLabelWidth, pointerRadius = props.pointerRadius, pointerWidth = props.pointerWidth, pointerYLocal = props.pointerYLocal, pointerStripUptoDataPoint = props.pointerStripUptoDataPoint, pointerStripHeight = props.pointerStripHeight, pointerItemLocal = props.pointerItemLocal, showPointerStrip = props.showPointerStrip, pointerStripWidth = props.pointerStripWidth, containerHeight = props.containerHeight, xAxisThickness = props.xAxisThickness, pointerStripColor = props.pointerStripColor, pointerConfig = props.pointerConfig, pointerLabelComponent = props.pointerLabelComponent, secondaryPointerItem = props.secondaryPointerItem, pointerItemsForSet = props.pointerItemsForSet, secondaryPointerItemsForSet = props.secondaryPointerItemsForSet, pointerEvents = props.pointerEvents, isBarChart = props.isBarChart, pointerIndex = props.pointerIndex, hasDataSet = props.hasDataSet, containsNegative = props.containsNegative;
8
- var _b = getTopAndLeftForStripAndLabel(props), top = _b.top, left = _b.left;
6
+ var _a, _b, _c, _d, _e, _f, _g, _h;
7
+ var pointerX = props.pointerX, pointerLabelWidth = props.pointerLabelWidth, pointerRadius = props.pointerRadius, pointerWidth = props.pointerWidth, pointerYLocal = props.pointerYLocal, pointerStripUptoDataPoint = props.pointerStripUptoDataPoint, pointerStripHeight = props.pointerStripHeight, pointerItemLocal = props.pointerItemLocal, showPointerStrip = props.showPointerStrip, pointerStripWidth = props.pointerStripWidth, containerHeight = props.containerHeight, xAxisThickness = props.xAxisThickness, pointerStripColor = props.pointerStripColor, pointerConfig = props.pointerConfig, pointerLabelComponent = props.pointerLabelComponent, secondaryPointerItem = props.secondaryPointerItem, pointerItemsForSet = props.pointerItemsForSet, secondaryPointerItemsForSet = props.secondaryPointerItemsForSet, pointerEvents = props.pointerEvents, isBarChart = props.isBarChart, pointerIndex = props.pointerIndex, hasDataSet = props.hasDataSet, containsNegative = props.containsNegative, horizontalStripConfig = props.horizontalStripConfig, screenWidth = props.screenWidth;
8
+ var _j = getTopAndLeftForStripAndLabel(props), top = _j.top, left = _j.left;
9
9
  if (isNaN(top) || typeof top !== 'number')
10
10
  return null;
11
11
  return (_jsxs(View, { style: {
12
12
  position: 'absolute',
13
- left: pointerX + (((_a = pointerItemLocal[0]) === null || _a === void 0 ? void 0 : _a.pointerShiftX) || 0),
14
13
  top: pointerYLocal,
15
14
  }, children: [(isBarChart
16
15
  ? showPointerStrip && !pointerLabelComponent
17
- : showPointerStrip) ? (_jsx(View, { style: {
16
+ : showPointerStrip) ? (_jsxs(View, { style: {
18
17
  position: 'absolute',
19
- left: (pointerRadius || pointerWidth) - pointerStripWidth / 4,
20
- top: containsNegative
21
- ? 0
22
- : pointerStripUptoDataPoint
23
- ? pointerRadius || pointerStripHeight / 2
24
- : -pointerYLocal + 8,
25
- width: pointerStripWidth,
26
- height: pointerStripUptoDataPoint
27
- ? containerHeight - pointerYLocal + 4 - xAxisThickness
28
- : pointerStripHeight + (containsNegative ? 10 : 0),
29
- marginTop: pointerStripUptoDataPoint
30
- ? 0
31
- : containsNegative
32
- ? -pointerYLocal
33
- : containerHeight - pointerStripHeight,
34
- }, children: _jsx(Svg, { children: _jsx(Line, { stroke: pointerStripColor, strokeWidth: pointerStripWidth, strokeDasharray: (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray)
35
- ? pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray
36
- : '', x1: 0, y1: 0, x2: 0, y2: pointerStripUptoDataPoint
37
- ? containerHeight - pointerYLocal + 4 - xAxisThickness
38
- : pointerStripHeight + 10 }) }) })) : null, pointerLabelComponent ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: [
18
+ left: -pointerStripWidth / 4,
19
+ top: containsNegative ? 0 : -pointerYLocal + 8 + xAxisThickness,
20
+ width: screenWidth,
21
+ height: containerHeight,
22
+ }, children: [_jsxs(Svg, { children: [_jsx(Line, { stroke: pointerStripColor, strokeWidth: pointerStripWidth, strokeDasharray: (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray)
23
+ ? pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray
24
+ : '', x1: pointerX +
25
+ pointerRadius +
26
+ 2 -
27
+ pointerStripWidth / 2 +
28
+ (((_a = pointerItemLocal[0]) === null || _a === void 0 ? void 0 : _a.pointerShiftX) || 0), y1: pointerStripUptoDataPoint
29
+ ? pointerYLocal + pointerRadius - 4
30
+ : containerHeight - pointerStripHeight, x2: pointerX +
31
+ pointerRadius +
32
+ 2 -
33
+ pointerStripWidth / 2 +
34
+ (((_b = pointerItemLocal[0]) === null || _b === void 0 ? void 0 : _b.pointerShiftX) || 0), y2: containerHeight }), horizontalStripConfig && (_jsx(Line, { stroke: (_c = horizontalStripConfig.color) !== null && _c !== void 0 ? _c : pointerStripColor, strokeWidth: (_d = horizontalStripConfig.thickness) !== null && _d !== void 0 ? _d : pointerStripWidth, strokeDasharray: ((_f = (_e = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.horizontalStripConfig) === null || _e === void 0 ? void 0 : _e.strokeDashArray) !== null && _f !== void 0 ? _f : pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray)
35
+ ? pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray
36
+ : '', x1: 0, y1: pointerYLocal - 7, x2: horizontalStripConfig.horizontalStripUptoDataPoint
37
+ ? pointerX + 2
38
+ : screenWidth, y2: pointerYLocal - 7 }))] }), (horizontalStripConfig === null || horizontalStripConfig === void 0 ? void 0 : horizontalStripConfig.labelComponent) ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: [
39
+ {
40
+ position: 'absolute',
41
+ left: 0,
42
+ top: pointerYLocal -
43
+ 3 -
44
+ ((_g = horizontalStripConfig.labelComponentHeight) !== null && _g !== void 0 ? _g : 30) / 2,
45
+ width: pointerLabelWidth,
46
+ },
47
+ ], children: (_h = horizontalStripConfig === null || horizontalStripConfig === void 0 ? void 0 : horizontalStripConfig.labelComponent) === null || _h === void 0 ? void 0 : _h.call(horizontalStripConfig, hasDataSet ? pointerItemsForSet : pointerItemLocal, hasDataSet
48
+ ? secondaryPointerItemsForSet
49
+ : [secondaryPointerItem], pointerIndex) })) : null] })) : null, pointerLabelComponent ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: [
39
50
  {
40
51
  position: 'absolute',
41
- left: left,
52
+ left: left + pointerX,
42
53
  top: top,
43
54
  marginTop: pointerStripUptoDataPoint
44
55
  ? 0
@@ -46,7 +46,7 @@ import { StripAndLabel } from '../Components/common/StripAndLabel';
46
46
  import { Pointer } from '../Components/common/Pointer';
47
47
  var AnimatedPath = Animated.createAnimatedComponent(Path);
48
48
  export var LineChart = function (props) {
49
- var _a, _b, _c;
49
+ var _a, _b;
50
50
  var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
51
51
  var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
52
52
  var heightValue = useMemo(function () { return new Animated.Value(0); }, []);
@@ -55,7 +55,7 @@ export var LineChart = function (props) {
55
55
  var widthValue3 = useMemo(function () { return new Animated.Value(0); }, []);
56
56
  var widthValue4 = useMemo(function () { return new Animated.Value(0); }, []);
57
57
  var widthValue5 = useMemo(function () { return new Animated.Value(0); }, []);
58
- 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, 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, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, 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, pointerEvents = _d.pointerEvents, focusEnabled = _d.focusEnabled, showDataPointOnFocus = _d.showDataPointOnFocus, showStripOnFocus = _d.showStripOnFocus, 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;
58
+ var _c = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _c.curveType, scrollX = _c.scrollX, setScrollX = _c.setScrollX, arrow1Points = _c.arrow1Points, arrow2Points = _c.arrow2Points, arrow3Points = _c.arrow3Points, arrow4Points = _c.arrow4Points, arrow5Points = _c.arrow5Points, secondaryArrowPoints = _c.secondaryArrowPoints, pointerIndex = _c.pointerIndex, setPointerIndex = _c.setPointerIndex, pointerX = _c.pointerX, setPointerX = _c.setPointerX, pointerY = _c.pointerY, setPointerY = _c.setPointerY, pointerItem = _c.pointerItem, setPointerItem = _c.setPointerItem, pointerY2 = _c.pointerY2, setPointerY2 = _c.setPointerY2, pointerItem2 = _c.pointerItem2, setPointerItem2 = _c.setPointerItem2, pointerY3 = _c.pointerY3, setPointerY3 = _c.setPointerY3, pointerItem3 = _c.pointerItem3, setPointerItem3 = _c.setPointerItem3, pointerY4 = _c.pointerY4, setPointerY4 = _c.setPointerY4, pointerItem4 = _c.pointerItem4, setPointerItem4 = _c.setPointerItem4, pointerY5 = _c.pointerY5, setPointerY5 = _c.setPointerY5, pointerYsForDataSet = _c.pointerYsForDataSet, setPointerYsForDataSet = _c.setPointerYsForDataSet, pointerItem5 = _c.pointerItem5, setPointerItem5 = _c.setPointerItem5, secondaryPointerY = _c.secondaryPointerY, setSecondaryPointerY = _c.setSecondaryPointerY, secondaryPointerItem = _c.secondaryPointerItem, setSecondaryPointerItem = _c.setSecondaryPointerItem, pointerItemsForSet = _c.pointerItemsForSet, setPointerItemsForSet = _c.setPointerItemsForSet, secondaryPointerItemsForSet = _c.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _c.setSecondaryPointerItemsForSet, responderStartTime = _c.responderStartTime, setResponderStartTime = _c.setResponderStartTime, setResponderActive = _c.setResponderActive, points = _c.points, points2 = _c.points2, points3 = _c.points3, points4 = _c.points4, points5 = _c.points5, secondaryPoints = _c.secondaryPoints, fillPoints = _c.fillPoints, fillPoints2 = _c.fillPoints2, fillPoints3 = _c.fillPoints3, fillPoints4 = _c.fillPoints4, fillPoints5 = _c.fillPoints5, secondaryFillPoints = _c.secondaryFillPoints, pointsFromSet = _c.pointsFromSet, fillPointsFromSet = _c.fillPointsFromSet, arrowPointsFromSet = _c.arrowPointsFromSet, selectedIndex = _c.selectedIndex, setSelectedIndex = _c.setSelectedIndex, containerHeight = _c.containerHeight, data = _c.data, data2 = _c.data2, data3 = _c.data3, data4 = _c.data4, data5 = _c.data5, secondaryData = _c.secondaryData, dataSet = _c.dataSet, data0 = _c.data0, labelsExtraHeight = _c.labelsExtraHeight, animationDuration = _c.animationDuration, onDataChangeAnimationDuration = _c.onDataChangeAnimationDuration, animateTogether = _c.animateTogether, animateOnDataChange = _c.animateOnDataChange, startIndex1 = _c.startIndex1, startIndex2 = _c.startIndex2, endIndex1 = _c.endIndex1, endIndex2 = _c.endIndex2, startIndex3 = _c.startIndex3, endIndex3 = _c.endIndex3, startIndex4 = _c.startIndex4, endIndex4 = _c.endIndex4, startIndex5 = _c.startIndex5, endIndex5 = _c.endIndex5, initialSpacing = _c.initialSpacing, thickness = _c.thickness, yAxisLabelWidth = _c.yAxisLabelWidth, spacing = _c.spacing, xAxisThickness = _c.xAxisThickness, dataPointsHeight1 = _c.dataPointsHeight1, dataPointsWidth1 = _c.dataPointsWidth1, dataPointsRadius1 = _c.dataPointsRadius1, dataPointsColor1 = _c.dataPointsColor1, dataPointsShape1 = _c.dataPointsShape1, dataPointsHeight2 = _c.dataPointsHeight2, dataPointsWidth2 = _c.dataPointsWidth2, dataPointsRadius2 = _c.dataPointsRadius2, dataPointsColor2 = _c.dataPointsColor2, dataPointsShape2 = _c.dataPointsShape2, dataPointsHeight3 = _c.dataPointsHeight3, dataPointsWidth3 = _c.dataPointsWidth3, dataPointsRadius3 = _c.dataPointsRadius3, dataPointsColor3 = _c.dataPointsColor3, dataPointsShape3 = _c.dataPointsShape3, dataPointsHeight4 = _c.dataPointsHeight4, dataPointsWidth4 = _c.dataPointsWidth4, dataPointsRadius4 = _c.dataPointsRadius4, dataPointsColor4 = _c.dataPointsColor4, dataPointsShape4 = _c.dataPointsShape4, dataPointsHeight5 = _c.dataPointsHeight5, dataPointsWidth5 = _c.dataPointsWidth5, dataPointsRadius5 = _c.dataPointsRadius5, dataPointsColor5 = _c.dataPointsColor5, dataPointsShape5 = _c.dataPointsShape5, getIsNthAreaChart = _c.getIsNthAreaChart, textFontSize1 = _c.textFontSize1, textFontSize2 = _c.textFontSize2, textFontSize3 = _c.textFontSize3, textFontSize4 = _c.textFontSize4, textFontSize5 = _c.textFontSize5, textColor1 = _c.textColor1, textColor2 = _c.textColor2, textColor3 = _c.textColor3, textColor4 = _c.textColor4, textColor5 = _c.textColor5, totalWidth = _c.totalWidth, maxValue = _c.maxValue, overflowTop = _c.overflowTop, extendedContainerHeight = _c.extendedContainerHeight, getX = _c.getX, getY = _c.getY, getSecondaryY = _c.getSecondaryY, secondaryMaxValue = _c.secondaryMaxValue, showValuesAsDataPointsText = _c.showValuesAsDataPointsText, thickness1 = _c.thickness1, thickness2 = _c.thickness2, thickness3 = _c.thickness3, thickness4 = _c.thickness4, thickness5 = _c.thickness5, zIndex1 = _c.zIndex1, zIndex2 = _c.zIndex2, zIndex3 = _c.zIndex3, zIndex4 = _c.zIndex4, zIndex5 = _c.zIndex5, strokeDashArray1 = _c.strokeDashArray1, strokeDashArray2 = _c.strokeDashArray2, strokeDashArray3 = _c.strokeDashArray3, strokeDashArray4 = _c.strokeDashArray4, strokeDashArray5 = _c.strokeDashArray5, rotateLabel = _c.rotateLabel, isAnimated = _c.isAnimated, hideDataPoints1 = _c.hideDataPoints1, hideDataPoints2 = _c.hideDataPoints2, hideDataPoints3 = _c.hideDataPoints3, hideDataPoints4 = _c.hideDataPoints4, hideDataPoints5 = _c.hideDataPoints5, color1 = _c.color1, color2 = _c.color2, color3 = _c.color3, color4 = _c.color4, color5 = _c.color5, startFillColor1 = _c.startFillColor1, endFillColor1 = _c.endFillColor1, startOpacity1 = _c.startOpacity1, endOpacity1 = _c.endOpacity1, startFillColor2 = _c.startFillColor2, endFillColor2 = _c.endFillColor2, startOpacity2 = _c.startOpacity2, endOpacity2 = _c.endOpacity2, startFillColor3 = _c.startFillColor3, endFillColor3 = _c.endFillColor3, startOpacity3 = _c.startOpacity3, endOpacity3 = _c.endOpacity3, startFillColor4 = _c.startFillColor4, endFillColor4 = _c.endFillColor4, startOpacity4 = _c.startOpacity4, endOpacity4 = _c.endOpacity4, startFillColor5 = _c.startFillColor5, endFillColor5 = _c.endFillColor5, startOpacity5 = _c.startOpacity5, endOpacity5 = _c.endOpacity5, arrowStrokeWidth1 = _c.arrowStrokeWidth1, arrowStrokeColor1 = _c.arrowStrokeColor1, arrowFillColor1 = _c.arrowFillColor1, arrowStrokeWidth2 = _c.arrowStrokeWidth2, arrowStrokeColor2 = _c.arrowStrokeColor2, arrowFillColor2 = _c.arrowFillColor2, arrowStrokeWidth3 = _c.arrowStrokeWidth3, arrowStrokeColor3 = _c.arrowStrokeColor3, arrowFillColor3 = _c.arrowFillColor3, arrowStrokeWidth4 = _c.arrowStrokeWidth4, arrowStrokeColor4 = _c.arrowStrokeColor4, arrowFillColor4 = _c.arrowFillColor4, arrowStrokeWidth5 = _c.arrowStrokeWidth5, arrowStrokeColor5 = _c.arrowStrokeColor5, arrowFillColor5 = _c.arrowFillColor5, arrowStrokeWidthsFromSet = _c.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _c.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _c.arrowFillColorsFromSet, secondaryLineConfig = _c.secondaryLineConfig, gradientDirection = _c.gradientDirection, stepHeight = _c.stepHeight, noOfSectionsBelowXAxis = _c.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _c.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _c.xAxisLabelsVerticalShift, pointerConfig = _c.pointerConfig, pointerHeight = _c.pointerHeight, pointerWidth = _c.pointerWidth, pointerRadius = _c.pointerRadius, pointerColor = _c.pointerColor, pointerComponent = _c.pointerComponent, showPointerStrip = _c.showPointerStrip, pointerStripHeight = _c.pointerStripHeight, pointerStripWidth = _c.pointerStripWidth, pointerStripColor = _c.pointerStripColor, pointerStripUptoDataPoint = _c.pointerStripUptoDataPoint, pointerLabelComponent = _c.pointerLabelComponent, stripOverPointer = _c.stripOverPointer, shiftPointerLabelX = _c.shiftPointerLabelX, shiftPointerLabelY = _c.shiftPointerLabelY, pointerLabelWidth = _c.pointerLabelWidth, pointerLabelHeight = _c.pointerLabelHeight, autoAdjustPointerLabelPosition = _c.autoAdjustPointerLabelPosition, pointerVanishDelay = _c.pointerVanishDelay, activatePointersOnLongPress = _c.activatePointersOnLongPress, activatePointersDelay = _c.activatePointersDelay, persistPointer = _c.persistPointer, hidePointers = _c.hidePointers, hidePointer1 = _c.hidePointer1, hidePointer2 = _c.hidePointer2, hidePointer3 = _c.hidePointer3, hidePointer4 = _c.hidePointer4, hidePointer5 = _c.hidePointer5, cumulativeSpacing1 = _c.cumulativeSpacing1, cumulativeSpacing2 = _c.cumulativeSpacing2, cumulativeSpacing3 = _c.cumulativeSpacing3, cumulativeSpacing4 = _c.cumulativeSpacing4, cumulativeSpacing5 = _c.cumulativeSpacing5, cumulativeSpacingSecondary = _c.cumulativeSpacingSecondary, cumulativeSpacingForSet = _c.cumulativeSpacingForSet, hideSecondaryPointer = _c.hideSecondaryPointer, pointerEvents = _c.pointerEvents, focusEnabled = _c.focusEnabled, showDataPointOnFocus = _c.showDataPointOnFocus, showStripOnFocus = _c.showStripOnFocus, stripOverDataPoints = _c.stripOverDataPoints, showTextOnFocus = _c.showTextOnFocus, showDataPointLabelOnFocus = _c.showDataPointLabelOnFocus, stripHeight = _c.stripHeight, stripWidth = _c.stripWidth, stripColor = _c.stripColor, stripOpacity = _c.stripOpacity, stripStrokeDashArray = _c.stripStrokeDashArray, unFocusOnPressOut = _c.unFocusOnPressOut, delayBeforeUnFocus = _c.delayBeforeUnFocus, _d = _c.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _d === void 0 ? 0 : _d, lineGradient = _c.lineGradient, lineGradientDirection = _c.lineGradientDirection, lineGradientStartColor = _c.lineGradientStartColor, lineGradientEndColor = _c.lineGradientEndColor, barAndLineChartsWrapperProps = _c.barAndLineChartsWrapperProps, areaChart = _c.areaChart, mostNegativeValue = _c.mostNegativeValue;
59
59
  var secondaryXAxis = props.secondaryXAxis, intersectionAreaConfig = props.intersectionAreaConfig;
60
60
  var widthValuesFromSet = useMemo(function () { return dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set) { return new Animated.Value(0); }); }, []);
61
61
  var animatedPoints = new Animated.Value(0);
@@ -199,11 +199,7 @@ export var LineChart = function (props) {
199
199
  ]);
200
200
  var svgWrapperViewStyle = {
201
201
  position: 'absolute',
202
- bottom: 63 +
203
- xAxisLabelsVerticalShift +
204
- labelsExtraHeight -
205
- xAxisThickness -
206
- ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : dataPointsRadius1),
202
+ bottom: 62 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
207
203
  left: 0,
208
204
  zIndex: 1,
209
205
  transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
@@ -261,11 +257,11 @@ export var LineChart = function (props) {
261
257
  props.onFocus(item, index);
262
258
  }
263
259
  };
264
- var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray) {
260
+ var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
265
261
  var getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
266
262
  return dataForRender.map(function (item, index) {
267
263
  var _a;
268
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
264
+ var _b, _c, _d, _e;
269
265
  if (index < startIndex || index > endIndex)
270
266
  return null;
271
267
  if (item.hideDataPoint) {
@@ -320,25 +316,11 @@ export var LineChart = function (props) {
320
316
  if (showValuesAsDataPointsText) {
321
317
  text = originalDataFromProps[index].value;
322
318
  }
323
- var currentStripHeight = (_f = item.stripHeight) !== null && _f !== void 0 ? _f : stripHeight;
324
- var currentStripWidth = (_g = item.stripWidth) !== null && _g !== void 0 ? _g : stripWidth;
325
- var currentStripOpacity = (_h = item.stripOpacity) !== null && _h !== void 0 ? _h : stripOpacity;
326
- var currentStripStrokeDashArray = (_k = (_j = item.stripStrokeDashArray) !== null && _j !== void 0 ? _j : stripStrokeDashArray) !== null && _k !== void 0 ? _k : '';
327
- var currentStripColor = item.stripColor || stripColor;
328
319
  var position = I18nManager.isRTL ? 'right' : 'left';
329
- var y1 = currentStripHeight
330
- ? containerHeight - currentStripHeight + 8
331
- : containerHeight -
332
- dataPointsHeight / 2 +
333
- 14 -
334
- (item.value * containerHeight) / maxValue;
335
- var actualStripHeight = currentStripHeight ||
336
- (item.value * containerHeight) / maxValue - 2 + overflowTop;
337
320
  return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: unFocusOnPressOut ? ( // remove strip on onFocus
338
321
  _jsx(Rect, { onPressIn: function () { return onStripPress(item, index); }, onPressOut: function () {
339
322
  return setTimeout(function () { return setSelectedIndex(-1); }, delayBeforeUnFocus);
340
- }, x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none' })) : (_jsx(Rect, { onPress: function () { return onStripPress(item, index); }, x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight, fill: 'none' })) })) : null, item.showStrip ||
341
- (focusEnabled && index === selectedIndex && showStripOnFocus) ? (_jsx(Line, { x1: initialSpacing + spacing * index - currentStripWidth / 2 - 1, y1: y1, x2: initialSpacing + spacing * index - currentStripWidth / 2 - 1, y2: y1 + actualStripHeight, strokeWidth: currentStripWidth, stroke: currentStripColor, strokeDasharray: currentStripStrokeDashArray, opacity: currentStripOpacity })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_jsx(View, { style: [
323
+ }, x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none' })) : (_jsx(Rect, { onPress: function () { return onStripPress(item, index); }, x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight, fill: 'none' })) })) : null, renderStrips(item, index, key), hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_jsx(View, { style: [
342
324
  styles.customDataPointContainer,
343
325
  (_a = {
344
326
  height: dataPointsHeight,
@@ -501,7 +483,7 @@ export var LineChart = function (props) {
501
483
  });
502
484
  };
503
485
  var renderStripAndLabel = function () {
504
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
486
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
505
487
  var pointerItemLocal, pointerYLocal;
506
488
  pointerItemLocal = [
507
489
  __assign(__assign({}, pointerItem), { value: (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[pointerIndex]) === null || _b === void 0 ? void 0 : _b.value }),
@@ -554,9 +536,11 @@ export var LineChart = function (props) {
554
536
  isBarChart: false,
555
537
  pointerIndex: pointerIndex,
556
538
  width: totalWidth,
557
- screenWidth: screenWidth,
539
+ screenWidth: (_l = props.width) !== null && _l !== void 0 ? _l : Math.min(totalWidth, (_m = props.parentWidth) !== null && _m !== void 0 ? _m : screenWidth) -
540
+ yAxisLabelWidth,
558
541
  hasDataSet: !!dataSet,
559
542
  containsNegative: mostNegativeValue < 0,
543
+ horizontalStripConfig: pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.horizontalStripConfig,
560
544
  });
561
545
  };
562
546
  var getLineGradientComponent = function () {
@@ -629,7 +613,7 @@ export var LineChart = function (props) {
629
613
  ? "url(#".concat(props.areaGradientId, ")")
630
614
  : "url(#Gradient)", stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_c = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
631
615
  return renderSpecificVerticalLines(set === null || set === void 0 ? void 0 : set.data, cumulativeSpacingForSet[index]);
632
- })) !== null && _c !== void 0 ? _c : null, renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray), showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
616
+ })) !== null && _c !== void 0 ? _c : null, renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key), showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
633
617
  };
634
618
  // const getClosestValueFromSpacingArray = (spacingArray:number[],x:number):number => {
635
619
  // let dif=0,prevDif=0,i;
@@ -866,9 +850,48 @@ export var LineChart = function (props) {
866
850
  }
867
851
  },
868
852
  };
869
- var renderChartContent = function (containerHeightIncludingBelowXAxis) {
853
+ var renderStrips = function (item, index, ind) {
870
854
  var _a, _b, _c, _d, _e, _f;
871
- return (_jsxs(_Fragment, { children: [dataSet
855
+ if (item.showStrip || index === selectedIndex) {
856
+ var currentStripHeight = (_a = item.stripHeight) !== null && _a !== void 0 ? _a : stripHeight;
857
+ var currentStripWidth = (_b = item.stripWidth) !== null && _b !== void 0 ? _b : stripWidth;
858
+ var currentStripOpacity = (_c = item.stripOpacity) !== null && _c !== void 0 ? _c : stripOpacity;
859
+ var currentStripStrokeDashArray = (_e = (_d = item.stripStrokeDashArray) !== null && _d !== void 0 ? _d : stripStrokeDashArray) !== null && _e !== void 0 ? _e : '';
860
+ var currentStripColor = item.stripColor || stripColor;
861
+ var y1 = currentStripHeight
862
+ ? containerHeight - currentStripHeight + 8
863
+ : containerHeight -
864
+ ((_f = item.dataPointHeight) !== null && _f !== void 0 ? _f : dataPointsHeight1) / 2 +
865
+ 14 -
866
+ (item.value * containerHeight) / maxValue;
867
+ var actualStripHeight = currentStripHeight ||
868
+ (item.value * containerHeight) / maxValue - 2 + overflowTop;
869
+ return (_jsx(Line, { x1: initialSpacing + spacing * index - currentStripWidth / 2 - 1, y1: y1, x2: initialSpacing + spacing * index - currentStripWidth / 2 - 1, y2: y1 + actualStripHeight, strokeWidth: currentStripWidth, stroke: currentStripColor, strokeDasharray: currentStripStrokeDashArray, opacity: currentStripOpacity }, 'strip' + (ind * 10000 + index)));
870
+ }
871
+ return null;
872
+ };
873
+ var renderChartContent = function (containerHeightIncludingBelowXAxis) {
874
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
875
+ return (_jsxs(_Fragment, { children: [focusEnabled && showStripOnFocus && selectedIndex !== -1 ? ( // render focus strips separately (so that it's rendered below the data points unless specified otherwise)
876
+ _jsx(View, { pointerEvents: "none", style: [
877
+ svgWrapperViewStyle,
878
+ {
879
+ width: totalWidth,
880
+ height: containerHeightIncludingBelowXAxis,
881
+ zIndex: stripOverDataPoints ? 10000 : -1,
882
+ },
883
+ ], children: _jsxs(Svg, { height: containerHeightIncludingBelowXAxis +
884
+ ((_a = props.overflowBottom) !== null && _a !== void 0 ? _a : dataPointsRadius1), children: [dataSet && pointsFromSet.length
885
+ ? dataSet.map(function (set, ind) {
886
+ return set.data.map(function (item, index) {
887
+ return renderStrips(item, index, ind);
888
+ });
889
+ })
890
+ : (_b = props.data) === null || _b === void 0 ? void 0 : _b.map(function (item, index) {
891
+ return renderStrips(item, index, 0);
892
+ }), (_c = props.data2) === null || _c === void 0 ? void 0 : _c.map(function (item, index) { return renderStrips(item, index, 1); }), (_d = props.data3) === null || _d === void 0 ? void 0 : _d.map(function (item, index) { return renderStrips(item, index, 2); }), (_e = props.data4) === null || _e === void 0 ? void 0 : _e.map(function (item, index) { return renderStrips(item, index, 3); }), (_f = props.data5) === null || _f === void 0 ? void 0 : _f.map(function (item, index) { return renderStrips(item, index, 4); }), (_g = props.secondaryData) === null || _g === void 0 ? void 0 : _g.map(function (item, index) {
893
+ return renderStrips(item, index, 5);
894
+ })] }) })) : null, dataSet
872
895
  ? pointsFromSet.length
873
896
  ? dataSet.map(function (set, index) {
874
897
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
@@ -886,8 +909,8 @@ export var LineChart = function (props) {
886
909
  ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex1, points, widthValue, thickness1, color1, fillPoints, startFillColor1, endFillColor1, startOpacity1, endOpacity1, strokeDashArray1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, arrowStrokeColor1, arrowFillColor1, hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, cumulativeSpacing1, 0)
887
910
  : renderLine(containerHeightIncludingBelowXAxis, zIndex1, points, thickness1, color1, fillPoints, startFillColor1, endFillColor1, startOpacity1, endOpacity1, strokeDashArray1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, arrowStrokeColor1, arrowFillColor1, hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, cumulativeSpacing1, 0), secondaryPoints
888
911
  ? isAnimated
889
- ? renderAnimatedLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, widthValue, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_a = secondaryLineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.strokeWidth, (_b = secondaryLineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, (_c = secondaryLineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.fillColor, secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6)
890
- : renderLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_d = secondaryLineConfig.arrowConfig) === null || _d === void 0 ? void 0 : _d.strokeWidth, (_e = secondaryLineConfig.arrowConfig) === null || _e === void 0 ? void 0 : _e.strokeColor, (_f = secondaryLineConfig.arrowConfig) === null || _f === void 0 ? void 0 : _f.fillColor, secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6)
912
+ ? renderAnimatedLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, widthValue, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_h = secondaryLineConfig.arrowConfig) === null || _h === void 0 ? void 0 : _h.strokeWidth, (_j = secondaryLineConfig.arrowConfig) === null || _j === void 0 ? void 0 : _j.strokeColor, (_k = secondaryLineConfig.arrowConfig) === null || _k === void 0 ? void 0 : _k.fillColor, secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6)
913
+ : renderLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_l = secondaryLineConfig.arrowConfig) === null || _l === void 0 ? void 0 : _l.strokeWidth, (_m = secondaryLineConfig.arrowConfig) === null || _m === void 0 ? void 0 : _m.strokeColor, (_o = secondaryLineConfig.arrowConfig) === null || _o === void 0 ? void 0 : _o.fillColor, secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6)
891
914
  : null, points2
892
915
  ? isAnimated
893
916
  ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex2, points2, widthValue2, thickness2, color2, fillPoints2, startFillColor2, endFillColor2, startOpacity2, endOpacity2, strokeDashArray2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, arrowStrokeColor2, arrowFillColor2, hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText, cumulativeSpacing2, 1)
@@ -17,7 +17,7 @@ import { ClipPath, Line, Rect, Svg, Text as SvgText, Use, } from 'react-native-s
17
17
  import { screenWidth } from '../utils';
18
18
  export var PopulationPyramid = function (props) {
19
19
  var _a, _b, _c, _d;
20
- var _e = usePopulationPyramid(__assign(__assign({}, props), { screenWidth: screenWidth })), width = _e.width, verticalMarginBetweenBars = _e.verticalMarginBetweenBars, barsMapToYAxisSections = _e.barsMapToYAxisSections, data = _e.data, hideRules = _e.hideRules, yAxisColor = _e.yAxisColor, xAxisColor = _e.xAxisColor, xAxisThickness = _e.xAxisThickness, xAxisType = _e.xAxisType, xAxisNoOfSections = _e.xAxisNoOfSections, showXAxisIndices = _e.showXAxisIndices, showXAxisLabelTexts = _e.showXAxisLabelTexts, xAxisLabelShiftX = _e.xAxisLabelShiftX, xAxisLabelPrefix = _e.xAxisLabelPrefix, xAxisLabelSuffix = _e.xAxisLabelSuffix, formatXAxisLabels = _e.formatXAxisLabels, showVerticalLines = _e.showVerticalLines, showYAxisIndices = _e.showYAxisIndices, yAxisIndicesWidth = _e.yAxisIndicesWidth, yAxisIndicesHeight = _e.yAxisIndicesHeight, yAxisIndicesColor = _e.yAxisIndicesColor, yAxisLabelFontSize = _e.yAxisLabelFontSize, yAxisLabelFontStyle = _e.yAxisLabelFontStyle, yAxisLabelFontWeight = _e.yAxisLabelFontWeight, yAxisLabelFontFamily = _e.yAxisLabelFontFamily, yAxisLabelColor = _e.yAxisLabelColor, yAxisLabelTextMarginRight = _e.yAxisLabelTextMarginRight, yAxisLabelTexts = _e.yAxisLabelTexts, showValuesAsBarLabels = _e.showValuesAsBarLabels, rulesThickness = _e.rulesThickness, rulesColor = _e.rulesColor, rulesType = _e.rulesType, dashWidth = _e.dashWidth, dashGap = _e.dashGap, leftBarLabelWidth = _e.leftBarLabelWidth, leftBarLabelFontSize = _e.leftBarLabelFontSize, leftBarLabelColor = _e.leftBarLabelColor, leftBarLabelFontStyle = _e.leftBarLabelFontStyle, leftBarLabelFontWeight = _e.leftBarLabelFontWeight, leftBarLabelFontFamily = _e.leftBarLabelFontFamily, leftBarLabelPrefix = _e.leftBarLabelPrefix, leftBarLabelSuffix = _e.leftBarLabelSuffix, rightBarLabelFontSize = _e.rightBarLabelFontSize, rightBarLabelColor = _e.rightBarLabelColor, rightBarLabelFontStyle = _e.rightBarLabelFontStyle, rightBarLabelFontWeight = _e.rightBarLabelFontWeight, rightBarLabelFontFamily = _e.rightBarLabelFontFamily, rightBarLabelPrefix = _e.rightBarLabelPrefix, rightBarLabelSuffix = _e.rightBarLabelSuffix, formatBarLabels = _e.formatBarLabels, showMidAxis = _e.showMidAxis, midAxisLabelFontSize = _e.midAxisLabelFontSize, midAxisLabelColor = _e.midAxisLabelColor, midAxisLabelFontStyle = _e.midAxisLabelFontStyle, midAxisLabelFontWeight = _e.midAxisLabelFontWeight, midAxisLabelFontFamily = _e.midAxisLabelFontFamily, leftBarColor = _e.leftBarColor, rightBarColor = _e.rightBarColor, leftBarBorderColor = _e.leftBarBorderColor, rightBarBorderColor = _e.rightBarBorderColor, leftBarBorderWidth = _e.leftBarBorderWidth, rightBarBorderWidth = _e.rightBarBorderWidth, leftBarBorderRadius = _e.leftBarBorderRadius, rightBarBorderRadius = _e.rightBarBorderRadius, allCornersRounded = _e.allCornersRounded, showSurplus = _e.showSurplus, showSurplusLeft = _e.showSurplusLeft, showSurplusRight = _e.showSurplusRight, leftSurplusColor = _e.leftSurplusColor, leftSurplusBorderColor = _e.leftSurplusBorderColor, rightSurplusColor = _e.rightSurplusColor, rightSurplusBorderColor = _e.rightSurplusBorderColor, leftSurplusBorderWidth = _e.leftSurplusBorderWidth, rightSurplusBorderWidth = _e.rightSurplusBorderWidth, yAxisLabelWidth = _e.yAxisLabelWidth, noOfSections = _e.noOfSections, stepHeight = _e.stepHeight, containerHeightWithXaxisLabels = _e.containerHeightWithXaxisLabels, mid = _e.mid, barWidthFactor = _e.barWidthFactor, leftXAfterMid = _e.leftXAfterMid, rightXAfterMid = _e.rightXAfterMid, yAxisLineProps = _e.yAxisLineProps, midAxisLineCommonProps = _e.midAxisLineCommonProps, xAxisIndicesCommonProps = _e.xAxisIndicesCommonProps, verticalLinesCommonProps = _e.verticalLinesCommonProps, xAxisLabelsCommonProps = _e.xAxisLabelsCommonProps, getXLabel = _e.getXLabel;
20
+ var _e = usePopulationPyramid(__assign(__assign({}, props), { screenWidth: screenWidth })), width = _e.width, verticalMarginBetweenBars = _e.verticalMarginBetweenBars, barsMapToYAxisSections = _e.barsMapToYAxisSections, data = _e.data, hideRules = _e.hideRules, yAxisColor = _e.yAxisColor, xAxisColor = _e.xAxisColor, xAxisThickness = _e.xAxisThickness, xAxisType = _e.xAxisType, xAxisNoOfSections = _e.xAxisNoOfSections, showXAxisIndices = _e.showXAxisIndices, showXAxisLabelTexts = _e.showXAxisLabelTexts, xAxisLabelShiftX = _e.xAxisLabelShiftX, xAxisLabelPrefix = _e.xAxisLabelPrefix, xAxisLabelSuffix = _e.xAxisLabelSuffix, formatXAxisLabels = _e.formatXAxisLabels, showVerticalLines = _e.showVerticalLines, showYAxisIndices = _e.showYAxisIndices, yAxisIndicesWidth = _e.yAxisIndicesWidth, yAxisIndicesHeight = _e.yAxisIndicesHeight, yAxisIndicesColor = _e.yAxisIndicesColor, yAxisLabelFontSize = _e.yAxisLabelFontSize, yAxisLabelFontStyle = _e.yAxisLabelFontStyle, yAxisLabelFontWeight = _e.yAxisLabelFontWeight, yAxisLabelFontFamily = _e.yAxisLabelFontFamily, yAxisLabelColor = _e.yAxisLabelColor, yAxisLabelTextMarginRight = _e.yAxisLabelTextMarginRight, yAxisLabelTexts = _e.yAxisLabelTexts, showValuesAsBarLabels = _e.showValuesAsBarLabels, rulesThickness = _e.rulesThickness, rulesColor = _e.rulesColor, rulesType = _e.rulesType, dashWidth = _e.dashWidth, dashGap = _e.dashGap, leftBarLabelWidth = _e.leftBarLabelWidth, leftBarLabelFontSize = _e.leftBarLabelFontSize, leftBarLabelColor = _e.leftBarLabelColor, leftBarLabelFontStyle = _e.leftBarLabelFontStyle, leftBarLabelFontWeight = _e.leftBarLabelFontWeight, leftBarLabelFontFamily = _e.leftBarLabelFontFamily, leftBarLabelPrefix = _e.leftBarLabelPrefix, leftBarLabelSuffix = _e.leftBarLabelSuffix, rightBarLabelFontSize = _e.rightBarLabelFontSize, rightBarLabelColor = _e.rightBarLabelColor, rightBarLabelFontStyle = _e.rightBarLabelFontStyle, rightBarLabelFontWeight = _e.rightBarLabelFontWeight, rightBarLabelFontFamily = _e.rightBarLabelFontFamily, rightBarLabelPrefix = _e.rightBarLabelPrefix, rightBarLabelSuffix = _e.rightBarLabelSuffix, formatBarLabels = _e.formatBarLabels, showMidAxis = _e.showMidAxis, midAxisLabelFontSize = _e.midAxisLabelFontSize, midAxisLabelColor = _e.midAxisLabelColor, midAxisLabelFontStyle = _e.midAxisLabelFontStyle, midAxisLabelFontWeight = _e.midAxisLabelFontWeight, midAxisLabelFontFamily = _e.midAxisLabelFontFamily, leftBarColor = _e.leftBarColor, rightBarColor = _e.rightBarColor, leftBarBorderColor = _e.leftBarBorderColor, rightBarBorderColor = _e.rightBarBorderColor, leftBarBorderWidth = _e.leftBarBorderWidth, rightBarBorderWidth = _e.rightBarBorderWidth, leftBarBorderRadius = _e.leftBarBorderRadius, rightBarBorderRadius = _e.rightBarBorderRadius, allCornersRounded = _e.allCornersRounded, showSurplus = _e.showSurplus, showSurplusLeft = _e.showSurplusLeft, showSurplusRight = _e.showSurplusRight, leftSurplusColor = _e.leftSurplusColor, leftSurplusBorderColor = _e.leftSurplusBorderColor, rightSurplusColor = _e.rightSurplusColor, rightSurplusBorderColor = _e.rightSurplusBorderColor, leftSurplusBorderWidth = _e.leftSurplusBorderWidth, rightSurplusBorderWidth = _e.rightSurplusBorderWidth, yAxisLabelWidth = _e.yAxisLabelWidth, noOfSections = _e.noOfSections, stepHeight = _e.stepHeight, containerHeightWithXaxisLabels = _e.containerHeightWithXaxisLabels, mid = _e.mid, barWidthFactor = _e.barWidthFactor, leftXAfterMid = _e.leftXAfterMid, rightXAfterMid = _e.rightXAfterMid, yAxisLineProps = _e.yAxisLineProps, midAxisLineCommonProps = _e.midAxisLineCommonProps, xAxisIndicesCommonProps = _e.xAxisIndicesCommonProps, verticalLinesCommonProps = _e.verticalLinesCommonProps, xAxisLabelsCommonProps = _e.xAxisLabelsCommonProps, getXLabel = _e.getXLabel, midAxisLabelWidth = _e.midAxisLabelWidth;
21
21
  return (_jsx(View, { style: { height: containerHeightWithXaxisLabels, width: width }, children: _jsxs(Svg, { fill: 'none', children: [_jsx(Line, __assign({}, yAxisLineProps)), Array.from(Array(noOfSections)).map(function (item, index) {
22
22
  var _a;
23
23
  var isLast = index === noOfSections - 1;
@@ -48,7 +48,9 @@ export var PopulationPyramid = function (props) {
48
48
  }), Array.from(Array(xAxisNoOfSections)).map(function (item, index) {
49
49
  if (!index && !showMidAxis)
50
50
  return null;
51
- var x = leftXAfterMid + (leftXAfterMid * index) / xAxisNoOfSections;
51
+ var x = midAxisLabelWidth +
52
+ leftXAfterMid +
53
+ (leftXAfterMid * index) / xAxisNoOfSections;
52
54
  var unformattedXLabel = getXLabel(index);
53
55
  var xLabel = formatXAxisLabels
54
56
  ? formatXAxisLabels(unformattedXLabel)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-gifted-charts",
3
- "version": "1.4.44",
3
+ "version": "1.4.46",
4
4
  "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.",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -25,7 +25,7 @@
25
25
  "registry": "https://registry.npmjs.org/"
26
26
  },
27
27
  "dependencies": {
28
- "gifted-charts-core": "0.1.44"
28
+ "gifted-charts-core": "0.1.46"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@babel/cli": "^7.24.8",