react-native-gifted-charts 1.3.33 → 1.4.1

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -2,18 +2,16 @@ import React from 'react';
 import {Text, View} from 'react-native';
 import Rule from '../lineSvg';
 import {styles} from '../../LineChart/styles';
-import {AxesAndRulesDefaults, yAxisSides} from '../../utils/constants';
 import {
+  getHorizSectionVals,
+  yAxisSides,
   HorizSectionsType,
   horizSectionPropTypes,
-  secondaryYAxisType,
-} from '../../utils/types';
-import {computeMaxAndMinItems, getLabelTextUtil} from '../../utils';
+} from 'gifted-charts-core';
 
 export const renderHorizSections = (props: horizSectionPropTypes) => {
   const {
     width,
-    horizSections: h,
     noOfSectionsBelowXAxis,
     totalWidth,
     endSpacing,
@@ -25,8 +23,6 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     yAxisLabelContainerStyle,
     yAxisThickness,
     yAxisColor,
-    yAxisExtraHeight,
-    trimYAxisAtTop,
     xAxisThickness,
     xAxisColor,
     xAxisLength,
@@ -48,359 +44,41 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
 
     hideOrigin,
     hideYAxisText,
-    showFractionalValues,
     yAxisTextNumberOfLines,
-    yAxisLabelPrefix,
-    yAxisLabelSuffix,
     yAxisTextStyle,
     rotateYAxisTexts,
     rtl,
 
     containerHeight,
     maxValue,
-
-    referenceLinesConfig,
-
-    yAxisLabelTexts,
     yAxisOffset,
 
     horizontal,
     yAxisAtTop,
-
-    stepValue,
-    roundToDigits,
-
-    secondaryData,
     secondaryYAxis,
-    formatYLabel,
     onlyReferenceLines,
     renderReferenceLines,
   } = props;
 
-  const yAxisExtraHeightAtTop = trimYAxisAtTop ? 0 : yAxisExtraHeight;
-
-  /***********************************************************************************************************************************
-   *                                                                                                                                  *
-   *****************************               secondary Y Axis related props computations               ******************************
-   *                                                                                                                                  *
-   ***********************************************************************************************************************************/
-
-  const secondaryYAxisConfig: secondaryYAxisType = {
-    noOfSections: secondaryYAxis?.noOfSections ?? noOfSections,
-    maxValue: secondaryYAxis?.maxValue,
-    mostNegativeValue: secondaryYAxis?.mostNegativeValue,
-    stepValue: secondaryYAxis?.stepValue,
-    stepHeight: secondaryYAxis?.stepHeight,
-
-    showFractionalValues:
-      secondaryYAxis?.showFractionalValues ?? showFractionalValues,
-    roundToDigits: secondaryYAxis?.roundToDigits ?? roundToDigits,
-    noOfSectionsBelowXAxis:
-      secondaryYAxis?.noOfSectionsBelowXAxis ?? noOfSectionsBelowXAxis,
-
-    showYAxisIndices: secondaryYAxis?.showYAxisIndices ?? showYAxisIndices,
-    yAxisIndicesHeight:
-      secondaryYAxis?.yAxisIndicesHeight ?? yAxisIndicesHeight,
-    yAxisIndicesWidth: secondaryYAxis?.yAxisIndicesWidth ?? yAxisIndicesWidth,
-    yAxisIndicesColor: secondaryYAxis?.yAxisIndicesColor ?? yAxisIndicesColor,
-
-    yAxisSide: secondaryYAxis?.yAxisSide ?? yAxisSide,
-    yAxisOffset: secondaryYAxis?.yAxisOffset,
-    yAxisThickness: secondaryYAxis?.yAxisThickness ?? yAxisThickness,
-    yAxisColor: secondaryYAxis?.yAxisColor ?? yAxisColor,
-    yAxisLabelContainerStyle:
-      secondaryYAxis?.yAxisLabelContainerStyle ?? yAxisLabelContainerStyle,
-    yAxisLabelTexts: secondaryYAxis?.yAxisLabelTexts ?? yAxisLabelTexts,
-    yAxisTextStyle: secondaryYAxis?.yAxisTextStyle ?? yAxisTextStyle,
-    yAxisTextNumberOfLines:
-      secondaryYAxis?.yAxisTextNumberOfLines ?? yAxisTextNumberOfLines,
-    yAxisLabelWidth: secondaryYAxis?.yAxisLabelWidth ?? yAxisLabelWidth,
-    hideYAxisText: secondaryYAxis?.hideYAxisText ?? hideYAxisText,
-    yAxisLabelPrefix: secondaryYAxis?.yAxisLabelPrefix ?? yAxisLabelPrefix,
-    yAxisLabelSuffix: secondaryYAxis?.yAxisLabelSuffix ?? yAxisLabelSuffix,
-    hideOrigin: secondaryYAxis?.hideOrigin ?? hideOrigin,
-    formatYLabel: secondaryYAxis?.formatYLabel,
-  };
-
-  const {maxItem, minItem} = computeMaxAndMinItems(
-    secondaryData,
-    secondaryYAxisConfig.roundToDigits,
-    secondaryYAxisConfig.showFractionalValues,
-  );
-  secondaryYAxisConfig.maxValue =
-    secondaryYAxisConfig.maxValue ?? (maxItem || maxValue);
-  secondaryYAxisConfig.mostNegativeValue =
-    secondaryYAxisConfig.mostNegativeValue ?? minItem;
-  secondaryYAxisConfig.stepValue =
-    secondaryYAxisConfig.stepValue ??
-    secondaryYAxisConfig.maxValue /
-      (secondaryYAxisConfig.noOfSections ?? noOfSections);
-  secondaryYAxisConfig.stepHeight =
-    secondaryYAxisConfig.stepHeight ||
-    containerHeight / (secondaryYAxisConfig.noOfSections ?? noOfSections);
-
-  const horizSections: HorizSectionsType = [];
-  for (let i = 0; i <= noOfSections; i++) {
-    let value = maxValue - stepValue * i;
-    if (showFractionalValues || roundToDigits) {
-      value = parseFloat(
-        value.toFixed(roundToDigits ?? AxesAndRulesDefaults.roundToDigits),
-      );
-    }
-
-    horizSections.push({
-      value: yAxisLabelTexts?.length
-        ? yAxisLabelTexts[noOfSections + noOfSectionsBelowXAxis - i] ??
-          value.toString()
-        : value.toString(),
-    });
-  }
-
-  const horizSectionsBelow: HorizSectionsType = [];
-  if (noOfSectionsBelowXAxis) {
-    for (let i = 1; i <= noOfSectionsBelowXAxis; i++) {
-      let value = stepValue * -i;
-      if (showFractionalValues || roundToDigits) {
-        value = parseFloat(
-          value.toFixed(roundToDigits ?? AxesAndRulesDefaults.roundToDigits),
-        );
-      }
-      horizSectionsBelow.push({
-        value: props.yAxisLabelTexts
-          ? props.yAxisLabelTexts[noOfSectionsBelowXAxis - i] ??
-            value.toString()
-          : value.toString(),
-      });
-    }
-  }
-
-  const secondaryHorizSections: HorizSectionsType = [];
-  if (secondaryYAxis) {
-    for (
-      let i = 0;
-      i <= (secondaryYAxisConfig.noOfSections ?? noOfSections);
-      i++
-    ) {
-      let value = secondaryYAxisConfig.stepValue * i;
-      if (
-        secondaryYAxisConfig.showFractionalValues ||
-        secondaryYAxisConfig.roundToDigits
-      ) {
-        value = parseFloat(
-          value.toFixed(
-            secondaryYAxisConfig.roundToDigits ??
-              AxesAndRulesDefaults.roundToDigits,
-          ),
-        );
-      }
-      secondaryHorizSections.push({
-        value: secondaryYAxisConfig.yAxisLabelTexts?.length
-          ? secondaryYAxisConfig.yAxisLabelTexts[
-              i - noOfSectionsBelowXAxis - 1
-            ] ?? value.toString()
-          : value.toString(),
-      });
-    }
-  }
-
-  const secondaryHorizSectionsBelow: HorizSectionsType = [];
-  if (secondaryYAxisConfig.noOfSectionsBelowXAxis) {
-    for (let i = 1; i <= secondaryYAxisConfig.noOfSectionsBelowXAxis; i++) {
-      let value =
-        secondaryYAxisConfig.stepValue *
-        (i - secondaryYAxisConfig.noOfSectionsBelowXAxis - 1);
-      if (
-        secondaryYAxisConfig.showFractionalValues ||
-        secondaryYAxisConfig.roundToDigits
-      ) {
-        value = parseFloat(
-          value.toFixed(
-            secondaryYAxisConfig.roundToDigits ??
-              AxesAndRulesDefaults.roundToDigits,
-          ),
-        );
-      }
-      secondaryHorizSectionsBelow.push({
-        value: secondaryYAxisConfig.yAxisLabelTexts?.length
-          ? secondaryYAxisConfig.yAxisLabelTexts[i - 1] ?? value.toString()
-          : value.toString(),
-      });
-    }
-  }
-
-  /***********************************************************************************************************************************
-   ***********************************************************************************************************************************/
-
-  let {
+  const {
+    secondaryYAxisConfig,
+    horizSections,
+    yAxisExtraHeightAtTop,
+    secondaryHorizSections,
     showReferenceLine1,
-    referenceLine1Position,
     referenceLine1Config,
-
+    referenceLine1Position,
     showReferenceLine2,
-    referenceLine2Position,
     referenceLine2Config,
-
+    referenceLine2Position,
     showReferenceLine3,
-    referenceLine3Position,
     referenceLine3Config,
-  } = referenceLinesConfig;
-
-  const defaultReferenceConfig = {
-    thickness: rulesThickness,
-    width: (width || totalWidth - spacing) + endSpacing,
-    color: 'black',
-    type: rulesType,
-    dashWidth: dashWidth,
-    dashGap: dashGap,
-    labelText: '',
-    labelTextStyle: null,
-    zIndex: 1,
-  };
-
-  showReferenceLine1 = referenceLinesConfig.showReferenceLine1 || false;
-  referenceLine1Position =
-    referenceLinesConfig.referenceLine1Position ??
-    (referenceLinesConfig.referenceLine1Position || containerHeight / 2);
-  referenceLine1Config = referenceLinesConfig.referenceLine1Config
-    ? {
-        thickness:
-          referenceLinesConfig.referenceLine1Config.thickness ||
-          defaultReferenceConfig.thickness,
-        width:
-          referenceLinesConfig.referenceLine1Config.width ??
-          defaultReferenceConfig.width,
-        color:
-          referenceLinesConfig.referenceLine1Config.color ||
-          defaultReferenceConfig.color,
-        type:
-          referenceLinesConfig.referenceLine1Config.type ||
-          defaultReferenceConfig.type,
-        dashWidth:
-          referenceLinesConfig.referenceLine1Config.dashWidth ||
-          defaultReferenceConfig.dashWidth,
-        dashGap:
-          referenceLinesConfig.referenceLine1Config.dashGap ||
-          defaultReferenceConfig.dashGap,
-        labelText:
-          referenceLinesConfig.referenceLine1Config.labelText ||
-          defaultReferenceConfig.labelText,
-        labelTextStyle:
-          referenceLinesConfig.referenceLine1Config.labelTextStyle ||
-          defaultReferenceConfig.labelTextStyle,
-        zIndex:
-          referenceLinesConfig.referenceLine1Config.zIndex ??
-          defaultReferenceConfig.zIndex,
-      }
-    : defaultReferenceConfig;
-
-  showReferenceLine2 = referenceLinesConfig.showReferenceLine2 || false;
-  referenceLine2Position =
-    referenceLinesConfig.referenceLine2Position ??
-    (referenceLinesConfig.referenceLine2Position || (3 * containerHeight) / 2);
-  referenceLine2Config = referenceLinesConfig.referenceLine2Config
-    ? {
-        thickness:
-          referenceLinesConfig.referenceLine2Config.thickness ||
-          defaultReferenceConfig.thickness,
-        width:
-          referenceLinesConfig.referenceLine2Config.width ??
-          defaultReferenceConfig.width,
-        color:
-          referenceLinesConfig.referenceLine2Config.color ||
-          defaultReferenceConfig.color,
-        type:
-          referenceLinesConfig.referenceLine2Config.type ||
-          defaultReferenceConfig.type,
-        dashWidth:
-          referenceLinesConfig.referenceLine2Config.dashWidth ||
-          defaultReferenceConfig.dashWidth,
-        dashGap:
-          referenceLinesConfig.referenceLine2Config.dashGap ||
-          defaultReferenceConfig.dashGap,
-        labelText:
-          referenceLinesConfig.referenceLine2Config.labelText ||
-          defaultReferenceConfig.labelText,
-        labelTextStyle:
-          referenceLinesConfig.referenceLine2Config.labelTextStyle ||
-          defaultReferenceConfig.labelTextStyle,
-        zIndex:
-          referenceLinesConfig.referenceLine2Config.zIndex ??
-          defaultReferenceConfig.zIndex,
-      }
-    : defaultReferenceConfig;
-
-  showReferenceLine3 = referenceLinesConfig.showReferenceLine3 || false;
-  referenceLine3Position =
-    referenceLinesConfig.referenceLine3Position ??
-    (referenceLinesConfig.referenceLine3Position || containerHeight / 3);
-  referenceLine3Config = referenceLinesConfig.referenceLine3Config
-    ? {
-        thickness:
-          referenceLinesConfig.referenceLine3Config.thickness ||
-          defaultReferenceConfig.thickness,
-        width:
-          referenceLinesConfig.referenceLine3Config.width ??
-          defaultReferenceConfig.width,
-        color:
-          referenceLinesConfig.referenceLine3Config.color ||
-          defaultReferenceConfig.color,
-        type:
-          referenceLinesConfig.referenceLine3Config.type ||
-          defaultReferenceConfig.type,
-        dashWidth:
-          referenceLinesConfig.referenceLine3Config.dashWidth ||
-          defaultReferenceConfig.dashWidth,
-        dashGap:
-          referenceLinesConfig.referenceLine3Config.dashGap ||
-          defaultReferenceConfig.dashGap,
-        labelText:
-          referenceLinesConfig.referenceLine3Config.labelText ||
-          defaultReferenceConfig.labelText,
-        labelTextStyle:
-          referenceLinesConfig.referenceLine3Config.labelTextStyle ||
-          defaultReferenceConfig.labelTextStyle,
-        zIndex:
-          referenceLinesConfig.referenceLine3Config.zIndex ??
-          defaultReferenceConfig.zIndex,
-      }
-    : defaultReferenceConfig;
-
-  const getLabelTexts = (val, index) => {
-    return getLabelTextUtil(
-      val,
-      index,
-      showFractionalValues,
-      yAxisLabelTexts,
-      yAxisOffset,
-      yAxisLabelPrefix,
-      yAxisLabelSuffix,
-      roundToDigits ?? AxesAndRulesDefaults.roundToDigits,
-      formatYLabel,
-    );
-  };
-
-  const getLabelTextsForSecondaryYAxis = (val, index) => {
-    const {
-      showFractionalValues,
-      yAxisLabelTexts,
-      yAxisOffset,
-      yAxisLabelPrefix,
-      yAxisLabelSuffix,
-      roundToDigits,
-      formatYLabel,
-    } = secondaryYAxisConfig;
-    return getLabelTextUtil(
-      val,
-      index,
-      showFractionalValues,
-      yAxisLabelTexts,
-      yAxisOffset,
-      yAxisLabelPrefix,
-      yAxisLabelSuffix,
-      roundToDigits ?? AxesAndRulesDefaults.roundToDigits,
-      formatYLabel,
-    );
-  };
+    referenceLine3Position,
+    horizSectionsBelow,
+    secondaryHorizSectionsBelow,
+    getLabelTexts,
+    getLabelTextsForSecondaryYAxis,
+  } = getHorizSectionVals(props);
 
   const renderAxesAndRules = (index: number) => {
     const invertedIndex = horizSections.length - index - 1;
@@ -664,7 +342,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         </View>
       ) : (
         <View
-          pointerEvents='none'
+          pointerEvents="none"
           style={{
             flexDirection: 'row',
             marginTop: stepHeight / -2,

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import {View, Animated} from 'react-native';
+import Svg, {Path} from 'react-native-svg';
+import {renderSpecificVerticalLines} from './renderSpecificVerticalLines';
+import {renderDataPoints} from './renderDataPoints';
+import {renderSpecificDataPoints} from './renderSpecificDataPoints';
+
+const RenderLineInBarChart = props => {
+  const {
+    yAxisLabelWidth,
+    initialSpacing,
+    spacing,
+    containerHeight,
+    lineConfig,
+    maxValue,
+    animatedWidth,
+    lineBehindBars,
+    points,
+    arrowPoints,
+    data,
+    totalWidth,
+    barWidth,
+    labelsExtraHeight,
+    xAxisLabelsVerticalShift,
+  } = props;
+
+  const firstBarWidth = data[0].barWidth ?? barWidth;
+
+  const dataPointsProps = {
+    data,
+    lineConfig,
+    barWidth,
+    containerHeight,
+    maxValue,
+    firstBarWidth,
+    yAxisLabelWidth,
+    spacing,
+  };
+
+  const specificVerticalLinesProps = {
+    data,
+    barWidth,
+    yAxisLabelWidth,
+    initialSpacing,
+    spacing,
+    containerHeight,
+    lineConfig,
+    maxValue,
+  };
+
+  const specificDataPointsProps = {
+    data,
+    barWidth,
+    firstBarWidth,
+    yAxisLabelWidth,
+    lineConfig,
+    spacing,
+    containerHeight,
+    maxValue,
+  };
+
+  const renderAnimatedLine = () => {
+    // console.log('animatedWidth is-------->', animatedWidth);
+    return (
+      <Animated.View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          height: containerHeight + 10,
+          left: 6 - yAxisLabelWidth,
+          bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+          width: animatedWidth,
+          zIndex: lineBehindBars ? -1 : 100000,
+          // backgroundColor: 'wheat',
+        }}>
+        <Svg>
+          <Path
+            d={points}
+            fill="none"
+            stroke={lineConfig.color}
+            strokeWidth={lineConfig.thickness}
+          />
+
+          {renderSpecificVerticalLines(specificVerticalLinesProps)}
+
+          {!lineConfig.hideDataPoints
+            ? renderDataPoints(dataPointsProps)
+            : renderSpecificDataPoints(specificDataPointsProps)}
+          {lineConfig.showArrow && (
+            <Path
+              d={arrowPoints}
+              fill={lineConfig.arrowConfig.fillColor}
+              stroke={lineConfig.arrowConfig.strokeColor}
+              strokeWidth={lineConfig.arrowConfig.strokeWidth}
+            />
+          )}
+        </Svg>
+      </Animated.View>
+    );
+  };
+
+  const renderLine = () => {
+    return (
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          height: containerHeight + 10 + labelsExtraHeight,
+          left: 6 - yAxisLabelWidth,
+          bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+          width: totalWidth,
+          zIndex: lineBehindBars ? -1 : 100000,
+          // backgroundColor: 'rgba(200,150,150,0.1)'
+        }}>
+        <Svg>
+          <Path
+            d={points}
+            fill="none"
+            stroke={lineConfig.color}
+            strokeWidth={lineConfig.thickness}
+          />
+          {renderSpecificVerticalLines(specificVerticalLinesProps)}
+
+          {!lineConfig.hideDataPoints
+            ? renderDataPoints(dataPointsProps)
+            : renderSpecificDataPoints(specificDataPointsProps)}
+          {lineConfig.showArrow && (
+            <Path
+              d={arrowPoints}
+              fill={lineConfig.arrowConfig.fillColor}
+              stroke={lineConfig.arrowConfig.strokeColor}
+              strokeWidth={lineConfig.arrowConfig.strokeWidth}
+            />
+          )}
+        </Svg>
+      </View>
+    );
+  };
+
+  if (lineConfig.isAnimated) {
+    return renderAnimatedLine();
+  }
+
+  return renderLine();
+};
+
+export default RenderLineInBarChart;

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.tsx

