React-human-chart NPM

React Human Chart

A simple human chart made with create-react-app that displays percentages of input data.

The HumanChart component receives an input dataset and a dataKey to calculate the percentages of these data on the human chart

Example screenshot

Install the library using npm i react-human-chart

How to use it?

We import the library normally in our component

import { HumanChart } from "react-human-chart"

We provide the component with these props

prop	type	required	description
dataKey	string	Yes	The name of the key in the input dataset to calculate the percentages from. Its value can be a numeric string or a number.
labelKey	string	No	The name of the key in the input dataset for the value labels of each percentages. Its default value is "name".
customColors	boolean	No	A flag indicating if you want to add your custom colors to each record in the dataset. For that, you have to provide a color prop to each record in the dataset containing a hex color string. Its default value is false and random colors are generated for each portion.
data	{ key: string: string \| number }[]	Yes	The input dataset to calculate the percentages from. Its values can be numeric strings or numbers.