oksktank / react-native-pure-chart

react-native chart library that not using svg or ART but only using react native pure components.
MIT License
288 stars 132 forks source link

How to use Date/Timestamps on X Axis #103

Open nyxynyx opened 5 years ago

nyxynyx commented 5 years ago

How can we use timestamps as the X axis values?

Tried the following code with data formatted like

{x: '2019-01-01 9:00am', y: 10}, {x: '2019-01-01 9:00pm', y: 20},

but it renders incorrectly. The correct chart should not be so linear.

Any help greatly appreciated!

IMG_5291

Actual Code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PureChart from 'react-native-pure-chart';

export default function App() {
  let sampleData = [
    {x: '2019-01-01 9:00am', y: 10},
    {x: '2019-01-01 9:00pm', y: 20},
    {x: '2019-01-08 3:00am', y: 30},
    {x: '2019-01-08 3:00pm', y: 40},
    {x: '2019-01-09 7:00am', y: 30},
    {x: '2019-01-09 7:00pm', y: 20},
  ]

  return (
    <View style={styles.container}>
      <PureChart 
        data={sampleData} 
        type='line' 
        width={'100%'}
        height={300}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee',
    alignItems: 'center',
    justifyContent: 'center',
  },
});