react-circular-progress-sections
v1.0.6
Published
Circular Section wise progresses graph
Downloads
15
Readme
react-circular-progress-sections
.
This library is an extended version of React Circular Progressbar. Since there are no graph packages out there that can provide such an awesome graph. Not even the library mentioned above.
Installation
npm i react-circular-progress-sections
Usage
Wrap the Component inside a div
and provide it with a width
Set the data
as array of objects,
Each object having
name
,total
i.e. total value,completed
i.e. completed out oftotal
,color
i.e. color of that object,innerText
i.e. jsx of the data inside the Ring
import CircularProgressRing from "react-circular-progress-sections";
const [data, setData] = useState([
{ name: "Water", total: 200, completed: 150, color: "#4892FF" },
{ name: "Rent", total: 300, completed: 200, color: "#EB1B52" },
{ name: "Wifi + Cable", total: 400, completed: 400, color: "#68C600" },
{ name: "Gas + Electric", total: 500, completed: 410, color: "#FFD609" },
{ name: "Other", total: 100, completed: 70, color: "#8B572A" },
]);
const [trailColor, setTrailColor] = useState("#fff");
const [background, setBackground] = useState("#22C880");
return (
<div style={{ width: 800 }}>
<CircularProgressRing
data={data}
trailColor={trailColor}
background={background}
/>
</div>
);
Inner Text
For including the text inside the Circular Ring, add innerText
key value pair in the data
object
The value of key innerText
can be jsx
as well
License
ISC
Free Software, Hell Yeah!