@@ -0,0 +1,157 @@
+import React, {Fragment} from 'react';
+import {styles} from '../../../BarChart/styles';
+import {View} from 'react-native';
+import {getXForLineInBar, getYForLineInBar} from 'gifted-charts-core';
+import {Rect, Text as CanvasText, Circle} from 'react-native-svg';
+
+export const renderDataPoints = props => {
+  const {
+    data,
+    lineConfig,
+    barWidth,
+    containerHeight,
+    maxValue,
+    firstBarWidth,
+    yAxisLabelWidth,
+    spacing,
+  } = props;
+  return data.map((item: any, index: number) => {
+    if (index < lineConfig.startIndex || index > lineConfig.endIndex) {
+      return null;
+    }
+    const currentBarWidth = item.barWidth || barWidth || 30;
+    const customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
+    const value =
+      item.value ?? item.stacks.reduce((total, item) => total + item.value, 0);
+    if (customDataPoint) {
+      return (
+        <View
+          style={[
+            styles.customDataPointContainer,
+            {
+              height: lineConfig.dataPointsHeight,
+              width: lineConfig.dataPointsWidth,
+              top:
+                containerHeight -
+                (value * containerHeight) / maxValue -
+                (item.shiftY ?? lineConfig.shiftY ?? 0),
+              left: getXForLineInBar(
+                index,
+                firstBarWidth,
+                currentBarWidth,
+                yAxisLabelWidth,
+                lineConfig,
+                spacing,
+              ),
+            },
+          ]}>
+          {customDataPoint(item, index)}
+        </View>
+      );
+    }
+    if (lineConfig.dataPointsShape === 'rectangular') {
+      return (
+        <Fragment key={index}>
+          <Rect
+            x={getXForLineInBar(
+              index,
+              firstBarWidth,
+              currentBarWidth,
+              yAxisLabelWidth,
+              lineConfig,
+              spacing,
+            )}
+            y={
+              getYForLineInBar(
+                value,
+                lineConfig.shiftY,
+                containerHeight,
+                maxValue,
+              ) -
+              lineConfig.dataPointsHeight / 2
+            }
+            width={lineConfig.dataPointsWidth}
+            height={lineConfig.dataPointsHeight}
+            fill={lineConfig.dataPointsColor}
+          />
+          {item.dataPointText && (
+            <CanvasText
+              fill={item.textColor || lineConfig.textColor}
+              fontSize={item.textFontSize || lineConfig.textFontSize}
+              x={
+                getXForLineInBar(
+                  index,
+                  firstBarWidth,
+                  currentBarWidth,
+                  yAxisLabelWidth,
+                  lineConfig,
+                  spacing,
+                ) + (item.textShiftX || lineConfig.textShiftX || 0)
+              }
+              y={
+                getYForLineInBar(
+                  value,
+                  lineConfig.shiftY,
+                  containerHeight,
+                  maxValue,
+                ) -
+                lineConfig.dataPointsHeight / 2 +
+                (item.textShiftY || lineConfig.textShiftY || 0)
+              }>
+              {item.dataPointText}
+            </CanvasText>
+          )}
+        </Fragment>
+      );
+    }
+    return (
+      <Fragment key={index}>
+        <Circle
+          cx={getXForLineInBar(
+            index,
+            firstBarWidth,
+            currentBarWidth,
+            yAxisLabelWidth,
+            lineConfig,
+            spacing,
+          )}
+          cy={getYForLineInBar(
+            value,
+            lineConfig.shiftY,
+            containerHeight,
+            maxValue,
+          )}
+          r={lineConfig.dataPointsRadius}
+          fill={lineConfig.dataPointsColor}
+        />
+        {item.dataPointText && (
+          <CanvasText
+            fill={item.textColor || lineConfig.textColor}
+            fontSize={item.textFontSize || lineConfig.textFontSize}
+            x={
+              getXForLineInBar(
+                index,
+                firstBarWidth,
+                currentBarWidth,
+                yAxisLabelWidth,
+                lineConfig,
+                spacing,
+              ) + (item.textShiftX || lineConfig.textShiftX || 0)
+            }
+            y={
+              getYForLineInBar(
+                value,
+                lineConfig.shiftY,
+                containerHeight,
+                maxValue,
+              ) -
+              lineConfig.dataPointsHeight / 2 +
+              (item.textShiftY || lineConfig.textShiftY || 0)
+            }>
+            {item.dataPointText}
+          </CanvasText>
+        )}
+      </Fragment>
+    );
+  });
+};