indiespirit / react-native-chart-kit Goto Github PK

Love this library, would it be possible to add labels to the ProgressChart diagram? Currently, it shows the value in the label, but it is difficult to let the user know what that value represents i.e. calories, energy, etc

Hi,

I am actually trying to display a pie chart in my react-native project, you can see my code below (exactly the same as the example)

<View style={{ padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }}> <PieChart data={[ { name: 'Toronto', population: 2800000 }, { name: 'Dublin', population: 527612 }, { name: 'New York', population: 8538000 }, { name: 'Beijing', population: 21500000 }, { name: 'Moscow', population: 11920000 } ]} width={Dimensions.get('window').width} height={220} chartConfig={{ backgroundGradientFrom: '#ccff33', backgroundGradientTo: '#ffff33', color: () => #000 }} accessor="population" /> </View>

But i'm getting this error:
`TypeError: TypeError: TypeError: undefined is not a function (evaluating 'data.entries()typeof Symbol === "function" ? Symbol.iterator : "@@iterator"')

This error is located at:
in PieChart (at Home.js:17)
in RCTView (at View.js:60)
in View (at Home.js:15)
in RCTView (at View.js:60)
in View (at Home.js:14)
in Home (at SceneView.js:9)
in SceneView (at createTabNavigator.js:10)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at BottomNavigation.js:558)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at BottomNavigation.js:543)
in RCTView (at View.js:60)
in View (at BottomNavigation.js:527)
in RCTView (at View.js:60)
in View (at BottomNavigation.js:522)
in BottomNavigation (at withTheme.js:75)
in ThemeProvider (at withTheme.js:89)
in withTheme(BottomNavigation) (at createMaterialBottomTabNavigator.js:25)
in BottomNavigationView (at createTabNavigator.js:115)
in NavigationView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:383)
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:383)
in NavigationContainer (at App.js:34)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)

This error is located at:
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:383)
in NavigationContainer (at App.js:34)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)

This error is located at:
in NavigationContainer (at App.js:34)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)

• node_modules\paths-js\pie.js:39:25 in
• node_modules\react-native-chart-kit\src\pie-chart.js:18:22 in render
• ... 18 more stack frames from framework internals
  `

I thought that was a problem with a function called data.entries() in the pie_chart.js code but it doesn't exist in it.

May I have some help please ? :)

Is there any way to remove grid at background in line graph?

E/unknown:ReactNative: Exception in native call
com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'strokeWidth' in shadow node of type: RNSVGLine
at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:113)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:154)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:58)
at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:378)
at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:289)
at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:366)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:160)
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
at android.os.Looper.loop(Looper.java:148)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:192)
at java.lang.Thread.run(Thread.java:818)
Caused by: java.lang.ClassCastException: java.lang.Double cannot be cast to java.lang.String
at com.facebook.react.bridge.ReadableNativeMap.getString(ReadableNativeMap.java:168)
at com.facebook.react.uimanager.ReactStylesDiffMap.getString(ReactStylesDiffMap.java:71)
at com.facebook.react.uimanager.ViewManagersPropertyCache$StringPropSetter.extractProperty(ViewManagersPropertyCache.java:243)
at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPro

Trying to run quick exampe

`export default class Example extends Component {

constructor(props){
super(props);
}

render() {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
      data: [ 20, 45, 28, 80, 99, 43 ]
    }]
  }


    return (
        <View>
      <LineChart

data={data}
width={200}
height={220}
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#fb8c00',
backgroundGradientTo: '#ffa726',
color: (opacity = 1) => rgba(255, 255, 255, 1),
style: {
borderRadius: 16
}
}}
/>

);
}
componentDidMount() {

}

}
`

Enviroment-

"react": "16.0.0",
"react-native": "0.51.0",
"react-native-chart-kit": "^1.1.5",

getting error
Invarient Violation : Native component for "RNSVGLinearGradient" does not exist

In my use case I specifically capture items over the last ten days. If nothing has happened in those ten days the graph will look like this:

As you can see in the bottom left corner it displays NaN when it should display 0.

Here is my data from the server.

labels: [],
datasets: [{
  data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
}]

Edit:

