margelo / react-native-graph

📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia

Home Page:https://margelo.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Graph doesn't show or gestureConfig errors

ElliotWood13 opened this issue · comments

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.

@mrousavy @chrispader do you have any ideas? 🙏

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 }}
      ...
    />