margelo / react-native-graph

📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia
https://margelo.io
MIT License
2.08k stars 118 forks source link

Graph doesn't show or gestureConfig errors #63

Open ElliotWood13 opened 1 year ago

ElliotWood13 commented 1 year ago

const dataPoints = [{"date": 2023-01-21T17:45:00.000Z, "value": 122549.01960784315}, {"date": 2023-01-22T05:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-22T17:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-23T05:45:00.000Z, "value": 119760.47904191617}, {"date": 2023-01-23T17:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-24T05:45:00.000Z, "value": 121951.21951219514}, {"date": 2023-01-24T17:45:00.000Z, "value": 120481.92771084337}]

<LineGraph points={dataPoints} animated={false} color="#fff" />

The graph does not show when using like this.

If I turn animated to true I then get the following error TypeError: undefined is not an object (evaluating 'gestureConfig.toGestureArray').

Can anyone help? I just want to implement a graph similar to those listed in the docs.

ElliotWood13 commented 1 year ago

@mrousavy @chrispader do you have any ideas? 🙏

LeleDallas commented 1 year ago

const dataPoints = [{"date": 2023-01-21T17:45:00.000Z, "value": 122549.01960784315}, {"date": 2023-01-22T05:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-22T17:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-23T05:45:00.000Z, "value": 119760.47904191617}, {"date": 2023-01-23T17:45:00.000Z, "value": 120481.92771084337}, {"date": 2023-01-24T05:45:00.000Z, "value": 121951.21951219514}, {"date": 2023-01-24T17:45:00.000Z, "value": 120481.92771084337}]

<LineGraph points={dataPoints} animated={false} color="#fff" />

The graph does not show when using like this.

If I turn animated to true I then get the following error TypeError: undefined is not an object (evaluating 'gestureConfig.toGestureArray').

Can anyone help? I just want to implement a graph similar to those listed in the docs.

Did you try to set width and height from the style property? Like this:

<LineGraph
        style={{ width: 300, height: 300 }}
      ...
    />