indiespirit/react-native-chart-kit-example

Expo app with charts from react-native-chart-kit

react-native-chart-kit-example's Issues

Invariant Violation: requireNtiveComponent: "RNSVGRect" was not found in the UIManager

I ran 2 cmd lines:
yarn add react-native-chart-kit
yarn add react-native-svg prop-types
then show me an error

I tried to run this
react-native link react-native-svg
then show me another error

info Starting JS server...
info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)...
Starting a Gradle Daemon, 1 incompatible and 1 stopped Daemons could not be reused, use --status for details

Configure project :react-native-audio
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html

Task :react-native-svg:compileDebugJavaWithJavac
G:\Works\Phuong\MES.SCAN\node_modules\react-native-svg\android\src\main\java\com\horcrux\svg\SvgView.java:24: error: cannot find symbol
import androidx.annotation.NonNull;
^
symbol: class NonNull
location: package androidx.annotation
G:\Works\Phuong\MES.SCAN\node_modules\react-native-svg\android\src\main\java\com\horcrux\svg\ForeignObjectView.java:17: error: cannot find symbol
import androidx.annotation.NonNull;
^
symbol: class NonNull
location: package androidx.annotation
G:\Works\Phuong\MES.SCAN\node_modules\react-native-svg\android\src\main\java\com\horcrux\svg\SvgView.java:113: error: cannot find symbol
public void onDescendantInvalidated(@nonnull View child, @nonnull View target) {
^
symbol: class NonNull
location: class SvgView
G:\Works\Phuong\MES.SCAN\node_modules\react-native-svg\android\src\main\java\com\horcrux\svg\SvgView.java:113: error: cannot find symbol
public void onDescendantInvalidated(@nonnull View child, @nonnull View target) {
^
symbol: class NonNull
location: class SvgView
G:\Works\Phuong\MES.SCAN\node_modules\react-native-svg\android\src\main\java\com\horcrux\svg\ForeignObjectView.java:47: error: cannot find symbol
public void onDescendantInvalidated(@nonnull View child, @nonnull View target) {
^
symbol: class NonNull
location: class ForeignObjectView
G:\Works\Phuong\MES.SCAN\node_modules\react-native-svg\android\src\main\java\com\horcrux\svg\ForeignObjectView.java:47: error: cannot find symbol
public void onDescendantInvalidated(@nonnull View child, @nonnull View target) {
^
symbol: class NonNull
location: class ForeignObjectView
6 errors

Task :react-native-svg:compileDebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-svg:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 54s
118 actionable tasks: 11 executed, 107 up-to-date
error Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
error Command failed: gradlew.bat app:installDebug. Run CLI with --verbose flag for more details.

Example project doesn't run: error: unknown option `--assetPlugins'

After cloning, running yarn install and then yarn start --ios I get the following message:

Am I missing something @Hermanya?

Thanks

Multiple values in same date addition

Hi,
This is my data set to plot

{

"labels":[
"18-03-2023",
"18-03-2023",
"03-05-2023",
"29-05-2023",
"30-05-2023",
"07-06-2023",
"09-06-2023",
"09-06-2023",
"09-06-2023",
"09-06-2023",
"04-07-2023",
"04-07-2023",
"04-07-2023",
"04-07-2023"
],
"datasets":[
{
"data":[
75,
89,
80,
110,
120,
90,
94,
90,
90,
90,
60,
80,
90,
75
]
}
]
}
and this is my Line Chart code.

              <LineChart
                                  data={{
                                    labels: plotData.labels,
                                    datasets: plotData.datasets,
                                  }}
                                  width={screenWidth * 0.82}
                                  height={screenHeight / 2.5}
                                  verticalLabelRotation="30"
                                  yAxisInterval={1} 
                                  chartConfig={{
                                    propsForBackgroundLines: {
                                      strokeDasharray: '',
                                    },
                                    propsForLabels: {
                                      fontFamily: 'Poppins-Regular',
                                    },
                                    backgroundColor: '#fff',
                                    backgroundGradientFrom: '#fff',
                                    backgroundGradientTo: '#fff',

                                    decimalPlaces: 0, 
                                    color: (opacity = 1) =>
                                      `rgba(0, 0, 0, ${opacity})`,
                                    labelColor: (opacity = 1) =>
                                      `rgba(0, 0, 0, ${opacity})`,
                                    style: {
                                    },
                                    propsForDots: {
                                      r: '6',
                                      strokeWidth: '2',
                                      color: colors.appPrimary,
                                      backgroundColor: colors.appPrimary,
                                      stroke: colors.appPrimary,
                                      strokeColor: colors.appPrimary,
                                    },
                                  }}
                                />

In the above dataset there are multiple values for dates "18-03-2023","09-06-2023" and "04-07-2023". But instead of showing values 75 and 89 on single line on date "18-03-2023", they are shown differently as below.

I tried different data format by adding data for same data as array. but it failed

how to set custom width of the bar

Error While Updating 'fill' of a view managed by:RNSVGGroup null java.lang.Double cannpt be cast to java.lang.String

this error occur when i display Pie Chart React native

Group bar chart

How can we create group bar chart with this?

The Y axis displays the random data..not the data that I am passing to it....

Hey,

In the BarChart graph, the Y-axis displays the random data from the data that is given to it.
Can it be made the same data as it was passed to it?
For Example- the is data=[10,20,30,40], so the Y axis should also display 10,20,30,40 in the graph not the random values generated from the given data

Thank you in advance

Example does not work

Repro:

1. Clone repo
2. Execute npm install && npm start --reset-cache
3. Open App in iOS Simulator or iPhone
4. See following screen

Terminal Output:

Example Error

Error One, I updated the sdk to 32.0.0 then i get the next error

C:\GitHub\react-native-chart-kit-example-master>expo start
Starting project at C:\GitHub\react-native-chart-kit-example-master
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Your project is in SDK version >= 33.0.0, but the expo package version seems to be older.
Error: Using unversioned Expo SDK. Do not publish until you set sdkVersion in app.json
C:\GitHub\react-native-chart-kit-example-master\node_modules\metro-config\src\defaults\blacklist.js:38
  return new RegExp(
         ^

SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
    at new RegExp (<anonymous>)
    at blacklist (C:\GitHub\react-native-chart-kit-example-master\node_modules\metro-config\src\defaults\blacklist.js:38:10)
    at getBlacklistRE (C:\GitHub\react-native-chart-kit-example-master\node_modules\react-native\local-cli\util\Config.js:56:8)
    at Object.<anonymous> (C:\GitHub\react-native-chart-kit-example-master\node_modules\react-native\local-cli\util\Config.js:71:13)
    at Module._compile (internal/modules/cjs/loader.js:1075:30)
    at Module._compile (C:\GitHub\react-native-chart-kit-example-master\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1096:10)
    at Object.newLoader [as .js] (C:\GitHub\react-native-chart-kit-example-master\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Function.Module._load (internal/modules/cjs/loader.js:781:14)

Metro Bundler process exited with code 1
Error: Metro Bundler process exited with code 1
    at ChildProcess.<anonymous> (C:\@expo\[email protected]\src\Project.ts:1861:16)
    at Object.onceWrapper (events.js:421:26)
    at ChildProcess.emit (events.js:314:20)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)

Error Two:

C:\GitHub\react-native-chart-kit-example-master>expo start
Starting project at C:\GitHub\react-native-chart-kit-example-master
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Your project is in SDK version >= 33.0.0, but the expo package version seems to be older.
Error: Using unversioned Expo SDK. Do not publish until you set sdkVersion in app.json
C:\GitHub\react-native-chart-kit-example-master\node_modules\metro-config\src\defaults\blacklist.js:38
  return new RegExp(
         ^

SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
    at new RegExp (<anonymous>)
    at blacklist (C:\GitHub\react-native-chart-kit-example-master\node_modules\metro-config\src\defaults\blacklist.js:38:10)
    at getBlacklistRE (C:\GitHub\react-native-chart-kit-example-master\node_modules\react-native\local-cli\util\Config.js:56:8)
    at Object.<anonymous> (C:\GitHub\react-native-chart-kit-example-master\node_modules\react-native\local-cli\util\Config.js:71:13)
    at Module._compile (internal/modules/cjs/loader.js:1075:30)
    at Module._compile (C:\GitHub\react-native-chart-kit-example-master\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1096:10)
    at Object.newLoader [as .js] (C:\GitHub\react-native-chart-kit-example-master\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Function.Module._load (internal/modules/cjs/loader.js:781:14)

Metro Bundler process exited with code 1
Error: Metro Bundler process exited with code 1
    at ChildProcess.<anonymous> (C:\@expo\[email protected]\src\Project.ts:1861:16)
    at Object.onceWrapper (events.js:421:26)
    at ChildProcess.emit (events.js:314:20)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
`C:\GitHub\react-native-chart-kit-example-master>expo start
Starting project at C:\GitHub\react-native-chart-kit-example-master
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
C:\GitHub\react-native-chart-kit-example-master\node_modules\metro-config\src\defaults\blacklist.js:38
  return new RegExp(
         ^

SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
    at new RegExp (<anonymous>)
    at blacklist (C:\GitHub\react-native-chart-kit-example-master\node_modules\metro-config\src\defaults\blacklist.js:38:10)
    at getBlacklistRE (C:\GitHub\react-native-chart-kit-example-master\node_modules\react-native\local-cli\util\Config.js:56:8)
    at Object.<anonymous> (C:\GitHub\react-native-chart-kit-example-master\node_modules\react-native\local-cli\util\Config.js:71:13)
    at Module._compile (internal/modules/cjs/loader.js:1075:30)
    at Module._compile (C:\GitHub\react-native-chart-kit-example-master\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1096:10)
    at Object.newLoader [as .js] (C:\GitHub\react-native-chart-kit-example-master\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Function.Module._load (internal/modules/cjs/loader.js:781:14)

Metro Bundler process exited with code 1
Error: Metro Bundler process exited with code 1
    at ChildProcess.<anonymous> (C:\@expo\[email protected]\src\Project.ts:1861:16)
    at Object.onceWrapper (events.js:421:26)
    at ChildProcess.emit (events.js:314:20)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
`

How to enable userinteraction?

I have successfully integrated a chart with chart-kit. But how can I enable zoom and pan gesture?

Radar chart

can you add radar chart?

What is the minimal support for iOS and Android?

Hi @Hermanya ,
I am working on React Native App project where I have to display interactive bar chart. As shown in attracted screenshot. App is working on both iOS and Android devices. Where we are currently providing minimal iOS and Android app support as following:

1. Android 4.3.x / Jelly Bean / API level 18 
2. iOS 9.0 or later
3. iPadOS 9.0 or later.

Requirement:

In bar chart, every bar will be clickable. When user click on any bar, the relative information will be display below the chart accordingly.

Query

So please let me know

1. What will be the minimal support of your library on both operating system (iOS & Android)?
2. Is your bar chart providing click event to achieve our requirement?

Current dependencies

Currently project is running with following React framework versions:

1. React Native : 0.63.4
2. React : 16.13.1

Ios/Android | Does this npm support for both the platforms?

I want to use Linehart and Piechart for my app which has to support android mobile, tablet and Ios mobile. Is this npm supports for all platforms?

IOS: viewpager android has been removed from react native

On iOS devices I get this error: "viewpager android has been removed from react native"

How to add horizontal scroll in chart if chart got more data ?

Is there a way to combine Bar Charts and Line Charts?

Is there a way to combine Bar Charts and Line Charts? Using the same or opposite Y-axis.