xAxis animate dalay when scrolling

[2509031645]

Prerequisites

• I have searched the open issues to make sure I'm not opening a duplicate issue
• I have read through the docs before asking a question
• I am using the latest version of victory-native-xl

Describe Your Environment

I use React Native CLI
and the versions
"react-native": "0.73.2",
-- victory-native@41.16.2

Record_2025-04-08-20-07-32_2f86d2512eb88b4962a9be06f7c196a1.mp4

"react-native-reanimated": "^3.8.1",
"@shopify/react-native-skia": "^1.4.2",

Describe the Problem

The XAxis animation is delayed, and my code just like this:
`const OnshelfChart = (props: OnshelfChartProps) => {
const { onsehlfData } = props;
const {
appStatus: { themeMode },
} = useAppSelector((state) => state.common);
const font = matchFont({
fontSize: 12,
fontFamily: listFontFamilies()[0],
});
const fontXXS = matchFont({
fontSize: 8,
fontFamily: listFontFamilies()[9],
});
const fontLabelText = matchFont({
fontSize: 4,
fontFamily: listFontFamilies()[0],
});

const fontLabelTextMini = matchFont({
	fontSize: 2,
	fontFamily: listFontFamilies()[0],
});

const { state } = useChartTransformState({
	scaleX: 4
});
const { themeColors } = useThemeColors();
// state.matrix.value = multiply4(
// 	state.matrix.value,
// 	translate(-7, 0, 0),
//   );
return (
	<>
		<CartesianChart
			data={onsehlfData} // 👈 specify your data
			xKey="productName" // 👈 specify your x key
			yKeys={['pastMonth', 'currentMonth']} // 👈 specify *each* of your *yKeys* you wish to stack, the order matters here
			domainPadding={{ left: 0, right: 10, top: 20, bottom: 0 }}
			domain={{ x: [0, onsehlfData.length - 1] }} // 👈 you'll need to hardcode your y-domain (for now)
			transformState={state}
			transformConfig={{
				pan: {
					dimensions: 'x'
				},
				pinch: { dimensions: 'x',enabled: false},
			}}
			xAxis={{
				tickCount: onsehlfData.length,
				tickValues: onsehlfData.map((_, i) => i),
				formatXLabel: (v) => {
					return handleProductName(String(v));
				},
				labelOffset: 2,
				labelColor: themeColors.textContentColor,
				font: fontXXS,
				labelRotate: 25,
			}}
			axisOptions={{
				font,
				lineColor: themeMode === ThemeMode.DARK ? '#71717a' : '#d4d4d8',
			}}
			padding={{left: 5, right: 5, bottom: 10}}
		>
			{({ points, chartBounds, yScale, xScale }) => {
				return (
					<>
						<StackedBar
							// animate={{ type: 'spring', duration: 0, stiffness: 1000000, damping: undefined, overshootClamping: true }}
							barWidth={10}
							innerPadding={0.7}
							chartBounds={chartBounds}
							// points={[points.pastMonth, points.lastMonth, points.currentMonth]} // 👈 the order here must match the order above
							points={[points.pastMonth, points.currentMonth]}
							colors={['#1664FF', '#D34F8E']} // 👈 specify your colors
							barOptions={({ isBottom, isTop }) => {
								// 👇 customize each individual bar as desired
								return {
									roundedCorners: isTop
										? {
												topLeft: 0.,
												topRight: 0.8,
										  }
										: isBottom
										? {
												bottomRight: 0,
												bottomLeft: 0,
										  }
										: undefined,
								};
							}}
						></StackedBar>
						{onsehlfData.map((d, index) => (
							<>
								{d.pastMonth > 0 && (
									<SkiaText
										transform={[{ scaleY: 4}]}
										origin={{x: xScale(index), y: yScale(d.pastAllMonth)}}
										key={d.productName + '-' + index + 'pastMonth'}
										x={xScale(index) - 4}
										color={themeColors.titleColor}
										y={yScale(d.pastAllMonth) - 1}
										text={d.pastAllMonth + '(' + d.onshelfRate.toFixed(0) + '%)'}
										font={fontLabelTextMini}
									></SkiaText>
								)}
								{/* {d.lastMonth > 0 && (
									<SkiaText
										transform={[{ scaleY: 4 }]}
										key={d.productName + '-' + index + 'lastMonth'}
										x={xScale(index) - 2}
										// color={themeColors.titleColor}
										color={"#FF0000"}
										y={yScale(d.pastMonth + d.lastMonth) / 4}
										text={d.lastMonth + ''}
										font={fontLabelText}
									></SkiaText>
								)} */}
								{d.currentMonth > 0 && (
									<SkiaText
										transform={[{ scaleY: 4 }]}
										origin={{x: xScale(index), y: yScale(d.pastMonth)}}
										key={d.productName + '-' + index + 'currentMonth'}
										x={xScale(index) - 1}
										// color={themeColors.titleColor}
										color={"#FFFFFF"}
										y={yScale(d.pastMonth)}
										text={'+' + d.currentMonth}
										font={fontLabelTextMini}
									></SkiaText>
								)}
							</>
						))}
					</>
				);
			}}
		</CartesianChart>
		<View style={{ flexDirection: 'row', alignContent: 'center', justifyContent: 'center', alignItems: 'center' }}>
			{['#D34F8E', '#1664FF'].reverse().map((color, index) => (
				<View key={index} style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 10, marginTop: 10 }}>
					<View style={{ width: 20, height: 14, backgroundColor: color, marginRight: 4, borderRadius: 2 }}></View>
					<Text style={{ fontSize: 8, color: themeColors.textContentColor }}>
						{['currentMonth', 'pastMonth'].reverse()[index]}
					</Text>
				</View>
			))}
		</View>
	</>
);

};`

Additional Information

https://youtube.com/shorts/cz1sI2D2M9o?feature=share

[Mirnyjj]

I'm experiencing the same issue, but the lag is much more severe than in your case. Were you able to solve this problem?

[2509031645]

I'm experiencing the same issue, but the lag is much more severe than in your case. Were you able to solve this problem?

I have no idea about that😥