# aesthetic-charts

> React charts library created on top of react-chartjs-2 and chartjs for beautiful aesthetic charts

Latest version **1.2.7** (published 2021-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install aesthetic-charts
pnpm add aesthetic-charts
yarn add aesthetic-charts
bun add aesthetic-charts
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.7 |
| Published | 2021-01-21 |
| First published | 2020-10-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 106.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | rasha08 |
| Maintainers | rasha08 |

## Links

- npm: https://www.npmjs.com/package/aesthetic-charts
- Repository: https://github.com/rasha08/aesthetic-charts
- Homepage: https://github.com/rasha08/aesthetic-charts#readme
- Issues: https://github.com/rasha08/aesthetic-charts/issues
- npm.io page: https://npm.io/package/aesthetic-charts

## Dependencies (2)

- [chart.js](https://npm.io/package/chart.js.md) ^2.9.3
- [react-chartjs-2](https://npm.io/package/react-chartjs-2.md) ^2.10.0

## Recent versions

- 1.2.7 (latest) — 2021-01-21
- 1.2.6 — 2020-12-09
- 1.2.5 — 2020-12-07
- 1.2.4 — 2020-12-05
- 1.2.3 — 2020-11-03
- 1.2.2 — 2020-10-31
- 1.2.1 — 2020-10-31
- 1.2.0 — 2020-10-27
- 1.1.15 — 2020-10-27
- 1.1.13 — 2020-10-27
- 1.1.12 — 2020-10-27
- 1.1.11 — 2020-10-27
- 1.1.10 — 2020-10-27
- 1.1.9 — 2020-10-27
- 1.1.8 — 2020-10-27
- … 51 more at https://npm.io/package/aesthetic-charts/versions

## README

# aesthetic-charts

> React charts library created on top of react-chartjs-2 and chartjs for beautiful aesthetic charts

[![NPM](https://img.shields.io/npm/v/aesthetic-charts.svg)](https://www.npmjs.com/package/aesthetic-charts) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save aesthetic-charts
```

```bash
yarn add aesthetic-charts
```

## Charts

### DoughnutChart

```tsx
type DoughnutChartProps = {
  chartColors?: ChartRGBColor[],
  chartOptions?: DoughnutChartOptions,
  dataset: number[],
  labels: string[],
  highlightLevel?: number,
  selectedIndex?: number[]
}
export type ChartRGBColor = [number, number, number]

export type DoughnutChartOptions = {
  cutoutPercentage: number,
  responsive: boolean,
  legend: {
    position: 'left' | 'top' | 'right' | 'bottom',
    labels: {
      usePointStyle: boolean,
      fontSize: number,
      padding: number
    }
  }
}

```


## Usage

```tsx
import React, { useState } from 'react'

import { DoughnutChart } from 'aesthetic-charts'

const data = [50, 100, 75]
const labels = ['Mobile', 'Tablet', 'Desktop']

const App = () => {
  const [selectedIndex, setSelectedIndex] = useState<number[]>([])


  return <>
    <label>Select Device</label>
    <select value={selectedIndex[0]} onChange={({ target: { value } }) => setSelectedIndex(+value < 3 ? [+value] : [])}>
      {
        [
          'Mobile',
          'Tablet',
          'Desktop',
          'All'
        ].map((v, i) => <option value={i} key={i}>{v}</option>)
      }
    </select>
    <DoughnutChart dataset={data} labels={labels} selectedIndex={selectedIndex} />
  </>
}

export default App

```

## License

MIT © [rasha08](https://github.com/rasha08)

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