{"id":3954,"url":"https://github.com/tomauty/react-native-chart","last_synced_at":"2025-04-08T11:08:17.408Z","repository":{"id":31255187,"uuid":"34816773","full_name":"tomauty/react-native-chart","owner":"tomauty","description":"[NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app","archived":false,"fork":false,"pushed_at":"2020-04-24T14:19:20.000Z","size":623,"stargazers_count":1575,"open_issues_count":59,"forks_count":238,"subscribers_count":46,"default_branch":"master","last_synced_at":"2024-10-29T13:49:32.175Z","etag":null,"topics":["chart","javascript","react-native","svg"],"latest_commit_sha":null,"homepage":"http://tomauty.github.io/react-native-chart","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"vitorfs/bootcamp","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomauty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-29T20:31:35.000Z","updated_at":"2024-10-21T09:07:48.000Z","dependencies_parsed_at":"2022-08-07T16:15:38.206Z","dependency_job_id":null,"html_url":"https://github.com/tomauty/react-native-chart","commit_stats":null,"previous_names":["onefold/react-native-chart"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomauty%2Freact-native-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomauty%2Freact-native-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomauty%2Freact-native-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomauty%2Freact-native-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomauty","download_url":"https://codeload.github.com/tomauty/react-native-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247829491,"owners_count":21002995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","javascript","react-native","svg"],"created_at":"2024-01-05T20:16:56.433Z","updated_at":"2025-04-08T11:08:17.387Z","avatar_url":"https://github.com/tomauty.png","language":"JavaScript","readme":"# react-native-chart\n\n### NOTE: I have not been able to maintain this repo. Recommend switching to [Victory Charts](https://github.com/FormidableLabs/victory-native).\n\n![Screenshot](https://raw.githubusercontent.com/tomauty/react-native-chart/master/screenshots/README.png)\n\n## Getting Started\n[![NPM](https://nodei.co/npm/react-native-chart.png?downloads=true)](https://nodei.co/npm/react-native-chart/)\n\n1. `npm i react-native-chart --save`\n\n__Link ART to your project__\n\n1. Right click Libraries and click 'Add Files to {YourProject}'\n\n\u003cimg width=\"366\" alt=\"screen shot 2016-06-17 at 3 39 24 pm\" src=\"https://cloud.githubusercontent.com/assets/1112872/16162504/e4f284f4-34a1-11e6-9819-49f7b3ee4fd3.png\"\u003e\n\n2. Navigate to your project's node_modules/react-native/Libraries/ART and select 'ART.xcodeproj'\n\n\u003cimg width=\"435\" alt=\"screen shot 2016-06-17 at 3 39 42 pm\" src=\"https://cloud.githubusercontent.com/assets/1112872/16162506/e4f3f35c-34a1-11e6-8fa6-82b1d9162028.png\"\u003e\n\n3. Go to Build Phases -\u003e Link Binary With Libraries\n\n\u003cimg width=\"660\" alt=\"screen shot 2016-06-17 at 3 40 00 pm\" src=\"https://cloud.githubusercontent.com/assets/1112872/16162508/e4f8a6cc-34a1-11e6-91d9-2a0fcc1179ab.png\"\u003e\n\n4 Click the '+', and add libART.a\n\n\u003cimg width=\"250\" alt=\"screen shot 2016-06-17 at 3 40 03 pm\" src=\"https://cloud.githubusercontent.com/assets/1112872/16162507/e4f50238-34a1-11e6-9b4d-3f883c9f27c4.png\"\u003e\n\nThen rebuild.\n\n\n\n## Usage\n```javascript\nimport React, { StyleSheet, View, Component } from 'react-native';\nimport Chart from 'react-native-chart';\n\nconst styles = StyleSheet.create({\n\tcontainer: {\n\t\tflex: 1,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tbackgroundColor: 'white',\n\t},\n\tchart: {\n\t\twidth: 200,\n\t\theight: 200,\n\t},\n});\n\nconst data = [[\n\t[0, 1],\n\t[1, 3],\n\t[3, 7],\n\t[4, 9],\n]];\n\nclass SimpleChart extends Component {\n\trender() {\n\t\treturn (\n\t\t\t\u003cView style={styles.container}\u003e\n\t\t\t\t\u003cChart\n\t\t\t\t\tstyle={styles.chart}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tverticalGridStep={5}\n\t\t\t\t\ttype=\"line\"\n\t\t\t\t\tshowDataPoint={true}\n\t\t\t\t\tcolor={['#e1cd00']}\n\t\t\t\t /\u003e\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\n\n```\n## Properties\n\nUse '' y-values to signify the 'render but empty' data points.\n\n| Property                | Type                      | Description                                               | Required | Default               |\n| ----------------------- | ------------------------- | --------------------------------------------------------- | -------- | --------------------- |\n| data                    | Array\u003c  Array\u003c [number, number] \u003e \u003e | An array of arrays of [x, y] pairs.                                 | **Yes**  |                       |\n| type                    | string                    | pie/bar/line                                              | **Yes**  | bar                   |\n| color                   | Array \u003c string \u003e          | Color of bars/line in line chart                          | No       | #4DC4E6               |\n| cornerRadius            | number                    | Corner radius of bars in bar chart                        | No       | 0                     |\n| fillColor               | Array \u003c string \u003e          | Fill area colors in line chart                            | No       |                       |\n| dataPointColor          | Array \u003c string \u003e          | Stroke colors for line chart data point                   | No       |                       |\n| dataPointFillColor      | Array \u003c string \u003e          | Fill colors for line chart data point                     | No       |                       |\n| dataPointRadius         | number                    | Radius of the data point                                  | No       | 3                     |\n| lineWidth               | number                    | Width of line chart line                                  | No       | 1                     |\n| showDataPoint           | boolean                   | Show data points on line chart                            | No       | false                 |\n| sliceColors             | Array \u003c string \u003e          | Array of colors for pie chart slices                      | **Yes**  | [ \u003c random colors \u003e ] |\n| axisColor               | string                    | Color of axis lines                                       | No       | #333333               |\n| axisLabelColor          | string                    | Color of axis test                                        | No       | #333333               |\n| axisLineWidth           | number                    | Width of axis lines                                       | No       | 1                     |\n| gridColor               | string                    | Color of grid lines                                       | No       | #333333               |\n| gridLineWidth           | number                    | Width of grid lines                                       | No       | 0.5                   |\n| hideHorizontalGridLines | boolean                   | Hide grid lines going from LTR                            | No       | false                 |\n| hideVerticalGridLines   | boolean                   | Hide grid lines going up -\u003e down                          | No       | false                 |\n| showAxis                | boolean                   | Show the X and Y axes                                     | No       | true                  |\n| showGrid                | boolean                   | Show the grid                                             | No       | true                  |\n| showXAxisLabels         | boolean                   | Show X-Axis labels                                        | No       | true                  |\n| showYAxisLabels         | boolean                   | Show Y-Axis labels                                        | No       | true                  |\n| style                   | object                    | Style on the container                                    | No       | {}                    |\n| tightBounds             | boolean                   | Tighten min and max bounds strictly to min/max in dataset | No       | false                 |\n| verticalGridStep        | number                    | How many vertical grid lines to show                      | No       | 4                     |\n| horizontalGridStep      | number                    | How many horizontal grid lines to show                    | No       | all                      |\n| xAxisHeight             | number                    | Height of X-axis container                                | No       | 20                    |\n| yAxisTransform          | Function                  | Transform data point to y-axis label                      | No       | (_) =\u003e _              |\n| xAxisTransform          | Function                  | Transform data point to x-axis label                      | No       | (_) =\u003e _              |\n| yAxisWidth              | number                    | Width of the Y-axis container                             | No       | 30                    |\n| yAxisUseDecimal         | boolean                   | Show decimals on Y-axis labels                            | No       | false                 |\n| yAxisShortLabel         | boolean                   | Shorten yAxis labels with K, M, B for thousand\u003c-\u003ebillion, etc  | No       | false                 |\n\n## TODO\n- [ ] Code cleanup\n- [X] Multi-line chart\n- [ ] Horizontal line chart\n- [ ] Scatter chart\n\n","funding_links":[],"categories":["Components","React Native","JavaScript","组件","Libraries"],"sub_categories":["UI","Special use case libraries","图形动画"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomauty%2Freact-native-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomauty%2Freact-native-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomauty%2Freact-native-chart/lists"}