1

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.

Improve this question
2
  • 1
    react-native-chart-kit seems to be discontinued, checkout Victory Chart (github.com/FormidableLabs/victory) Commented Jul 11, 2023 at 11:09
  • @MichaelBahl I migrated to Victory chart. I can mark it as an answer if you add this as an answer. Thank you Commented Jul 20, 2023 at 9:14
Related questions
925
What is the difference between React Native and React?
728
Hide keyboard in react-native
719
What is the difference between using constructor vs getInitialState in React / React Native?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.