Horizontal Scrolling gets graph out of the scope

[pranavavasthi40]

When I'm scrolling horizontally, it just gets the graph out of the mobile device, is there any way where we can restrict the scrolling through 1st and last point? Attaching the code and recording of the issue

`import React from "react";
import { LinearGradient, useFont, vec } from "@shopify/react-native-skia";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import {
Area,
CartesianChart,

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-03-27.at.14.43.23.mp4

Line,
useChartTransformState,
} from "victory-native";
const spaceMono = require("../../assets/fonts/SpaceMono-Regular.ttf");

const DATA = Array.from({ length: 31 }, (_, i) => ({
day: i + 1,
highTmp: 40 + 30 * Math.random(),
lowTmp: 30 + 20 * Math.random(),
}));

const yKeys = ["highTmp", "lowTmp"];
const colors = ["#E77828", "#549D4C"];
const lightColors = ["#E7782820", "#549D4C20"];

const CHART_HEIGHT = 300;

export default function HomeScreen() {
const font = useFont(spaceMono, 12);
const { state: chartTransform } = useChartTransformState({
scaleX: 2.0, // Initial zoom level for x-axis
scaleY: 1.0, // Keep y-axis at normal scale
});

return (
<SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
<View style={{ height: CHART_HEIGHT }}>
<CartesianChart
data={DATA}
xKey="day"
yKeys={yKeys as any}
transformState={chartTransform}
transformConfig={{
pan: {
dimensions: ["x"],
activateAfterLongPress: 0,
},
}}
domainPadding={{ top: 100, bottom: 100 }}
axisOptions={{
font,
labelColor: "white",
tickCount: { x: 10, y: 5 },
}}
>
{({ points, chartBounds }) => (
<>
{yKeys.map((key, index) => (
<React.Fragment key={key}>
<Line
points={points[key as keyof typeof points]}
color={colors[index]}
strokeWidth={1}
curveType="monotoneX"
/>
<Area
curveType="monotoneX"
points={points[key as keyof typeof points]}
y0={chartBounds.bottom}
>
<LinearGradient
start={vec(0, 0)}
end={vec(0, chartBounds.bottom)}
colors={[colors[index], lightColors[index]]}
/>

</React.Fragment>
))}
</>
)}



);
}
`

[contactsimonwilson]

@pranavavasthi40

I've got an enforcePanConstraint function that I use for this

const enforcePanConstraint = (
  transformState: ChartTransformState,
  bounds: { left: number; top: number; right: number; bottom: number },
  viewportXScale: number,
) => {
  'worklet';
  const vals = getTransformComponents(transformState.matrix.value);
  const boundsX = (bounds.right - bounds.left) * (viewportXScale - 1);
  const limit = boundsX * vals.scaleX;

  if (vals.translateX > 0) {
    transformState.matrix.set(setTranslate(transformState.matrix.value, 0, vals.translateY));
  }

  if (vals.translateX < -limit) {
    transformState.matrix.set(setTranslate(transformState.matrix.value, -limit, vals.translateY));
  }
};

Used in the following way:

  useAnimatedReaction(
    () => {
      const vals = getTransformComponents(transformState.matrix.value);
      return vals.translateX;
    },
    (cv, pv) => {
      if (cv !== pv) {
        enforcePanConstraint(transformState, bounds, viewportXScale);
      }
    },
  );

[Mirnyjj]

@pranavavasthi40

У меня есть функция forcePanConstraint, которую я для этого использую.

const enforcePanConstraint = (
  transformState: ChartTransformState,
  bounds: { left: number; top: number; right: number; bottom: number },
  viewportXScale: number,
) => {
  'worklet';
  const vals = getTransformComponents(transformState.matrix.value);
  const boundsX = (bounds.right - bounds.left) * (viewportXScale - 1);
  const limit = boundsX * vals.scaleX;

  if (vals.translateX > 0) {
    transformState.matrix.set(setTranslate(transformState.matrix.value, 0, vals.translateY));
  }

  if (vals.translateX < -limit) {
    transformState.matrix.set(setTranslate(transformState.matrix.value, -limit, vals.translateY));
  }
};

