Pointer positoning not working on web

[boclar]

Description

There is a gap on the left when positioning the pointer on web.

If you take a look at the image attached, you can see pointer is not placed above number x axis 1 where it should be, but it is a little bit moved to the right.

Steps to reproduce

See the code below, using expo sdk 51. Running on web:

<LineChart animateOnDataChange areaChart color1={theme.colors.brand.secondary} data={chartData} endOpacity1={0} height={250} hideDataPoints1 hideRules isAnimated noOfSections={yAxisLabelsCount - 1} pointerConfig={chartPointerConfig} showScrollIndicator showVerticalLines startOpacity1={0} thickness1={3} verticalLinesColor={theme.colors.text.caption} verticalLinesThickness={0.25} width={chartWidth} xAxisColor={'transparent'} xAxisLabelTextStyle={axisTextStyle} yAxisColor={'transparent'} yAxisLabelTexts={yAxisLabelTexts} yAxisTextStyle={axisTextStyle} />

const chartPointerConfig: Pointer = useMemo( () => ({ activatePointersDelay: 0, activatePointersInstantlyOnTouch: true, activatePointersOnLongPress: true, autoAdjustPointerLabelPosition: true, persistPointer: true, pointerColor: theme.colors.brand.primary, pointerStripColor: theme.colors.text.body, pointerStripWidth: 1, showPointerStrip: Platform.OS !== 'web' && true, }), [theme.colors.brand.primary, theme.colors.text.body] );

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.57

React Native version

0.74.5

Platforms

Web

Workflow

Expo Dev Client