I'm using react-native-chart-kit to plot a Line chart with date in x axis. This is my data set to plot.
{
"labels":[
"18-03-2023",
"18-03-2023",
"03-05-2023",
"29-05-2023",
"30-05-2023",
"07-06-2023",
"09-06-2023",
"09-06-2023",
"09-06-2023",
"09-06-2023",
"04-07-2023",
"04-07-2023",
"04-07-2023",
"04-07-2023"
],"datasets":[{
"data":[75,89,80,110,120,90,94,90,90,90,60,80,90,75]
}]}
and following is my Line Chart code.
<LineChart
data={{
labels: plotData.labels,
datasets: plotData.datasets,
}}
width={screenWidth * 0.82}
height={screenHeight / 2.5}
verticalLabelRotation="30"
yAxisInterval={1}
chartConfig={{
propsForBackgroundLines: {
strokeDasharray: '',
},
propsForLabels: {
fontFamily: 'Poppins-Regular',
},
backgroundColor: '#fff',
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
decimalPlaces: 0,
color: (opacity = 1) =>
`rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) =>
`rgba(0, 0, 0, ${opacity})`,
style: {
},
propsForDots: {
r: '6',
strokeWidth: '2',
color: colors.appPrimary,
backgroundColor: colors.appPrimary,
stroke: colors.appPrimary,
strokeColor: colors.appPrimary,
},
}}
/>
In the above dataset there are multiple values for dates "18-03-2023","09-06-2023" and "04-07-2023". But instead of showing values 75 and 89 on single line on date "18-03-2023", they are shown differently(refer attachment).
I tried different data format by adding data for same data as array. but it failed.