https://github.com/lintangwisesa/reactnative_chartkit

📉📊📈 Data visualization using React Native & Chart Kit
https://github.com/lintangwisesa/reactnative_chartkit

android chart-kit data-visualization react-native

Last synced: 6 months ago
JSON representation

📉📊📈 Data visualization using React Native & Chart Kit

• Host: GitHub
• URL: https://github.com/lintangwisesa/reactnative_chartkit
• Owner: LintangWisesa
• Created: 2019-10-11T08:35:18.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T22:31:03.000Z (almost 3 years ago)
• Last Synced: 2025-04-04T10:37:29.885Z (7 months ago)
• Topics: android, chart-kit, data-visualization, react-native
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-native-chart-kit
• Size: 1.23 MB
• Stars: 10
• Watchers: 3
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![simplinnovation](https://4.bp.blogspot.com/-f7YxPyqHAzY/WJ6VnkvE0SI/AAAAAAAADTQ/0tDQPTrVrtMAFT-q-1-3ktUQT5Il9FGdQCLcB/s350/simpLINnovation1a.png)

# Data Visualization using React Native Chart Kit

1. 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.

    ```bash

    $ npm i react-native-chart-kit react-native-svg

    ```

    Then import it, so you can use it to create several charts on your React Native application.

    ```javascript

    import {

        LineChart,

        BarChart,

        PieChart,

        ProgressChart,

        ContributionGraph,

        StackedBarChart

    } from "react-native-chart-kit";

    ```

#

2. Create a __Line Chart__

    ![LineChart](./screenshot1.png)

    ```javascript

     `white`,

        labelColor: (opacity = 1) => `white`,

        style: {

            borderRadius: 16

        }

        }}

        style={{

        marginVertical: 8,

        borderRadius: 16

        }}

    />

    ```

#

3. Create a __Bezier Line Chart__

    ![BezierLineChart](./screenshot2.png)

    ```javascript

     `white`,

        labelColor: (opacity = 1) => `white`,

        style: {

            borderRadius: 16

        }

        }}

        bezier

        style={{

        marginVertical: 8,

        borderRadius: 16

        }}

    />

    ```

#

4. Create a __Bar Chart__

    ![BarChart](./screenshot3.png)

    ```javascript

     `black`,

        labelColor: (opacity = 1) => `black`,

        barPercentage:1,

        style: {

            borderRadius: 16

        }

        }}

        style={{

        marginVertical: 8,

        borderRadius: 16

        }}

    />

    ```

#

5. Create a __Stacked Bar Chart__

    ![StackBarChart](./screenshot4.png)

    ```javascript

     `white`,

        labelColor: (opacity = 1) => `white`,

        style: {

            borderRadius: 16

        }

        }}

        style={{

        marginVertical: 8,

        borderRadius: 16

        }}

    />

    ```

#

6. Create a __Pie Chart__

    ![PieChart](./screenshot5.png)

    ```javascript

     `white`,

            labelColor: (opacity = 1) => `white`,

            style: {

                borderRadius: 16

            }

        }}

        backgroundColor="blue"

        accessor="population"

        paddingLeft="15"

        absolute

        style={{

            marginVertical: 8,

            borderRadius: 16

        }}

    />

    ```

#

7. Create a __Progress Chart__

    ![PieChart](./screenshot6.png)

    ```javascript

     `rgba(26, 255, 146, ${opacity})`,

            strokeWidth: 2, // optional, default 3

            }

        }

        backgroundColor="green"

        paddingLeft="15"

        absolute

        style={{

            marginVertical: 8,

            borderRadius: 16

        }}

    />

    ```

#

8. Create a __Contribution Graph__

    ![PieChart](./screenshot7.png)

    ```javascript

     `rgba(255, 0, 0, ${opacity})`,

            strokeWidth: 2, // optional, default 3

            }

        }

        paddingLeft="15"

        style={{

            marginVertical: 8,

            borderRadius: 16

        }}

    />

    ```

#

#### Lintang Wisesa :love_letter: _lintangwisesa@ymail.com_

[Facebook](https://www.facebook.com/lintangbagus) | 

[Twitter](https://twitter.com/Lintang_Wisesa) |

[Google+](https://plus.google.com/u/0/+LintangWisesa1) |

[Youtube](https://www.youtube.com/user/lintangbagus) | 

:octocat: [GitHub](https://github.com/LintangWisesa) |

[Hackster](https://www.hackster.io/lintangwisesa)