0

I have tried using react-native-svg-charts, react-native-highcharts but no help. I am having trouble plotting data points, shifting axis(according to time) and marking axis. 

     <YAxis
          data={data1}
          style={{ marginBottom: xAxisHeight }}
          contentInset={verticalContentInset}
          svg={axesSvg}
          numberOfTicks={ 5 }

      />
      <View style={{ flex: 1, marginLeft: 10 }}>
       <LineChart
          style={ { flex: 1 } }
           data={ data1 }
           yAccessor={({ item }) => item.value}
           xAccessor={({ item }) => item.date}
           contentInset={{ left: 10, right: 25 }}
           xScale={scale.scaleTime}
           numberOfTicks={10}
           svg={{
             stroke: "#F7941D",
             strokeWidth: 1.25
           }}

       >
       <Grid/>

       </LineChart>
       <XAxis
         data={data1}
         svg={{
             fill: 'black',
             fontSize: 8,
             fontWeight: 'bold',
             rotation: 20,
             originY: 30,
            y: 5,
         }}
         xAccessor={({ item }) => item.date}
         scale={scale.scaleTime}
         numberOfTicks={10}
         style={{ marginHorizontal: -15, height: 20 }}
         contentInset={{ left: 15, right: 25 }}
         formatLabel={(value) => dateFns.format(value, 'hh:mm:ss')}
       />
       </View>
   `

My data is like this: 1: {value: 119.6932, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 2: {value: 119.9372, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 3: {value: 120.2093, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 4: {value: 122.9826, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 5: {value: 114.2904, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}

The above is implemented using react-native-svg-charts, Here I am able to shift x-axis(time) according to live time somehow but its not proper. Any one with good formatting suggestions ? Thanks

Aravind Reddy
  • 353
  • 4
  • 18
  • 1
    Currently I'm evaluating react-native-graph libs and discovered your post here. Have you already fixed your problem? Would you share your knowledge. In case of not fixing: here are some suggestions: [victory](https://github.com/FormidableLabs/victory-native/issues/131) but beware of version numbers and [esnet](https://github.com/esnet/react-timeseries-charts/issues/89). Hope this will help you a little bit – user3606183 Aug 01 '20 at 01:08
  • Thanks for the comment and info. Tried victory but was not helpful with the data format i had at that time, Still using react-native-svg-charts but was able to format the time properly now. After quite an amount of research I have came to a point where RN is not good with lot of data So i started minimizing the data points (Averaging data for 1 hour to a single point which gives me 24 points in a day which is very easy plot, But this is only with RN. With React I was able to produce good data curves using D3 – Aravind Reddy Aug 03 '20 at 19:37

0 Answers0