Also is there any choice for whole numbers only down the Y axis?

I created a BarChart according to the sample code. Everything looks good, but I cannot see vertical labels for y-axis. If I switched it to LineChart, vertical labels will show up. Any ideas why?

I try to make ContributionGraph, and i'm taking this error : TypeError: undefined is not an object (evaluating 'this.props.style.borderRadius')

here is relevant part of my code

`

render() {
const chartConfig = {
  backgroundGradientFrom: '#1E2923',
  backgroundGradientTo: '#08130D',
  color: (opacity = 1) => 'rgba(26, 255, 146, ${opacity})'      
}

const screenWidth = Dimensions.get('window').width
const commitsData = [
  { date: '2017-01-02', count: 1 },
  { date: '2017-01-03', count: 2 },
  { date: '2017-01-04', count: 3 },
  { date: '2017-01-05', count: 4 },
  { date: '2017-01-06', count: 5 },
  { date: '2017-01-30', count: 2 },
  { date: '2017-01-31', count: 3 },
  { date: '2017-03-01', count: 2 },
  { date: '2017-04-02', count: 4 },
  { date: '2017-03-05', count: 2 },
  { date: '2017-02-30', count: 4 }
]

if(this.state.loading){
  return(
  <View style={styles.container}>
    <ActivityIndicator size="large"/>
  </View>
  )
}
return (

  <View style={styles.container}>
    <ContributionGraph
      values={commitsData}
      endDate={new Date('2017-04-01')}
      numDays={105}
      width={screenWidth}
      height={220}
      chartConfig={chartConfig}
    />
  </View>
  
);
}

}`

Bar chart: how can i change bar color to different colors and can i add data on top of each bar?

Hi.

I just wanted to change each pie's color and set background transparent.

so I modified some codes about things

1. adjust color on each pie
2. adjust color on each pie's legend font
3. alignment - left padding and adjustment of offset x.

I applied pull request so please check this out.

Thanks.

When I try to import a library, I get an error

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

My project looks like this

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Dimensions} from 'react-native';
import {
    LineChart,
    BarChart,
    PieChart,
    ProgressChart,
    ContributionGraph
} from 'react-native-chart-kit'


const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Of course I did
yarn add react-native-chart-kit

Following the examples here, I tried creating a LinearChart but get greeted with a 'red screen of death' with this error: ReferenceError: Can't find variable calcScaler.

Any ideas?

After I install the package and start the project, I got several error messages like:

jest-haste-map: @providesModule naming collision:
Duplicate module name: CheckBox
Paths: .../node_modules/react-native-scrollable-tab-view/node_modules/react-native/Libraries/Components/CheckBox/CheckBox.ios.js collides with .../node_modules/react-native-chart-kit/node_modules/react-native/Libraries/Components/CheckBox/CheckBox.ios.js

This warning is caused by a @providesModule declaration with the same name across two different files.
ERROR STARTING PACKAGER

I am using
"expo": "^22.0.0", "npm": "^5.6.0", "prop-types": "^15.6.0", "react": "^16.2.0", "react-native": "^0.49.5",

How can I enable horizontal scrolling to see the rest of the chart?

Should use a sensible default (0) here.

When data = [0, 0, 0, 0, 0, 0, 0]
it shows like this:

Is there a way to scale Y-axis as [0,1] so that all the 0 go to the base line?

I am unable to get the library demo setup to run on a simulator so I can assist with some cleanup and features.

I installed dependencies, changed main in package.json, and tried running the app :/

Hi, how can I remove the vertical and horizontal lines of the grid?

Thank you !

What's up everyone.

I'm trying to make the chart data dynamic, and the data itself (at the chart) must be updated in accord to an array I've created.

My data is configured as:

data={{labels: labels, datasets: [{ data: net }]}}

Labels are working just fine, but the net array is updated with a new value each 5 seconds. The whole structure seems ok, but I'm always getting this error 'Error while updating property 'd' in shadow node' from react native svg when trying to pass this net array as my dataaset.

Is there any way I can fix it? Just to keep in mind, the chart should update synchronously to the array itself. Thanks guys.

I get an this error when the bezierLineChart is rendered.
I created the chart like the example.