Используется следующим образом:

  useAnimatedReaction(
    () => {
      const vals = getTransformComponents(transformState.matrix.value);
      return vals.translateX;
    },
    (cv, pv) => {
      if (cv !== pv) {
        enforcePanConstraint(transformState, bounds, viewportXScale);
      }
    },
  );

Thank you so much! I spent a huge amount of time trying to solve this problem. You've helped me tremendously!

[TarunBhan]

this solution we can use but it creates jigger when user try to scroll horizontally can we have some other solution

[contactsimonwilson]

this solution we can use but it creates jigger when user try to scroll horizontally can we have some other solution

It shouldn't unless you're going outside of the bounds. Put some logging into the enforcePanConstraints function to see if the transform is being applied when you wouldn't expect.

[JennieCrowel]

enforcePanConstraint(transformState, bounds, viewportXScale);

Hello, can you tell me where we get the bound and viewportXScale values from?

[Mirnyjj]

принудительно применить PanConstraint(transformState, bounds, viewportXScale);

Здравствуйте, можете ли вы сказать, откуда мы берем значения bound и viewportXScale ?

import {ITelemetry} from '@/models/dataType';
import {useFont} from '@shopify/react-native-skia';
import {
Bar,
CartesianChart,
getTransformComponents,
setTranslate,
useChartTransformState,
} from 'victory-native';

import inter from '../../../assets/fonts/inter-medium.ttf';
import SpinerRendering from '@/components/SpinerRendering';
import {SafeAreaView} from 'react-native-safe-area-context';
import {View} from 'react-native';
import {useMemo} from 'react';
import {ChartTransformState} from 'victory-native/dist/cartesian/hooks/useChartTransformState';
import {useAnimatedReaction, useSharedValue} from 'react-native-reanimated';

type Props = {
telemetryData: ITelemetry[];
timeRange: number;
};

