react-native-gifted-charts 1.4.75 → 1.4.76

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.
Files changed (3) hide show
  1. package/README.md +21 -11
  2. package/dist/BubbleChart/index.js +32 -25
  3. package/package.json +4 -3
package/README.md CHANGED
@@ -20,7 +20,7 @@
20
20
  <img src="/demos/redditLogo.png" height="auto" width="32" height="32" />
21
21
  </a>
22
22
  </p>
23
- The most loved library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and Bubble charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
23
+ The most loved library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar, Bubble and Scatter charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
24
24
 
25
25
  ### Yet another chart library? Why?
26
26
 
@@ -44,24 +44,24 @@ The exact same piece of code that you write to render charts in react-native, ca
44
44
 
45
45
  See the **[release changes by version here.](release-notes/release-notes.md)**
46
46
 
47
- <img src='/demos/bars.png' alt=''/>
48
- <img src='/demos/lineArea.png' alt=''/>
49
- <img src='/demos/blues.png' alt=''/>
47
+ <img src='/demos/bars.png' alt='Bar Chart'/>
48
+ <img src='/demos/lineArea.png' alt='Line and Area Chart'/>
49
+ <img src='/demos/blues.png' alt='Bar and Pie Chart'/>
50
50
  <table>
51
51
  <tr>
52
- <td><img src='/demos/scrollLine.gif' alt='' width=320 height=280/></td>
53
- <td><img src='/demos/animatedDataLine.gif' alt='' width=320 height=260/></td>
52
+ <td><img src='/demos/scrollLine.gif' alt='Area Chart with Pointer' width=320 height=280/></td>
53
+ <td><img src='/demos/animatedDataLine.gif' alt='Area Chart with Changing Data' width=320 height=260/></td>
54
54
  </tr>
55
55
 
56
56
  <tr>
57
- <td><img src='/demos/crossHair.gif' alt='' height=280 /></td>
58
- <td><img src='/demos/movingBars.gif' alt='' width=270 height=300/></td>
57
+ <td><img src='/demos/crossHair.gif' alt='Area Chart with Crosshair' height=280 /></td>
58
+ <td><img src='/demos/bubble.png' alt='Bubble Chart' height=280/></td>
59
59
  <tr>
60
- <td><img src='/demos/radar.png' alt='' height=280 width=320/></td>
61
- <td><img src='/demos/ppnLabelled.png' alt='' height=280 width=300/></td>
60
+ <td><img src='/demos/radar.png' alt='Radar Chart' height=280 width=320/></td>
61
+ <td><img src='/demos/ppnLabelled.png' alt='Population Pyramid Chart' height=280 width=300/></td>
62
62
  </tr>
63
63
  </table>
64
- <img src='/demos/pieExt.png' alt='' height=280 />
64
+ <img src='/demos/pieExt.png' alt='Donut Chart with External Labels' height=280 />
65
65
 
66
66
  ---
67
67
 
@@ -120,6 +120,16 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
120
120
  // For Donut chart, just add the prop donut to the <PieChart/> component
121
121
 
122
122
  <PieChart data = {data} donut />
123
+
124
+ // For Scatter chart, just add the prop scatterChart to the <BubbleChart/> component
125
+
126
+ <BubbleChart
127
+ data = {[
128
+ {x: 20, y: 4, r: 10},
129
+ {x: 40, y: 6, r: 20},
130
+ ]}
131
+ scatterChart
132
+ />
123
133
  ```
124
134
 
125
135
  ## Props tables
package/dist/BubbleChart/index.js CHANGED
@@ -39,7 +39,7 @@ export var BubbleChart = function (props) {
39
39
  var _a, _b, _c, _d;
40
40
  var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
41
41
  var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
42
- var secondaryXAxis = props.secondaryXAxis, xAxisLabelTextStyle = props.xAxisLabelTextStyle, formatBubbleLabel = props.formatBubbleLabel;
42
+ var secondaryXAxis = props.secondaryXAxis, xAxisLabelTextStyle = props.xAxisLabelTextStyle, formatBubbleLabel = props.formatBubbleLabel, regressionLinesBehindBubbles = props.regressionLinesBehindBubbles;
43
43
  var _e = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), data = _e.data, barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, totalWidth = _e.totalWidth, animationDuration = _e.animationDuration, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, getY = _e.getY, getX = _e.getX, maxValue = _e.maxValue, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, showTextOnFocus = _e.showTextOnFocus, focusEnabled = _e.focusEnabled, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, lastLineNumber = _e.lastLineNumber, initialSpacing = _e.initialSpacing, spacing = _e.spacing, containerHeight = _e.containerHeight, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, isAnimated = _e.isAnimated, showBubbleOnFocus = _e.showBubbleOnFocus, showBubbleLabelOnFocus = _e.showBubbleLabelOnFocus, bubblesShape = _e.bubblesShape, bubblesWidth = _e.bubblesWidth, bubblesHeight = _e.bubblesHeight, bubblesColor = _e.bubblesColor, bubblesRadius = _e.bubblesRadius, labelFontSize = _e.labelFontSize, labelMaxLength = _e.labelMaxLength, labelTextStyle = _e.labelTextStyle, startIndex = _e.startIndex, endIndex = _e.endIndex, showValuesAsBubbleLabels = _e.showValuesAsBubbleLabels, hideBubbles = _e.hideBubbles, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, labelsExtraHeight = _e.labelsExtraHeight, xAxisThickness = _e.xAxisThickness, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, rotateLabel = _e.rotateLabel, allowFontScaling = _e.allowFontScaling, borderColor = _e.borderColor, borderWidth = _e.borderWidth, opacity = _e.opacity, borderOpacity = _e.borderOpacity, xAxisLabelTexts = _e.xAxisLabelTexts, showRegressionLine = _e.showRegressionLine, regressionLineX1 = _e.regressionLineX1, regressionLineY1 = _e.regressionLineY1, regressionLineX2 = _e.regressionLineX2, regressionLineY2 = _e.regressionLineY2, regressionLineCoordinates = _e.regressionLineCoordinates, regressionLineConfig = _e.regressionLineConfig, regressionLineConfigs = _e.regressionLineConfigs, scatterChart = _e.scatterChart, maxRadius = _e.maxRadius, minRadius = _e.minRadius, extraWidthDueToBubble = _e.extraWidthDueToBubble, showGradient = _e.showGradient, centerColorForGradient = _e.centerColorForGradient;
44
44
  var progress = useRef(new Animated.Value(0)).current;
45
45
  var AnimatedRegressionLineX = useRef(new Animated.Value(0)).current;
@@ -157,7 +157,7 @@ export var BubbleChart = function (props) {
157
157
  regressionLineX2,
158
158
  regressionLineY1,
159
159
  regressionLineY2,
160
- regressionLineConfigs,
160
+ // regressionLineConfigs,
161
161
  regressionLineCoordinates,
162
162
  animatedRegressionLineXValues,
163
163
  animatedRegressionLineYValues,
@@ -238,8 +238,8 @@ export var BubbleChart = function (props) {
238
238
  isAnimated,
239
239
  bubblesShape,
240
240
  regressionLineConfig.isAnimated,
241
- regressionLineConfigs,
242
- drawRegressionLine,
241
+ // regressionLineConfigs,
242
+ // drawRegressionLine,
243
243
  ]);
244
244
  var svgHeight = containerHeightIncludingBelowXAxis + ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : 0);
245
245
  // const onStripPress = (item: any, index: number) => {
@@ -262,7 +262,7 @@ export var BubbleChart = function (props) {
262
262
  ? containerHeight +
263
263
  60 +
264
264
  ((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _a !== void 0 ? _a : 15)
265
- : -xAxisTextNumberOfLines * 18 - (containerHeight - 200) / 20,
265
+ : -xAxisTextNumberOfLines * 18 - (containerHeight - 200) / 20 - 4,
266
266
  zIndex: 10,
267
267
  width: spacing + labelsExtraHeight,
268
268
  left: left,
@@ -288,7 +288,7 @@ export var BubbleChart = function (props) {
288
288
  ((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
289
289
  : rotateLabel
290
290
  ? 10
291
- : -xAxisTextNumberOfLines * 18,
291
+ : -xAxisTextNumberOfLines * 18 - 4,
292
292
  zIndex: 10,
293
293
  width: spacing + labelsExtraHeight,
294
294
  left: left,
@@ -300,7 +300,7 @@ export var BubbleChart = function (props) {
300
300
  var renderBubbles = function (hideBubbles, dataForRender, originalDataFromProps, bubsShape, bubsWidth, bubsHeight, bubsColor, bubsRadius, labelFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
301
301
  var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
302
302
  return dataForRender.map(function (item, index) {
303
- 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;
303
+ 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;
304
304
  // if (index < startIndex || index > endIndex) return null;
305
305
  if (item.hideBubble) {
306
306
  return null;
@@ -382,23 +382,24 @@ export var BubbleChart = function (props) {
382
382
  ? "url(#radial".concat(index, ")")
383
383
  : dataPointsColor;
384
384
  var localBorderColor = (_j = (_h = item.borderColor) !== null && _h !== void 0 ? _h : borderColor) !== null && _j !== void 0 ? _j : defaultBubbleColors[index % defaultBubbleColors.length];
385
+ var bubbleKey = "".concat(key, "-").concat((_k = item.indexUsedInDevForDataSet) !== null && _k !== void 0 ? _k : '', "-").concat((_l = item.label) !== null && _l !== void 0 ? _l : '', "-").concat(index);
385
386
  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) {
386
387
  var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
387
388
  handleFocus(index);
388
- }, onPressOut: handleUnFocus })) : null })) : null, hideBubbles ? null : (_jsxs(_Fragment, { children: [customBubble ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_k = item.indexUsedInDevForDataSet) !== null && _k !== void 0 ? _k : index), y: getYOrSecondaryY(item.y) - bubblesHeight / 2, children: customBubble(item, index) })) : (_jsx(Animated.View, { style: {
389
+ }, onPressOut: handleUnFocus })) : null })) : null, hideBubbles ? null : (_jsxs(_Fragment, { children: [customBubble ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_m = item.indexUsedInDevForDataSet) !== null && _m !== void 0 ? _m : index, index), y: getYOrSecondaryY(item.y) - bubblesHeight / 2, children: customBubble(item, index) })) : (_jsx(Animated.View, { style: {
389
390
  position: 'absolute',
390
391
  // height: svgHeight,
391
392
  // width: totalWidth,
392
- left: getX((_l = item.indexUsedInDevForDataSet) !== null && _l !== void 0 ? _l : index) -
393
+ left: getX((_o = item.indexUsedInDevForDataSet) !== null && _o !== void 0 ? _o : index, index) -
393
394
  bubblesWidth / 2,
394
395
  top: getYOrSecondaryY(item.y) - bubblesHeight / 2,
395
396
  opacity: isAnimated ? appearingOpacity : 1,
396
- }, children: customBubble(item, index) }))) : null, bubblesShape === 'rectangular' ? (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedRect, { x: getX((_m = item.indexUsedInDevForDataSet) !== null && _m !== void 0 ? _m : index) -
397
+ }, children: customBubble(item, index) }))) : null, bubblesShape === 'rectangular' ? (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedRect, { x: getX((_p = item.indexUsedInDevForDataSet) !== null && _p !== void 0 ? _p : index, index) -
397
398
  bubblesWidth / 2, y: getYOrSecondaryY(item.y) - bubblesHeight / 2, width: isAnimated ? growingWidth[index] : bubblesWidth, height: isAnimated ? growingHeight[index] : bubblesHeight, opacity: isAnimated ? appearingDataPoints : opacity, fill: showBubbleOnFocus
398
399
  ? index === selectedIndex
399
400
  ? dataPointsColor
400
401
  : 'none'
401
- : dataPointsColor, fillOpacity: isAnimated ? appearingDataPoints : opacity, stroke: localBorderColor, strokeWidth: (_o = item.borderWidth) !== null && _o !== void 0 ? _o : borderWidth, strokeOpacity: (_q = (_p = item.borderOpacity) !== null && _p !== void 0 ? _p : props.borderOpacity) !== null && _q !== void 0 ? _q : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
402
+ : dataPointsColor, fillOpacity: isAnimated ? appearingDataPoints : opacity, stroke: localBorderColor, strokeWidth: (_q = item.borderWidth) !== null && _q !== void 0 ? _q : borderWidth, strokeOpacity: (_s = (_r = item.borderOpacity) !== null && _r !== void 0 ? _r : props.borderOpacity) !== null && _s !== void 0 ? _s : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
402
403
  item.onPress
403
404
  ? item.onPress(item, index)
404
405
  : props.onPress
@@ -410,7 +411,7 @@ export var BubbleChart = function (props) {
410
411
  if (!item.onPress && !props.onPress && focusEnabled) {
411
412
  handleUnFocus();
412
413
  }
413
- } })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX((_r = item.indexUsedInDevForDataSet) !== null && _r !== void 0 ? _r : index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: ((_s = item.showGradient) !== null && _s !== void 0 ? _s : showGradient)
414
+ } })) }, "rectBub-".concat(index))) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX((_t = item.indexUsedInDevForDataSet) !== null && _t !== void 0 ? _t : index, index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: ((_u = item.showGradient) !== null && _u !== void 0 ? _u : showGradient)
414
415
  ? isAndroid && isAnimated
415
416
  ? fillColorForAnimatedGradientOnAndroid
416
417
  : "url(#radial".concat(index, ")")
@@ -420,7 +421,7 @@ export var BubbleChart = function (props) {
420
421
  ? opacity
421
422
  : appearingDataPointsAndroid
422
423
  : appearingDataPoints
423
- : opacity, stroke: localBorderColor, strokeWidth: (_t = item.borderWidth) !== null && _t !== void 0 ? _t : borderWidth, strokeOpacity: (_v = (_u = item.borderOpacity) !== null && _u !== void 0 ? _u : props.borderOpacity) !== null && _v !== void 0 ? _v : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
424
+ : opacity, stroke: localBorderColor, strokeWidth: (_v = item.borderWidth) !== null && _v !== void 0 ? _v : borderWidth, strokeOpacity: (_x = (_w = item.borderOpacity) !== null && _w !== void 0 ? _w : props.borderOpacity) !== null && _x !== void 0 ? _x : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
424
425
  item.onPress
425
426
  ? item.onPress(item, index)
426
427
  : props.onPress
@@ -432,7 +433,7 @@ export var BubbleChart = function (props) {
432
433
  if (!item.onPress && !props.onPress && focusEnabled) {
433
434
  handleUnFocus();
434
435
  }
435
- } })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_w = item.indexUsedInDevForDataSet) !== null && _w !== void 0 ? _w : index) -
436
+ } })) }, "bubble-".concat(index))), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_y = item.indexUsedInDevForDataSet) !== null && _y !== void 0 ? _y : index, index) -
436
437
  labelWidth / 2 +
437
438
  6 +
438
439
  (item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
@@ -447,7 +448,7 @@ export var BubbleChart = function (props) {
447
448
  position: 'absolute',
448
449
  height: svgHeight,
449
450
  width: labelWidth,
450
- left: getX((_x = item.indexUsedInDevForDataSet) !== null && _x !== void 0 ? _x : index) -
451
+ left: getX((_z = item.indexUsedInDevForDataSet) !== null && _z !== void 0 ? _z : index, index) -
451
452
  defaultFontSize / 2 +
452
453
  (item.labelShiftX || props.labelShiftX || 0),
453
454
  top: getYOrSecondaryY(item.y) -
@@ -460,24 +461,24 @@ export var BubbleChart = function (props) {
460
461
  (focusTogether || key == selectedLineNumber)
461
462
  ? labelComponent(item, index) // not pushed in latest release
462
463
  : null
463
- : labelComponent(item, index) }))) : null) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_y = item.indexUsedInDevForDataSet) !== null && _y !== void 0 ? _y : index) -
464
+ : labelComponent(item, index) }))) : null) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_0 = item.indexUsedInDevForDataSet) !== null && _0 !== void 0 ? _0 : index, index) -
464
465
  (formattedTextLabel.length * fontSize) / 4 +
465
466
  (item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
466
467
  Math.max(10, fontSize / 1.5) +
467
468
  (item.labelShiftY || props.labelShiftY || 0) -
468
- (scatterChart ? bubblesRadius + 10 : 0), children: _jsx(Text, { style: __assign(__assign({}, textStyle), { fontSize: fontSize }), children: formattedTextLabel }) })) : (_jsx(Animated.Text, { style: __assign(__assign({}, textStyle), { position: 'absolute', left: getX((_z = item.indexUsedInDevForDataSet) !== null && _z !== void 0 ? _z : index) -
469
+ (scatterChart ? bubblesRadius + 10 : 0), children: _jsx(Text, { style: __assign(__assign({}, textStyle), { fontSize: fontSize }), children: formattedTextLabel }) })) : (_jsx(Animated.Text, { style: __assign(__assign({}, textStyle), { position: 'absolute', left: getX((_1 = item.indexUsedInDevForDataSet) !== null && _1 !== void 0 ? _1 : index, index) -
469
470
  (formattedTextLabel.length * fontSize) / 4 +
470
471
  (item.labelShiftX || props.labelShiftX || 0), top: getYOrSecondaryY(item.y) -
471
472
  fontSize / 1.5 +
472
473
  (item.labelShiftY || props.labelShiftY || 0) -
473
474
  (scatterChart ? bubblesRadius + 10 : 0), fontSize: fontSize, opacity: isAnimated
474
475
  ? appearingDataPoints
475
- : ((_0 = textStyle.opacity) !== null && _0 !== void 0 ? _0 : 1) }), children: formattedTextLabel }))) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
476
+ : ((_2 = textStyle.opacity) !== null && _2 !== void 0 ? _2 : 1) }), children: formattedTextLabel }))) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, bubbleKey));
476
477
  });
477
478
  };
478
479
  var svgWrapperViewStyle = {
479
480
  position: 'absolute',
480
- top: 0, // 281 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
481
+ top: xAxisLabelsVerticalShift, // 281 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
481
482
  left: 0,
482
483
  zIndex: 1,
483
484
  transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
@@ -491,11 +492,14 @@ export var BubbleChart = function (props) {
491
492
  // zIndex,
492
493
  },
493
494
  ], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth + extraWidthDueToBubble, onPress: props.onBackgroundPress, children: [showGradient && (_jsx(Defs, { children: data === null || data === void 0 ? void 0 : data.map(function (item, index) {
494
- var _a;
495
- return (_jsxs(RadialGradient, { id: "radial".concat(index), cx: "50%", cy: "50%", r: "50%", children: [_jsx(Stop, { offset: "0%", stopColor: (_a = item.centerColorForGradient) !== null && _a !== void 0 ? _a : centerColorForGradient }), _jsx(Stop, { offset: "100%", stopColor: item.bubbleColor ||
495
+ var _a, _b, _c;
496
+ var gradientKey = "radial-gradient-".concat((_a = item.indexUsedInDevForDataSet) !== null && _a !== void 0 ? _a : '', "-").concat((_b = item.label) !== null && _b !== void 0 ? _b : '', "-").concat(index);
497
+ return (_jsxs(RadialGradient, { id: "radial".concat(index), cx: "50%", cy: "50%", r: "50%", children: [_jsx(Stop, { offset: "0%", stopColor: (_c = item.centerColorForGradient) !== null && _c !== void 0 ? _c : centerColorForGradient }), _jsx(Stop, { offset: "100%", stopColor: item.bubbleColor ||
496
498
  bubblesColor ||
497
- defaultBubbleColors[index % defaultBubbleColors.length] })] }, index));
498
- }) })), renderBubbles(hideBubbles, data, data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0), regressionLineConfigs.length ? (regressionLineConfigs.map(function (config, index) {
499
+ defaultBubbleColors[index % defaultBubbleColors.length] })] }, gradientKey));
500
+ }) })), !regressionLinesBehindBubbles
501
+ ? renderBubbles(hideBubbles, data, data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0)
502
+ : null, regressionLineConfigs.length ? (regressionLineConfigs.map(function (config, index) {
499
503
  var _a = regressionLineCoordinates[index], regressionLineX1 = _a.regressionLineX1, regressionLineX2 = _a.regressionLineX2, regressionLineY1 = _a.regressionLineY1, regressionLineY2 = _a.regressionLineY2;
500
504
  var animatedX = animatedRegressionLineXValues[index];
501
505
  var animatedY = animatedRegressionLineYValues[index];
@@ -508,10 +512,13 @@ export var BubbleChart = function (props) {
508
512
  ? AnimatedRegressionLineX
509
513
  : regressionLineX2, y2: regressionLineConfig.isAnimated
510
514
  ? AnimatedRegressionLineY
511
- : regressionLineY2, stroke: regressionLineConfig.color, strokeOpacity: regressionLineConfig.opacity, strokeWidth: regressionLineConfig.thickness, strokeDasharray: regressionLineConfig.strokeDashArray })) : null] }), xAxisLabelTexts === null || xAxisLabelTexts === void 0 ? void 0 : xAxisLabelTexts.map(function (label, index) {
515
+ : regressionLineY2, stroke: regressionLineConfig.color, strokeOpacity: regressionLineConfig.opacity, strokeWidth: regressionLineConfig.thickness, strokeDasharray: regressionLineConfig.strokeDashArray })) : null, regressionLinesBehindBubbles
516
+ ? renderBubbles(hideBubbles, data, data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0)
517
+ : null] }), xAxisLabelTexts === null || xAxisLabelTexts === void 0 ? void 0 : xAxisLabelTexts.map(function (label, index) {
518
+ var labelKey = "".concat(label, "-").concat(index);
512
519
  return (_jsx(View, { children: isAnimated
513
520
  ? renderAnimatedLabel(false, index, label)
514
- : renderLabel(false, index, label) }, index));
521
+ : renderLabel(false, index, label) }, labelKey));
515
522
  })] }));
516
523
  };
517
524
  var remainingScrollViewProps = {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-native-gifted-charts",
3
- "version": "1.4.75",
4
- "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and Bubble charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
3
+ "version": "1.4.76",
4
+ "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar, Bubble and SCatter charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
5
5
  "main": "dist/index.js",
6
6
  "files": [
7
7
  "dist"
@@ -26,7 +26,7 @@
26
26
  "registry": "https://registry.npmjs.org/"
27
27
  },
28
28
  "dependencies": {
29
- "gifted-charts-core": "0.1.79"
29
+ "gifted-charts-core": "0.1.80"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@babel/cli": "^7.24.8",
@@ -80,6 +80,7 @@
80
80
  "population",
81
81
  "pyramid",
82
82
  "bubble",
83
+ "scatter",
83
84
  "react",
84
85
  "react native",
85
86
  "react-native"