Here is my react-native version
react-native: 0.54.0
react-native-chart-kit: 0.1.5
expo: 26.0.0

Can I get some help?

I'm new using this lib, there's a way to set gradient orientation to vertical? Thx

id like to show the values in this format 0.057016 in Line Chart Data part any help?

First of all, this is my favorite chart library by far. It looks great and the contributions chart is amazing. Unfortunately, I can't really imagine using this in a real setting. In trying to design an app for iOS and Android, I'm finding it really hard to work with. Specifically:

• The contributions chart refuses to resize
• The charts that do resize end up looking strange; for example, the Pie Chart does not look good on an iPad because the text size of the labels is too small

All in all, I think the root of the issue is that we don't have enough control over the chart. It feels a bit like putting an image into the app, it looks great but I can't customize it on any meaningful level and sadly that's a deal breaker.

Honestly, I will probably be spending the next few days addressing these issues and hopefully making pull requests, but I thought a discussion couldn't hurt, especially since I could be missing some less obvious features.

I'm using:

"expo": "^26.0.0",
"react": "16.3.0",
"react-native": "~0.54.1",

and when I test it the iOS simulator crashes, I'm using your example code as source.
can you confirm that it should work, with the above configuration?

Thanks

The app crashes when LineChart is re-rendered even without any changes to the graph (data, width, height, chartConfig are all same)

iOS crash
removedChildren count (0) was not what we expected (1)
Android crash

Trying to remove a view index above child count 2 view tag: 403
detail: View tag:403
 children(0): [
],
 indicesToRemove(1): [
2,
],
 tagsToDelete(1): [
307,
]

versions:
"react": "16.3.1",
"react-native": "^0.56.0",
"react-native-chart-kit": "^1.1.6",
"react-native-svg": "^7.0.2",

reproducible code

import React from 'react'
import { LineChart } from 'react-native-chart-kit'

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      data: [20, 45, 28, 80, 99, 43],
    },
  ],
}

export default class DailyRevenue extends React.Component {
  componentDidMount() {
    setTimeout(() => {
      this.setState({})
    }, 1000)
  }
  render() {
    return (
      <LineChart
        data={data}
        width={400}
        height={400}
        chartConfig={{
          backgroundColor: '#e26a00',
          backgroundGradientFrom: '#fb8c00',
          backgroundGradientTo: '#ffa726',
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 16,
          },
        }}
      />
    )
  }
}

Hi, how to set width between data or set fontSize chart data?

I'm using the example on the github page with boilerplate react native expo snack code. The error only arises when I add the chartConfig prop (with the default chartConfig provided in the readme). I can't get the component to load on screen at all and consistently get this error.

Y axis values with yAxisNumType='float':
75.52
58.21
32.84

Y axis values with yAxisNumType='int'
75
58
32

Can you add this prop. please?

I am using LineChart with bezier and its working fine in android but showing error
in iOS. App is getting data from firebase then it updates the states. chart renders correctly in android but crashes on ios

`<LineChart

data={{
  labels: this.state.chartLable,
  datasets: [{
    data: this.state.chartData
  }]
}} 
width={wp('96%')} 
height={220}
chartConfig={{
  backgroundColor: '#26d292',
  backgroundGradientFrom: '#22c393',
  backgroundGradientTo: '#22e093',
  decimalPlaces: 2, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  style: {
    borderRadius: 16,
  }
}}
bezier
style={{
  marginVertical: 8,
  borderRadius: 16,
}}

/>`

"react-native-chart-kit": "^1.1.7",
"react-native": "0.55.4",
"react-native-svg": "^7.0.3"

Even for the Example code is showing the same result.

I saw it's just a constant already, might as well make it a prop because right now this graph is not very useful if the size can't be adjusted.

Is it possible to add a character in the vertical line?

example:

Is possible to set a chart animation?

So I have two sets of data but they all in one color, I'm trying to have a green color of the first dataset and a red for the other one. How do I go about it?

I'm using this library
but I got this error message:

Error while updating property 'd' in shadow node of type: RNSVGPath

        <View style={{width:'100%',height:'100%'}}>
            <Text style={{fontSize:20,fontWeight:'bold'}}>
            pichart
            </Text>
            <PieChart
              data={chartAnswered}
              width={chartWidth} // from react-native
              height={220}
              chartConfig={{
                backgroundColor: colorConstants.ONE_APP_COLOR,
                backgroundGradientFrom: colorConstants.ONE_APP_COLOR,
                backgroundGradientTo: '#044675',
                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                style: {
                  borderRadius: 16
                }
              }}
              bezier
              style={{
                marginVertical: 8,
                borderRadius: 16
              }}
            />
          </View>

my data:

chartAnswered:[
      { name: 'Italy', population: Math.random() * 10000 },
      { name: 'Mexico', population: Math.random() * 10000 },
      { name: 'France', population: Math.random() * 10000 },
      { name: 'Argentina', population: Math.random() * 10000 },
      { name: 'Japan', population: Math.random() * 10000 }
    ]

my package.json:

  "dependencies": {
    "jalali-moment": "^3.2.1",
    "moment": "^2.22.2",
    "native-base": "^2.6.1",
    "paths-js": "^0.4.7",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-chart-kit": "^1.1.5",
    "react-native-contacts": "^2.2.2",
    "react-native-document-picker": "^2.1.0",
    "react-native-fs": "^2.11.15",
    "react-native-image-resizer": "^1.0.0",
    "react-native-material-bottom-navigation": "^1.0.0",
    "react-native-progress-bar-animated": "^1.0.6",
    "react-native-slider": "^0.11.0",
    "react-native-svg": "^6.5.2",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.8.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "watchman": "^1.0.0"
  },

Hi,
I've encountered a problem trying to render a following chart:

<LineChart
    data={{
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            data: [0, 0, 0, 0, 0, 0]
        }]
    }}
    width={Dimensions.get('window').width} // from react-native
    height={220}
    chartConfig={{
        backgroundColor: '#2c3e50',
        backgroundGradientFrom: '#2e5a80',
        backgroundGradientTo: '#2e5a85',
        color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
        style: {
            borderRadius: 16
        }
    }}
    style={{
        marginVertical: 8,
    }}
/>

After changing the data array to anything that doesn't have only zeroes (eg. [1,0,0,0,0,0]) in it, the chart renders properly. BarChart renders this exact same attributes fine. The error I'm getting:

Error while updating property 'd' in shadow node of type: RNSVGPath

null

Invalid float: "N"
updateShadowNodeProp
    ViewManagersPropertyCache.java:113
setProperty
    ViewManagerPropertyUpdater.java:154
updateProps
    ViewManagerPropertyUpdater.java:58
updateProperties
    ReactShadowNodeImpl.java:378
createView
    UIImplementation.java:289
createView
    UIManagerModule.java:366
invoke
    Method.java
invoke
    JavaMethodWrapper.java:372
invoke
    JavaModuleWrapper.java:160
run
    NativeRunnable.java
handleCallback
    Handler.java:739
dispatchMessage
    Handler.java:95
dispatchMessage
    MessageQueueThreadHandler.java:29
loop
    Looper.java:148
run
    MessageQueueThreadImpl.java:192
run
    Thread.java:818

Package versions:
react 16.3.1
react-native 0.55.4
react-native-chart-kit 0.1.5
react-native-svg 5.5.1
paths-js 0.4.7

Tested on both emulated && physical Android 7.0

Any help would be appreciated.

in line graph it is not cleared for user to know the exact value.
so can you make it possible to show value with label when user click on any dot?

If my data is array
labels = ["Today", "Last Day"]
data = [164, 0]

The chart only show "Today" highest number at "123" not "164"

my project created by react-native, can use it?

Heya,

Just looked into the code of this awesome charting library and found a bug which could be fixed very easily:

