Git Product home page Git Product logo

react-native-chart-kit-chz's Introduction

React Native Chart Kit Chz

Developed By Chzapps India

More Charts are adding soon!

Any Changes? Here

Installation

yarn add react-native-svg
yarn add react-native-chart-kit-chz

charts

Line Chart

H1DTRfI.md.png H1DT5lt.md.png

import {LineChart} from "react-native-chart-kit-chz"
<LineChart
  data={{
    labels: ["Jan", "Feb", "Mar", "April", "June", "July", "Aug"], // Bottom Labels
    datasets: [
      {
        data: [10.47, 25.6, 11.4, 19.5, 8.9, 30.9, 55.9], // Data for Chart 
        amount: [5093995050, 283893, 382389, 80909, 48908, 893022, 2839090], //Amount show on the ToolTip
        color: "#000531", // Chart Line Color
        currency: "USD", //Currency to show before amount , 
        id: 1, //ID
      },
      //You can add another set here with different data
    ],
  }}
  onPointPress={(d: any) => {
    console.log("chart_Data", d);
  }}
  selectedDotColor="#000"
  width={Dimensions.get("window").width}
  height={200}
  chartConfig={{
    decimalPlaces: 1,
    color: `#000531`,
    // fontFamily: "",
  }}
  bezier //Command this for stright line chart
  style={{
    marginVertical: 30,
  }}
/>;

Donut Chart

H1DAOox.png H1DAeMQ.png

Note : Label need to be created from your end Example

import {PieChart} from "react-native-chart-kit-chz"
  const chartData = [
    {
      key: 1,
      value: 100,
      svg: {fill: '#000'},
      arc: {cornerRadius: 0},
      label: 'Cplex',
    },
    {
      key: 2,
      value: 178,
      svg: {fill: '#902'},
      arc: {cornerRadius: 0},
      label: 'Jsum',
    },
  ];

   <PieChart
     style={{width: 320, height: 320}}
     items={chartData}
     innerRadius={50}
     outerRadius={65}
     padAngle={0}}
     />

Pie Chart

8.png

Note : Label need to be created from your end Example

import {PieChart} from "react-native-chart-kit-chz"
  const chartData = [
    {
      key: 1,
      value: 100,
      svg: {fill: '#000'},
      arc: {cornerRadius: 0},
      label: 'Cplex',
    },
    {
      key: 2,
      value: 178,
      svg: {fill: '#902'},
      arc: {cornerRadius: 0},
      label: 'Jsum',
    },
  ];

   <PieChart
     style={{width: 320, height: 320}}
     items={chartData}
     innerRadius={0}
     outerRadius={65}
     padAngle={0}}
     />

Funnel Chart

H1DAOox.png H1DAeMQ.png

import {FunnelChart} from "react-native-chart-kit-chz"
  const demo_data = [
  {
    label: 'Unique Website Visits',
    value: '13589',
    color: '#9b46ff40',
  },
  {
    label: 'Programme Details Section Visits',
    value: '8855',
    color: '#9b46ff80',
  },
  {
    label: 'Attempts to Register',
    value: '8453',
    color: '#9b46ff60',
  },
  {
    label: 'Successful Registrations',
    value: '10586',
    color: '#9b46ff',
  },
];


 <FunnelChart
          animated
          data={demo_data}
          backgroundColor={'#000'}
          height={200}
          lineColor={'#fff'}
          space={3}
          fontSize={12}
          textColor={'#fff'}
        />

react-native-chart-kit-chz's People

Contributors

eledahl avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.