# react-animate-radar-chart

> react animate radar chart

Latest version **1.1.0** (published 2020-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-animate-radar-chart
pnpm add react-animate-radar-chart
yarn add react-animate-radar-chart
bun add react-animate-radar-chart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-05-04 |
| First published | 2020-05-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 27.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ChenKS12138 |
| Maintainers | chenks |
| Keywords | radart-chart, animate, react |

## Links

- npm: https://www.npmjs.com/package/react-animate-radar-chart
- npm.io page: https://npm.io/package/react-animate-radar-chart

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-05-04
- 1.0.6 — 2020-05-04
- 1.0.5 — 2020-05-04
- 1.0.4 — 2020-05-04
- 1.0.3 — 2020-05-04
- 1.0.2 — 2020-05-04
- 1.0.1 — 2020-05-04
- 1.0.0 — 2020-05-04

## README

## React Radar Chart

![Build](https://github.com/ChenKS12138/react-radar-chart/workflows/Build/badge.svg)
[![npm version](https://badge.fury.io/js/react-animate-radar-chart.svg)](https://badge.fury.io/js/react-animate-radar-chart)

### How To Install

![preview](https://raw.githubusercontent.com/ChenKS12138/react-animate-radar-chart/master/assets/preview.png)

See [Preview](https://chenks12138.github.io/react-animate-radar-chart/)

```bash
npm install react-animate-radar-chart
```

### How To Use

```javascript
const data = [
  {
    name: "生活",
    value: 0.5,
  },
  {
    name: "娱乐",
    value: 0.4,
  },
  {
    name: "工作",
    value: 0.8,
  },
  {
    name: "学习",
    value: 0.7,
  },
  {
    name: "其他",
    value: 0.2,
  },
];

const colors = {
  lineColor: "rgb(255,255,255)",
  innerColor: "rgba(109,200,236,0.45)",
  outerColor: "transparent",
  fontColor: "rgb(255,255,255)",
  borderColor: "rgb(109,200,236)",
};

function App() {
  const [showData, setShowData] = useState(false);
  return (
    <div id="app">
      <div className="container">
        <RadarChart
          data={data}
          showData={showData}
          size={480}
          colors={colors}
        />
        <div>
          <button className="btn" onClick={() => setShowData(true)}>
            animate
          </button>
        </div>
      </div>
    </div>
  );
}
```

---
_Source: https://npm.io/package/react-animate-radar-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._