Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use Date/Timestamps on X Axis #103

Open
nyxynyx opened this issue Oct 6, 2019 · 0 comments
Open

How to use Date/Timestamps on X Axis #103

nyxynyx opened this issue Oct 6, 2019 · 0 comments

Comments

@nyxynyx
Copy link

nyxynyx commented Oct 6, 2019

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',
  },
});
@nyxynyx nyxynyx changed the title How to use Date/Timestamps as X How to use Date/Timestamps on X Axis Oct 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant