{"id":19522540,"url":"https://github.com/lintangwisesa/reactnative_chartkit","last_synced_at":"2025-04-26T09:32:13.272Z","repository":{"id":48550556,"uuid":"214385425","full_name":"LintangWisesa/ReactNative_ChartKit","owner":"LintangWisesa","description":"📉📊📈 Data visualization using React Native \u0026 Chart Kit","archived":false,"fork":false,"pushed_at":"2023-01-04T22:31:03.000Z","size":1290,"stargazers_count":10,"open_issues_count":5,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T10:37:29.885Z","etag":null,"topics":["android","chart-kit","data-visualization","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-chart-kit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LintangWisesa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-11T08:35:18.000Z","updated_at":"2023-08-25T02:30:55.000Z","dependencies_parsed_at":"2023-02-02T22:17:21.591Z","dependency_job_id":null,"html_url":"https://github.com/LintangWisesa/ReactNative_ChartKit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FReactNative_ChartKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FReactNative_ChartKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FReactNative_ChartKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FReactNative_ChartKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LintangWisesa","download_url":"https://codeload.github.com/LintangWisesa/ReactNative_ChartKit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967286,"owners_count":21515569,"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":["android","chart-kit","data-visualization","react-native"],"created_at":"2024-11-11T00:39:30.699Z","updated_at":"2025-04-26T09:32:12.029Z","avatar_url":"https://github.com/LintangWisesa.png","language":"JavaScript","readme":"![simplinnovation](https://4.bp.blogspot.com/-f7YxPyqHAzY/WJ6VnkvE0SI/AAAAAAAADTQ/0tDQPTrVrtMAFT-q-1-3ktUQT5Il9FGdQCLcB/s350/simpLINnovation1a.png)\n\n# Data Visualization using React Native Chart Kit\n\n1. Create a React Native project (I'm using the latest __*RN 0.61.2*__ and __*Genymotion*__ as Android emulator), then install __*react-native-chart-kit*__ and __*react-native-svg*__ package.\n\n    ```bash\n    $ npm i react-native-chart-kit react-native-svg\n    ```\n\n    Then import it, so you can use it to create several charts on your React Native application.\n\n    ```javascript\n    import {\n        LineChart,\n        BarChart,\n        PieChart,\n        ProgressChart,\n        ContributionGraph,\n        StackedBarChart\n    } from \"react-native-chart-kit\";\n    ```\n\n#\n\n2. Create a __Line Chart__\n\n    ![LineChart](./screenshot1.png)\n\n    ```javascript\n    \u003cLineChart\n        data={{\n        labels: [\"Januari\", \"Februari\", \"Maret\", \"April\", \"Mei\", \"Juni\"],\n        datasets: [\n            {\n            data: [\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100\n            ]\n            }\n        ]\n        }}\n        width={Dimensions.get(\"window\").width - 50} // from react-native\n        height={220}\n        yAxisLabel={\"Rp\"}\n        chartConfig={{\n        backgroundColor: \"red\",\n        backgroundGradientFrom: \"red\",\n        backgroundGradientTo: \"red\",\n        decimalPlaces: 2, // optional, defaults to 2dp\n        color: (opacity = 1) =\u003e `white`,\n        labelColor: (opacity = 1) =\u003e `white`,\n        style: {\n            borderRadius: 16\n        }\n        }}\n        style={{\n        marginVertical: 8,\n        borderRadius: 16\n        }}\n    /\u003e\n    ```\n\n#\n\n3. Create a __Bezier Line Chart__\n\n    ![BezierLineChart](./screenshot2.png)\n\n    ```javascript\n    \u003cLineChart\n        data={{\n        labels: [\"Januari\", \"Februari\", \"Maret\", \"April\", \"Mei\", \"Juni\"],\n        datasets: [\n            {\n            data: [\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100\n            ]\n            }\n        ]\n        }}\n        width={Dimensions.get(\"window\").width - 50} // from react-native\n        height={220}\n        yAxisLabel={\"Rp\"}\n        chartConfig={{\n        backgroundColor: \"#e26a00\",\n        backgroundGradientFrom: \"#fb8c00\",\n        backgroundGradientTo: \"#ffa726\",\n        decimalPlaces: 2, // optional, defaults to 2dp\n        color: (opacity = 1) =\u003e `white`,\n        labelColor: (opacity = 1) =\u003e `white`,\n        style: {\n            borderRadius: 16\n        }\n        }}\n        bezier\n        style={{\n        marginVertical: 8,\n        borderRadius: 16\n        }}\n    /\u003e\n    ```\n\n#\n\n4. Create a __Bar Chart__\n\n    ![BarChart](./screenshot3.png)\n\n    ```javascript\n    \u003cBarChart\n        data={{\n        labels: [\"Januari\", \"Februari\", \"Maret\", \"April\", \"Mei\", \"Juni\"],\n        datasets: [\n            {\n            data: [\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100,\n                Math.random() * 100\n            ]\n            }\n        ]\n        }}\n        width={Dimensions.get(\"window\").width - 50} // from react-native\n        height={220}\n        yAxisLabel={\"Rp\"}\n        chartConfig={{\n        backgroundColor: \"yellow\",\n        backgroundGradientFrom: \"yellow\",\n        backgroundGradientTo: \"yellow\",\n        decimalPlaces: 2, // optional, defaults to 2dp\n        color: (opacity = 1) =\u003e `black`,\n        labelColor: (opacity = 1) =\u003e `black`,\n        barPercentage:1,\n        style: {\n            borderRadius: 16\n        }\n        }}\n        style={{\n        marginVertical: 8,\n        borderRadius: 16\n        }}\n    /\u003e\n    ```\n\n#\n\n5. Create a __Stacked Bar Chart__\n\n    ![StackBarChart](./screenshot4.png)\n\n    ```javascript\n    \u003cStackedBarChart\n        data={{\n            labels: [\"Test1\", \"Test2\"],\n            legend: [\"L1\", \"L2\", \"L3\"],\n            data: [[60, 60, 60], [30, 30, 60]],\n            barColors: [\"#dfe4ea\", \"#ced6e0\", \"#a4b0be\"]\n        }}\n        width={Dimensions.get(\"window\").width - 50} // from react-native\n        height={220}\n        yAxisLabel={\"Rp\"}\n        chartConfig={{\n        backgroundColor: \"green\",\n        backgroundGradientFrom: \"green\",\n        backgroundGradientTo: \"green\",\n        decimalPlaces: 2, // optional, defaults to 2dp\n        color: (opacity = 1) =\u003e `white`,\n        labelColor: (opacity = 1) =\u003e `white`,\n        style: {\n            borderRadius: 16\n        }\n        }}\n        style={{\n        marginVertical: 8,\n        borderRadius: 16\n        }}\n    /\u003e\n    ```\n\n#\n\n6. Create a __Pie Chart__\n\n    ![PieChart](./screenshot5.png)\n\n    ```javascript\n    \u003cPieChart\n        data={\n            [\n            {\n                name: \"Jawa Barat\",\n                population: 48.0,\n                color: \"rgba(131, 167, 234, 1)\",\n                legendFontColor: \"white\",\n                legendFontSize: 11\n            },\n            {\n                name: \"Jawa Timur\",\n                population: 39.2,\n                color: \"red\",\n                legendFontColor: \"white\",\n                legendFontSize: 11\n            },\n            {\n                name: \"Jawa Tengah\",\n                population: 34.2,\n                color: \"yellow\",\n                legendFontColor: \"white\",\n                legendFontSize: 11\n            },\n            {\n                name: \"Sumatera Utara\",\n                population: 14.2,\n                color: \"orange\",\n                legendFontColor: \"white\",\n                legendFontSize: 11\n            },\n            {\n                name: \"Banten\",\n                population: 12.4,\n                color: \"green\",\n                legendFontColor: \"white\",\n                legendFontSize: 11\n            }\n            ]\n        }\n        width={Dimensions.get(\"window\").width - 50} // from react-native\n        height={220}\n        chartConfig={{\n            color: (opacity = 1) =\u003e `white`,\n            labelColor: (opacity = 1) =\u003e `white`,\n            style: {\n                borderRadius: 16\n            }\n        }}\n        backgroundColor=\"blue\"\n        accessor=\"population\"\n        paddingLeft=\"15\"\n        absolute\n        style={{\n            marginVertical: 8,\n            borderRadius: 16\n        }}\n    /\u003e\n    ```\n\n#\n\n7. Create a __Progress Chart__\n\n    ![PieChart](./screenshot6.png)\n\n    ```javascript\n    \u003cProgressChart\n        data={\n            {\n            labels: [\"Andi\", \"Budi\", \"Caca\"],\n            data: [0.3, 0.6, 0.9]\n            }\n        }\n        width={Dimensions.get(\"window\").width - 50} // from react-native\n        height={220}\n        chartConfig={\n            {\n            backgroundGradientFrom: 'purple',\n            backgroundGradientFromOpacity: 1,\n            backgroundGradientTo: 'purple',\n            backgroundGradientToOpacity: 0.5,\n            color: (opacity = 1) =\u003e `rgba(26, 255, 146, ${opacity})`,\n            strokeWidth: 2, // optional, default 3\n            }\n        }\n        backgroundColor=\"green\"\n        paddingLeft=\"15\"\n        absolute\n        style={{\n            marginVertical: 8,\n            borderRadius: 16\n        }}\n    /\u003e\n    ```\n\n#\n\n8. Create a __Contribution Graph__\n\n    ![PieChart](./screenshot7.png)\n\n    ```javascript\n    \u003cContributionGraph\n        values={\n            [\n            { date: \"2017-01-02\", count: 1 },\n            { date: \"2017-01-03\", count: 2 },\n            { date: \"2017-01-04\", count: 3 },\n            { date: \"2017-01-05\", count: 4 },\n            { date: \"2017-01-06\", count: 5 },\n            { date: \"2017-01-30\", count: 2 },\n            { date: \"2017-01-31\", count: 3 },\n            { date: \"2017-03-01\", count: 2 },\n            { date: \"2017-04-02\", count: 4 },\n            { date: \"2017-03-05\", count: 2 },\n            { date: \"2017-02-30\", count: 4 }\n            ]\n        }\n        endDate={new Date('2017-04-01')}\n        numDays={105}\n        width={Dimensions.get(\"window\").width - 50} // from react-native\n        height={220}\n        chartConfig={\n            {\n            backgroundGradientFrom: 'pink',\n            backgroundGradientFromOpacity: 0.5,\n            backgroundGradientTo: 'red',\n            backgroundGradientToOpacity: 0.5,\n            color: (opacity = 1) =\u003e `rgba(255, 0, 0, ${opacity})`,\n            strokeWidth: 2, // optional, default 3\n            }\n        }\n        paddingLeft=\"15\"\n        style={{\n            marginVertical: 8,\n            borderRadius: 16\n        }}\n    /\u003e\n    ```\n\n#\n\n#### Lintang Wisesa :love_letter: _lintangwisesa@ymail.com_\n\n[Facebook](https://www.facebook.com/lintangbagus) | \n[Twitter](https://twitter.com/Lintang_Wisesa) |\n[Google+](https://plus.google.com/u/0/+LintangWisesa1) |\n[Youtube](https://www.youtube.com/user/lintangbagus) | \n:octocat: [GitHub](https://github.com/LintangWisesa) |\n[Hackster](https://www.hackster.io/lintangwisesa)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flintangwisesa%2Freactnative_chartkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flintangwisesa%2Freactnative_chartkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flintangwisesa%2Freactnative_chartkit/lists"}