I have tried different settings for the chart, but can't make the labels for the X axis dates show correctly. All labels are displayed on the same place, even if there are different dates and the chart displays well:
Here is my code:
import { View } from 'react-native';
import {
Grid,
AreaChart,
XAxis,
YAxis,
AxisProps,
} from 'react-native-svg-charts';
import { subYears, format } from 'date-fns';
import * as scale from 'd3-scale';
import { useTheme } from 'styled-components/native';
const PerformanceChart = () => {
const theme = useTheme();
const data = [
{ at: subYears(new Date(), 8), value: 85, open: 10, close: 20 },
{ at: subYears(new Date(), 7), value: 91, open: 10, close: 20 },
{ at: subYears(new Date(), 6), value: 35, open: 10, close: 20 },
{ at: subYears(new Date(), 5), value: 53, open: 10, close: 20 },
{ at: subYears(new Date(), 4), value: 53, open: 10, close: 20 },
{ at: subYears(new Date(), 3), value: 24, open: 10, close: 20 },
{ at: subYears(new Date(), 2), value: 50, open: 10, close: 20 },
{ at: subYears(new Date(), 1), value: 20, open: 10, close: 20 },
{ at: new Date(), value: 80, open: 10, close: 20 },
];
const axesSvg: AxisProps<{
at: Date;
value: number;
open: number;
close: number;
}>['svg'] = {
fontSize: 11,
fontWeight: '100',
stroke: theme.colors.neutral[300],
};
const verticalContentInset = { top: 10, bottom: 20 };
const xAxisHeight = 30;
return (
<View style={{ flex: 3, padding: 20, flexDirection: 'row' }}>
<View style={{ flex: 1, marginRight: 10 }}>
<AreaChart
style={{ flex: 1 }}
data={data}
xAccessor={({ item }) => item.at.getTime()}
yAccessor={({ item }) => item.value}
xScale={scale.scaleTime}
contentInset={verticalContentInset}
svg={{ stroke: 'rgb(51, 160, 255)', fill: 'rgba(51, 160, 255, 0.2)' }}
>
<Grid svg={{ stroke: theme.colors.neutral[500] }} />
</AreaChart>
<XAxis
data={data}
xAccessor={({ item }) => item.at}
style={{ height: xAxisHeight, marginTop: 11 }}
formatLabel={(value) => format(value as Date, 'yyyy')}
contentInset={{ left: 10, right: 10 }}
svg={{ ...axesSvg, translateX: 15 }}
/>
</View>
<YAxis
data={data}
yAccessor={({ item }) => item.value}
style={{ marginBottom: xAxisHeight }}
contentInset={verticalContentInset}
svg={{ ...axesSvg, translateX: 8 }}
/>
</View>
);
};
export default PerformanceChart;
this was my last try (setting the xAccessor of the AreaChart using the getTime function. Without this, it didn't work as well. Any ideas? Tried to look at other similar questions and couldn't find a solution that work for me.