In src/abstract-chart.js we have the renderHorizontalLabels function which gets the decimalPlaces property, but is not used :( It is hardcoded in the code to 2;

<Text
          key={Math.random()}
          x={paddingRight - yLabelsOffset}
          textAnchor="end"
          y={(height * 3 / 4) - ((height - paddingTop) / count * i) + 12}
          fontSize={12}
          fill={this.props.chartConfig.color(0.5)}
        >{count === 1 ? data[0].toFixed(2) : ((this.calcScaler(data) / (count - 1)) * i + Math.min(...data)).toFixed(2)}
        </Text>

To allow us to change the decimalPlaces we need this piece of code: (change 2 to the variable)

<Text
          key={Math.random()}
          x={paddingRight - yLabelsOffset}
          textAnchor="end"
          y={(height * 3 / 4) - ((height - paddingTop) / count * i) + 12}
          fontSize={12}
          fill={this.props.chartConfig.color(0.5)}
        >{count === 1 ? data[0].toFixed(decimalPlaces) : ((this.calcScaler(data) / (count - 1)) * i + Math.min(...data)).toFixed(decimalPlaces)}
        </Text>

@Hermanya I have a PR for this issue: #60

Tried to register two views with the same name RNSVGPath
register
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:14108:4
createReactNativeComponentClass
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:14674:18
default
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\react-native-chart-kit\node_modules\react-native-svg\lib\createReactNativeComponentClass.js:5:38

D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\react-native-chart-kit\node_modules\react-native-svg\elements\Path.js:34:50
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:148:36
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20

D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\react-native-chart-kit\node_modules\react-native-svg\elements\Rect.js:2
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:148:36
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20

D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\react-native-chart-kit\node_modules\react-native-svg\index.js:1
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:148:36
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20

D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\react-native-chart-kit\src\abstract-chart.js:3
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:148:36
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20

D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\react-native-chart-kit\index.js:1
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:148:36
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20

D:\Works\Todoc\Desarrollo\Apps\todoc\src\screens\StatisticsScreen.js:5
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:148:36
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20

D:\Works\Todoc\Desarrollo\Apps\todoc\src\screens\TabsScreen.js:12
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:148:36
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20

D:\Works\Todoc\Desarrollo\Apps\todoc\App.js:10
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:148:36
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20

D:\Works\Todoc\Desarrollo\Apps\todoc\index.js:2
loadModuleImplementation
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:214:12
guardedLoadModule
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:141:45
_require
D:\Works\Todoc\Desarrollo\Apps\todoc\node_modules\metro\src\lib\polyfills\require.js:132:20
global code

{
"name": "todoc",
"version": "4.0.0",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"moment": "^2.22.2",
"react": "^16.4.0",
"react-native": "^0.55.4",
"react-native-animatable": "^1.3.0",
"react-native-calendars": "^1.19.3",
"react-native-chart-kit": "^0.2.0",
"react-native-datepicker": "^1.7.2",
"react-native-device-info": "^0.21.5",
"react-native-elements": "^0.19.1",
"react-native-event-listeners": "^1.0.3",
"react-native-floating-action": "^1.10.1",
"react-native-keyboard-aware-scroll-view": "^0.5.0",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-material-bottom-navigation": "^1.0.0",
"react-native-modal": "^6.1.0",
"react-native-modal-selector": "0.0.27",
"react-native-modest-checkbox": "^3.0.0",
"react-native-phone-call": "^1.0.6",
"react-native-popup-menu": "^0.13.1",
"react-native-scrollable-tab-view": "^0.8.0",
"react-native-signalr": "^1.0.6",
"react-native-sms-android": "^0.4.1",
"react-native-svg": "^6.3.1",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^2.3.0",
"realm": "^2.8.2",
"victory-native": "^0.18.0"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.0-alpha.1"
},
"jest": {
"preset": "react-native"
}
}

Is it possible to have multiple lines in line graph, i mean if i provide data for each line

If you're trying to plot any substantial amount of data, you can't show labels because it will overload the graph.

All, I am trying to center my graph by setting the marginLeft and marginRight to 10. However, marginRight is not working for some reason, marginLeft works but not marginRight. Any suggestions?

<ProgressChart data={data} width={screenWidth} height={150} chartConfig={{ backgroundGradientFrom: '#505050', backgroundGradientTo: '#707070', color: (opacity = 1) =>rgba(255, 255, 255, ${opacity}), style: { borderRadius: 16, } }} bezier style={{ borderRadius: 16, marginRight: 10, marginLeft: 10 }} />
const data = [0.4, 0.6, 0.8]

Is it possible customize fonts on labels? fontFamily, fontSize etc