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

• React.js
• JavaScript
• css

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

Browser Support

Native support

• Chrome
• Safari
• FireFox

License

MIT

Developed by Karunaaharan Bavaram

Copyright

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