How to enable horizontal panning on CartesianChart?

[karlkuhne]

This should be very straightforward, however I cannot get it to work. I want to follow the instructions presented in the documentation on Pan/Zoom but I get the error message "Cannot read property 'value' of undefined". So there must be something I missed.

Code below, I am very thankful for every help.

import { Area, CartesianChart, Line, Scatter, useChartTransformState } from "victory-native";

// other code

const transformState = useChartTransformState({
        scaleX: 1,
        scaleY: 1,
    });

    return (
        data &&
        <View style={styles.container}>
            <CartesianChart
                data={data}
                xKey="label"
                yKeys={["value"]}
                axisOptions={{ font, labelColor, lineColor: 'white' }}
                xAxis={{ font, labelColor, lineColor: 'transparent' }}
                domainPadding={{ top: 1, bottom: 1, left: 3, right: 0 }}
                transformState={transformState}
            >
                {({ points, chartBounds }) => (
                    <>
                        <Area
                            points={points.value}
                            y0={chartBounds.bottom}
                        >
                            <LinearGradient
                                start={vec(chartBounds.bottom, chartBounds.top)}
                                end={vec(chartBounds.bottom, chartBounds.bottom)}
                                colors={['rgba(139, 87, 185, 0.5)', 'rgba(139, 87, 185, 0.35)', 'rgba(139, 87, 185, 0.1)']}
                            />
                        </Area>
                        <Line
                            points={points.value}
                            color="rgb(139, 87, 185)"
                            strokeWidth={3}
                        />
                        <Scatter
                            points={points.value}
                            color="white"
                            radius={3}
                        />
                    </>
                )}
            </CartesianChart>
        </View>
    )
}