half-pie-chart

[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]

half-pie-chart

Simply use Half Doughnut Chart to compare two element ratio


Explore the docs »




View Demo
·
Report Bug
·
Request Feature

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:

``bash
$ npm i half-pie-chart
`

Using yarn:

`bash
$ yarn add half-pie-chart
`


(back to top)

---

Usage

#### sample - 01

`js
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 (
name="rentStatus"
right={this.state.right}
left={this.state.left}
title="Rent Status"
/>
);
}
}
export default App;
`

#### sample - 02 (Dark Mode)

`js
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 (
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)

`js
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 (
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.

(back to top)

CallArrays

This array have value and visible text of pie chart

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

(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)

[contributors-shield]: https://img.shields.io/github/contributors/kbram/half-pie-chart.svg?style=for-the-badge
[contributors-url]: https://github.com/kbram/half-pie-chart/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/kbram/half-pie-chart.svg?style=for-the-badge
[forks-url]: https://github.com/kbram/half-pie-chart/network/members
[stars-shield]: https://img.shields.io/github/stars/kbram/half-pie-chart.svg?style=for-the-badge
[stars-url]: https://github.com/kbram/half-pie-chart/stargazers
[issues-shield]: https://img.shields.io/github/issues/kbram/half-pie-chart.svg?style=for-the-badge
[issues-url]: https://github.com/kbram/half-pie-chart/issues
[license-shield]: https://img.shields.io/github/license/kbram/half-pie-chart.svg?style=for-the-badge
[license-url]: https://github.com/kbram/half-pie-chart/blob/master/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/bavaram