indiespirit / react-native-chart-kit

📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)
https://expo.io/@indiespirit/react-native-chart-kit
MIT License
2.8k stars 653 forks source link

Multiple values in same date addition #692

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

SBRKH commented 11 months ago

Hi @poojalivin, As you know, datasets take an array so you can try something like that :

"datasets":[
            {
            "data":[
            75,
            89,
            80,
            110,
            120,
            90,
            94,
            90,
            90,
            90,
            60,
            80,
            90,
            75
            ]
            },
{
            "data":[
            79,
            111,
            80,
            115,
            123,
            91,
            93,
            92,
            55,
            30,
            20,
            110,
            30,
            95
            ]
            }
            ]
            }