# react-human-chart > A simple human chart built with typescript and create-react-app Latest version **1.3.0** (published 2021-12-07) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install react-human-chart pnpm add react-human-chart yarn add react-human-chart bun add react-human-chart ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.3.0 | | Published | 2021-12-07 | | First published | 2021-12-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 12 | | Unpacked size | 9.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 6 | | Author | Karim Hamdy Abd El Aziz | | Maintainers | kizofcb | | Keywords | human-chart, humanChart, human, chart, react-human-chart, human-chart-js | ## Links - npm: https://www.npmjs.com/package/react-human-chart - Repository: https://github.com/KizoFCB/react-human-chart - Issues: https://github.com/KizoFCB/react-human-chart/issues - npm.io page: https://npm.io/package/react-human-chart ## Dependencies (12) - [react](https://npm.io/package/react.md) ^17.0.2 - [react-dom](https://npm.io/package/react-dom.md) ^17.0.2 - [typescript](https://npm.io/package/typescript.md) ^4.1.2 - [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1 - [@types/jest](https://npm.io/package/@types/jest.md) ^26.0.15 - [@types/node](https://npm.io/package/@types/node.md) ^12.0.0 - [@types/react](https://npm.io/package/@types/react.md) ^17.0.0 - [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.0 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 1.3.0 (latest) — 2021-12-07 - 1.2.0 — 2021-12-07 - 1.1.0 — 2021-12-06 - 1.0.0 — 2021-12-06 ## README # React Human Chart > A simple human chart made with create-react-app that displays percentages of input data. ## Table of Contents - [General Info](#general-information) - [Technologies Used](#technologies-used) - [Screenshots](#screenshots) - [Setup](#setup) - [Usage](#usage) - [Room for Improvement](#room-for-improvement) - [Acknowledgements](#acknowledgements) - [Contact](#contact) ## General Information - The HumanChart component receives an input dataset and a dataKey to calculate the percentages of these data on the human chart ## Technologies Used - Typescript - version 4.1.2 - React - version 17.0.2 ## Screenshots ![Example screenshot](./public/human-chart.png) ## Setup Install the library using `npm i react-human-chart` ## Usage 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. | ` ` ## Room for Improvement - Multiple new animations - Allowing for custom styles - Responsive chart ## Acknowledgements Give credit here. - This project was based on [this article](https://css-tricks.com/clipping-masking-css/). ## Contact Created by [kizofcb](mailto:kizofcb@gmail.com) - feel free to contact me! --- _Source: https://npm.io/package/react-human-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._