0

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 attachmententer image description here).

I tried different data format by adding data for same data as array. but it failed.

0 Answers0