Я пробовал использовать реактивные-нативные svg-диаграммы, реактивные-нативные-высокие графики, но без помощи. У меня проблемы с построением точек данных, смещением оси (по времени) и разметкой оси.
<YAxis
data={data1}
style={{ marginBottom: xAxisHeight }}
contentInset={verticalContentInset}
svg={axesSvg}
numberOfTicks={ 5 }
/>
<View style={{ flex: 1, marginLeft: 10 }}>
<LineChart
style={ { flex: 1 } }
data={ data1 }
yAccessor={({ item }) => item.value}
xAccessor={({ item }) => item.date}
contentInset={{ left: 10, right: 25 }}
xScale={scale.scaleTime}
numberOfTicks={10}
svg={{
stroke: "#F7941D",
strokeWidth: 1.25
}}
>
<Grid/>
</LineChart>
<XAxis
data={data1}
svg={{
fill: 'black',
fontSize: 8,
fontWeight: 'bold',
rotation: 20,
originY: 30,
y: 5,
}}
xAccessor={({ item }) => item.date}
scale={scale.scaleTime}
numberOfTicks={10}
style={{ marginHorizontal: -15, height: 20 }}
contentInset={{ left: 15, right: 25 }}
formatLabel={(value) => dateFns.format(value, 'hh:mm:ss')}
/>
</View>
`
Мои данные выглядят так: 1: {value: 119.6932, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
2: {value: 119.9372, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
3: {value: 120.2093, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
4: {value: 122.9826, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
5: {value: 114.2904, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
Выше реализовано с использованием response-native-svg-charts, здесь я могу сместить ось X (время) в соответствии с как-то прожить время, но это не правильно. Любой с хорошими предложениями форматирования? Спасибо