📊 Tooltip Cutoff Issue in Gifted Line Chart

[NikulVnnovate57]

Description

Description

The tooltip on the graph gets cut off on the right-hand side, despite using endSpacing and other spacing adjustments.

Screenshot

Problem Summary

• Tooltip is being cut off on the last data point.
• Tried endSpacing={s(10)} — didn’t resolve the issue.
• Tried manually adding a dummy data point with:

  {
    value: 0,
    label: ' ',
    hideDataPoint: true,
    showXAxisIndex: false,
  }

  but this causes graph distortion in case of less data.
• Also tried giving spacing={0.5}, which solves label cut-off, but again breaks layout with fewer data points.

---

Tooltip Workaround (Current Implementation)

Manually shifting the tooltip by calculating marginLeft using index and total data length.

export const getTooltipMarginStipend = (index: number, length: number) => {
  if (length <= 1) return 0;

  const minMargin = 0;
  const maxMargin = -150;

  const progress = index / (length - 1);
  return Math.round(minMargin + progress * (maxMargin - minMargin));
};

This works, but is more of a workaround than a scalable solution.

---

Expected Solution

Is there a way to add paddingRight or safe spacing logic based on dataset length internally in the chart to avoid tooltip cutoff?

A prop like tooltipPaddingRight or smarter end-label spacing could help fix this generically.

---

Additional Notes

• The xAxis label at the end also gets cut off.
• This should ideally be handled internally by chart layout.

🔍 Observation

In BarChart and StackedBarChart, the endSpacing prop seems to correctly prevent the tooltip and labels from getting cut off. However, in the LineChart, even after applying endSpacing, the tooltip still appears clipped.

❓ Question: Why does endSpacing behave as expected in BarChart and StackedBarChart but not in LineChart?

Environment

• Library: react-native-gifted-charts : (1.4.61)
• Chart Type: LineChart
• React Native: 0.79.2
• Platform: iOS
• Device: iPhone 13 Pro Max
• Tooltip: Custom pointerLabelComponent

---

Steps to reproduce

<LineChart
data={data}
width={WIDTH - s(105)}
nestedScrollEnabled
data2={targetLinesData?.line_0?.data}
data3={targetLinesData?.line_1?.data}
data4={targetLinesData?.line_2?.data}
data5={targetLinesData?.line_3?.data}
color2={getColors(targetLinesData?.line_0?.color)}
color3={getColors(targetLinesData?.line_1?.color)}
color4={getColors(targetLinesData?.line_2?.color)}
color5={getColors(targetLinesData?.line_3?.color)}
dashGap={s(4)}
dashWidth={s(5)}
strokeDashArray2={[s(4), s(4)]}
strokeDashArray3={[s(4), s(4)]}
strokeDashArray4={[s(4), s(4)]}
strokeDashArray5={[s(4), s(4)]}
height={vs(132)}
thickness={1.5}
color={baseColors.blueLotus}
noOfSections={numOfSections || 2}
yAxisColor={colors(theme || COLOR_SCHEME.DARK).barInActive}
xAxisColor={colors(theme || COLOR_SCHEME.DARK).barInActive}
yAxisTextStyle={[styles.axisText, axisTextColor]}
yAxisLabelTexts={yAxisLabelTexts}
yAxisOffset={minValue}
stepValue={stepValue}
yAxisLabelWidth={s(35)}
yAxisTextNumberOfLines={1}
// xAxisTextNumberOfLines={1}
// xAxisLabelTextStyle={[styles.xAxisText, axisTextColor]}
// xAxisLabelsVerticalShift={vs(isTablet ? 5 : 15)}
// xAxisLabelsHeight={vs(isTablet ? 35 : 25)}
// xAxisLabelsAtBottom={false}
// zIndex1={-999}
// zIndex2={-999}
// zIndex3={-999}
// zIndex4={-999}
// zIndex5={-999}
// verticalLinesZIndex={-999}
// initialSpacing={10}
endSpacing={s(10)}
// edgePosition={EdgePosition.AFTER_DATA_POINT}
initialSpacing={s(10)}
// spacing={0.5}
xAxisThickness={xAxisThickness || 0}
yAxisThickness={0.6}
rotateLabel={true}
hideDataPoints
isAnimated={false}
yAxisExtraHeight={vs(20)}
adjustToWidth
curved
disableScroll
hideRules
pointerConfig={{
pointerStripHeight: vs(isTablet ? 130 : 120),
pointerStripColor: colors(theme || COLOR_SCHEME.DARK).barInActive,
pointerLabelWidth: s(93),
activatePointersOnLongPress: true,
autoAdjustPointerLabelPosition: false,
pointerLabelComponent: renderPointerLabel,
hidePointers: true,
}}
/>

const renderPointerLabel = useCallback(
(items: ChartDataPointType[], temp: number, index: number) => {
const showData = items?.length > 0 ? items[0] : false;
return (

);
},
[type, length],
);

const GraphPointer: FC = props => {
const theme = useSelector(getTheme);
const {showData, type, index, length} = props;
useEffect(() => {
logAnalytics(${type}_${EVENTS.GRAPH_TOOLTIP});
}, [type]);

const pointerSubContainer = {
backgroundColor: colors(theme || COLOR_SCHEME.DARK).midSecondary,
marginLeft: s(getTooltipMarginStipend(index, length)),
};
return (

<View style={[styles.pointerSubContainer, pointerSubContainer]}>
{showData && typeof showData === 'object' && showData?.date && (

)}
{showData && typeof showData === 'object' && showData?.value && (
<Typography
title={Total wRVUs : ${showData?.value.toLocaleString('en-US')}}
size={7}
font={Fonts.Bold}
mt={2}
/>
)}


);
};

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.61

React Native version

0.79.2

Platforms

Android, iOS

Workflow

React Native