The problem involves the display of the chart across the screen width, the display of the X-axis label, and the chart plotting.

[Mirnyjj]

I can't properly configure the chart display with scrolling and clipping at the extreme values. Please help—I’ve attached the code. I’m still very inexperienced in native development.

import SpinerRendering from "@/components/SpinerRendering";
import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
import inter from "../../../assets/fonts/inter-medium.ttf";
import { CartesianChart, Line, useChartTransformState } from "victory-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useFont } from "@shopify/react-native-skia";

export type DataLineChart = {
labels: string[];
datasets: {
data: (number | null)[];
color?: (opacity: number) => string;
strokeWidth?: number;
withDots: boolean;
}[];
};

type Props = {
dataTelemetry: DataLineChart;
};

type ChartData = {
value: number;
date: string;
};

const LineChartRendering = ({ dataTelemetry }: Props) => {
const [data, setData] = useState<ChartData[]>([]);
const { state } = useChartTransformState();
// const [selectedRange, setSelectedRange] = useState<[number, number] | null>(
// null
// );
const font = useFont(inter, 12);
useEffect(() => {
const dataSet = dataTelemetry.datasets.map((item) => item.data);
const date = dataTelemetry.labels;

const dataChartMap = date.map((item, index) => ({
  date: item,
  value: dataSet[0][index] ? dataSet[0][index] : 0,
}));
setData(dataChartMap);

}, []);

if (!data.length) {
return ;
}

return (

<View
style={{
maxHeight: 400,
padding: 32,
height: 400,
width: 2000,
}}
>
<CartesianChart
data={data}
xKey="date"
yKeys={["value"]}
yAxis={[
{
font: font,
enableRescaling: true,
},
]}
xAxis={{
font: font,
enableRescaling: true,
}}
transformState={state}
transformConfig={{
pan: {
dimensions: ["x"],
},
pinch: { dimensions: "x" },
}}
>
{({ points }) =>
points.value && points.value.length > 0 ? (

) : null
}



);
};

const styles = StyleSheet.create({
safeView: {
flex: 1,
},
noDataContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
noDataText: {
fontSize: 16,
},
});

export default LineChartRendering;