export const BarChartWidget = ({telemetryData, timeRange}: Props) => {
const transformState = useChartTransformState({
scaleX: 2.0,
scaleY: 1.0,
});
const chartBoundsRef = useSharedValue({left: 0, right: 0, top: 0, bottom: 0});
const font = useFont(inter, 12);

const enforcePanConstraint = (
transformState: ChartTransformState,
bounds: {left: number; top: number; right: number; bottom: number},
viewportXScale: number,
) => {
'worklet';
const vals = getTransformComponents(transformState.matrix.value);
const boundsX = (bounds.right - bounds.left) * (viewportXScale - 1);
const limit = boundsX * vals.scaleX;

if (vals.translateX > 0) {
  transformState.matrix.set(
    setTranslate(transformState.matrix.value, 0, vals.translateY),
  );
}

if (vals.translateX < -limit) {
  transformState.matrix.set(
    setTranslate(transformState.matrix.value, -limit, vals.translateY),
  );
}

};

useAnimatedReaction(
() => {
const vals = getTransformComponents(transformState.state.matrix.value);
return vals.translateX;
},
(cv, pv) => {
if (cv !== pv) {
const bounds = chartBoundsRef.value;
const scaleX = getTransformComponents(transformState.state.matrix.value).scaleX;
enforcePanConstraint(transformState.state, bounds, scaleX);
}
},
);

const mapDataTelemetry = telemetryData.map(item => ({
ts: item.ts,
value: Number(item.value),
}));

const domain = useMemo(() => {
const maxYValue = Math.max(...mapDataTelemetry.map(d => d.value));
const maxXValue = new Date().getTime();
return {
x: [Math.min(...mapDataTelemetry.map(d => d.ts)), maxXValue],
y: [0, maxYValue],
};
}, [mapDataTelemetry]);

const generateTickValues = () => {
if (!mapDataTelemetry?.length) return [];

const minTime = Math.min(...mapDataTelemetry.map(d => d.ts));
const maxTime = Math.max(...mapDataTelemetry.map(d => d.ts));
const rangeMs = timeRange * 60 * 60 * 1000;
// const rangeMs = maxTime - minTime;
// const rangeMs = (timeRange * 60 * 60 * 1000) / zoomLevel;
// const rangeMs = Math.min((timeRange * 60 * 60 * 1000) / zoomLevel, maxTime - minTime);

let step, alignTo;

if (rangeMs > 7 * 24 * 60 * 60 * 1000) {
  step = 2 * 24 * 60 * 60 * 1000;
  alignTo = {hours: 0, minutes: 0};
} else if (rangeMs > 1 * 24 * 60 * 60 * 1000) {
  step = 12 * 60 * 60 * 1000;
  alignTo = {hours: [0, 12], minutes: 0};
} else if (rangeMs > 10 * 60 * 60 * 1000) {
  step = 2 * 60 * 60 * 1000;

  alignTo = {hours: (h: number) => h % 2 === 0, minutes: 0};
} else if (rangeMs > 5 * 60 * 60 * 1000) {
  step = 60 * 60 * 1000;
  alignTo = alignTo = {hours: (h: number) => true, minutes: 0};
} else if (rangeMs > 2 * 60 * 60 * 1000) {
  step = 30 * 60 * 1000;
  alignTo = {minutes: [0, 30]};
} else if (rangeMs > 60 * 60 * 1000) {
  step = 10 * 60 * 1000;
  alignTo = {minutes: (m: number) => m % 10 === 0};
} else {
  step = 5 * 60 * 1000;
  alignTo = {minutes: (m: number) => m % 2 === 0};
}

// Выравниваем начальное время
const startDate = new Date(minTime);

if (alignTo.hours !== undefined) {
  if (Array.isArray(alignTo.hours)) {
    // Выравниваем к ближайшему 0 или 12 часам
    const nearest = alignTo.hours.reduce((prev, curr) =>
      Math.abs(curr - startDate.getHours()) < Math.abs(prev - startDate.getHours())
        ? curr
        : prev,
    );

    startDate.setHours(nearest);
  } else if (typeof alignTo.hours === 'function') {
    // Пропускаем часы, не удовлетворяющие условию
    while (!alignTo.hours(startDate.getHours())) {
      startDate.setTime(startDate.getTime() + 60 * 60 * 1000);
    }
  } else {
    startDate.setHours(0);
  }
}

if (alignTo.minutes !== undefined) {
  if (Array.isArray(alignTo.minutes)) {
    const nearest = alignTo.minutes.reduce((prev, curr) =>
      Math.abs(curr - startDate.getMinutes()) <
      Math.abs(prev - startDate.getMinutes())
        ? curr
        : prev,
    );
    startDate.setMinutes(nearest);
  } else if (typeof alignTo.minutes === 'function') {
    while (!alignTo.minutes(startDate.getMinutes())) {
      startDate.setTime(startDate.getTime() + 60 * 1000);
    }
  } else {
    startDate.setMinutes(0);
  }
}

startDate.setSeconds(0, 0);
let alignedStart = startDate.getTime();

const ticks = [];
for (let time = alignedStart; time <= maxTime; time += step) {
  ticks.push(time);
}

return ticks;

};

const formatXLabels = (value: number) => {
const date = new Date(value);
if (isNaN(date.getTime())) return '';

return date.toLocaleDateString('ru-RU', {
  month: 'short',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
});

};
const formatYLabels = (value: number | undefined) => {
return ${value} кВт*ч;
};

if (!telemetryData.length) {
return ;
}

return (

<View
style={{
height: 400,
width: 1500,
backgroundColor: 'white',
paddingBottom: 20,
}}>
<CartesianChart
data={mapDataTelemetry}
xKey='ts'
yKeys={['value']}
xAxis={{
font: font,
enableRescaling: true,
tickCount: mapDataTelemetry.length,
tickValues: generateTickValues(),
formatXLabel: formatXLabels,
}}
padding={10}
domain={{x: [domain.x[0], domain.x[1]]}}
yAxis={[
{
tickCount: 10,
font: font,
formatYLabel: formatYLabels,
// enableRescaling: true,
},
]}
transformState={transformState.state}
transformConfig={{
pan: {
enabled: true,
dimensions: 'x',
},
pinch: {
enabled: false,
},
}}>
{({points, chartBounds}) => {
chartBoundsRef.value = chartBounds;
return (
<Bar
barWidth={timeRange < 11 ? 28 : 360 / timeRange}
points={points.value}
innerPadding={0.4}
chartBounds={chartBounds}
color='#5eb761'
roundedCorners={{topLeft: 10, topRight: 10}}
/>
);
}}



);
};

[JennieCrowel]

thank you!