Half-pie-chart NPM

About Project

This UI kit is simply represent ratio of two values with the pie chart. It's fully worked on react Js. In this graph is customizable, you can change color, text, font-style,back color. You can get percentage of ratio in center part.

Features

Highly customizable
Very easy to implement
Resolution independent
Uses css for smooth animations on riced time
Works in all modern browsers, Chrome, FireFox, Safari
Simply compare ratio
No need other front-end css stuff
Dark, light modes available and text back colors are editable

framework support

React JS (no dependencies)

Built With

Get started

Installation

This is a Node.js module available through the npm registry.

Before installing, download and install Node.js. Node.js 0.10 or higher is required.

Installation is done using the npm install command:

Using npm:

$ npm i half-pie-chart

Using yarn:

$ yarn add half-pie-chart

Usage

sample - 01

import { HalfPieChart } from "half-pie-chart";
import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      right: [
        {
          value: 20,
          displayValue: "20 $",
          text: "Collected",
          color: "#4cb38e",
        },
      ],
      left: [
        {
          value: 10,
          displayValue: "10 $",
          text: "Pending",
          color: "#eee36b",
        },
      ],
    };
  }
  render() {
    return (
      <HalfPieChart
        name="rentStatus"
        right={this.state.right}
        left={this.state.left}
        title="Rent Status"
      />
    );
  }
}
export default App;

sample - 02 (Dark Mode)

import { HalfPieChart } from "half-pie-chart";
import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      right: [
        {
          value: 3000,
          displayValue: "3000 $",
          text: "Achieved",
          color: "#4cb38e",
        },
      ],
      left: [
        {
          value: 10500,
          displayValue: "10500 $",
          text: "Pending",
          color: "#eee36b",
        },
      ],
    };
  }
  render() {
    return (
      <HalfPieChart
        name="rentStatus2"
        right={this.state.right}
        left={this.state.left}
        dark={true}
        title="Monthly Achievement"
      />
    );
  }
}
export default App;

sample - 03 (change bar color and add center text)

import { HalfPieChart } from "half-pie-chart";
import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      right: [
        {
          value: 3000,
          displayValue: "3000 /=",
          text: "Achieved",
          color: "#f19bea",
        },
      ],
      left: [
        {
           value: 10500,
          displayValue: "10500 /=",
          text: "Pending",
          color: "#67d4ff",
        },
      ],
    };
  }
  render() {
    return (
      <HalfPieChart
        name="rentStatus4"
        right={this.state.right}
        left={this.state.left}
        dark={true}
        title="Rent Status"
        fontStyle="Montserrat"
        centerText={"Target"}
        centerPostText={" /="}
      />
    );
  }
}
export default App;

Options

You can pass these options to the initialize function to set a custom look and feel for the plugin.

CallArrays

This array have value and visible text of pie chart

right: [
    {
      value: 3000,
      displayValue: "3000 $",
      text: "Achieved",
      color: "#4cb38e",
    }],
left: [{
          value: 10500,
          displayValue: "10500 $",
          text: "Pending",
          color: "#eee36b",
    }]