half-pie-chart

Simply use Half Doughnut Chart to compare two element ratio
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About Project
2. Features
3. Framework support
4. Built With
5. Get Started
   • Installation
6. Usages
7. Options
8. CallArrays
9. Browser Support
10. License

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.

(back to top)

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

(back to top)

framework support

• React JS (no dependencies)

(back to top)

Built With

• React.js
• JavaScript
• css

(back to top)

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

(back to top)

---

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;

(back to top)

---

Options

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

Property (Type)	Default	Type	Description
name	null	string	The name is must be compulsory attribute. If you not put this multiple component can't use in same time. this is for identification of our component
right	null	Json Array	The name is must be compulsory attribute. This array sample is given above sample.
left	null	Json Array	The name is must be compulsory attribute. This array sample is given above sample.
dark	false	boolean	This is boolean attribute , It's true value is decided dark mode or not.
title	null	string	This is for displaying title of component
fontStyle	Montserrat, sans-serif	string	You can change whole component font style here
centerText	null	string	If you define this only comes center text part. If not define not comes.
centerPostText	null	string	This string is postfix of center text part
cardBackColor	Dark:rgb(32, 32, 32) Light:rgb(245, 245, 245)	string	This is for background color of the component
cardTextColor	Dark:#343a40 Light:#e9e9e9	string	This is for text color of the component

(back to top)

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",
    }]

Property (Type)	Default	Type	Description
value	0	int	This is compulsory attribute. This is for calculating value.
displayValue	null	int	This is compulsory attribute. This is just displaying value.
text	null	int	This is compulsory attribute. This is displaying text.
color	null	int	This is changed color of the pie bar, you can customize any of the color.

(back to top)

Browser Support

Native support

• Chrome
• Safari
• FireFox

(back to top)

License

MIT

Developed by Karunaaharan Bavaram

(back to top)

Copyright

Copyright (c) 2022 Karunaaharan Bavaram, contributors. Released under the MIT, GPL licenses

(back to top)