indiespirit / react-native-chart-kit-example

Expo app with charts from react-native-chart-kit
71 stars 61 forks source link

Multiple values in same date addition #16

Open poojalivin opened 1 year ago

poojalivin commented 1 year ago

Hi, 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 this 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 as below.

test

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