react-native-d3-charts

    0.0.1 • Public • Published

    react-native-d3-charts

    react-native-d3-charts is a cross platform chart library built with d3js and react-native-svg. Currently there is a line-chart, circular progress chart, and pie-chart.

    Installation

    To install the library to your react-native project run the following commands:

    npm install react-native-d3-charts --save
    react-native link react-native-svg
    

    Usage & Options

    Line Chart

    Options:

    Prop Type Default Definition
    size object {width: ,height: 320} width and height of the chart
    data array [] the data object explained below
    showLegend bool true a flag to show/hide the legend of the chart
    title string '' the title of the chart
    The structure of the data object:
    Prop Type Default Definition
    value number - the value of the data object
    startColor string - the start color of the gradient for the related data
    endColor string - the end color of the gradient for the related data
    label string - the definition/label of the data
    labelStyle object {} style object for the label
    Example:
     
    import React, {Component} from 'react';
    import {StyleSheet, ScrollView} from 'react-native';
    import PieChart from "react-native-d3-charts";
     
     
    type Props = {};
    export default class App extends Component<Props> {
      
      state={
        chartData: [
              {
                value: 61.41,
                startColor: "#7CB5EC",
                endColor: "#7CB5EC",
                label: "Chrome",
                labelStyle: {},
              },
              {
                value: 11.84,
                startColor: "#434348",
                endColor: "#434348",
                label: "Internet Explorer",
                labelStyle: {},
              },
              {
                value: 10.85,
                startColor: "#90ED7D",
                endColor: "#90ED7D",
                label: "Firefox",
                labelStyle: {},
              },
              {
                value: 4.67,
                startColor: "#F7A25D",
                endColor: "#F7A25D",
                label: "Edge",
                labelStyle: {},
              },
              {
                value: 4.18,
                startColor: "#8085E9",
                endColor: "#8085E9",
                label: "Safari",
                labelStyle: {},
              },
              {
                value: 7.05,
                startColor: "#F15C80",
                endColor: "#F15C80",
                label: "Other",
                labelStyle: {},
              }
        ]
      }
      
      render() {
        return (
          <ScrollView contentContainerStyle={styles.container}>
            <PieChart 
              size={{height: 300, width: 300}} 
              data={this.state.chartData} 
              title="Browser market shares in January, 2018" />
          </ScrollView>
        );
      }
    }
     
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        paddingTop: 50
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
     

    For running the example application

    To run the example application (from a cloned repo):

    cd example
    npm i
    react-native link react-native-svg
    react-native run-ios
    # or
    react-native run-android
    

    Todo

    The next steps:

    • Add animations to the charts
    • More axis controls (to control scale)
    • Events
    • Improve the documentation
    • Bug fixing, unit testing, cleanup

    Install

    npm i react-native-d3-charts

    DownloadsWeekly Downloads

    16

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    46.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • semirturgay