# vue-easy-pie-chart

> easy-pie-chart with all power of Vue2

Latest version **1.0.3** (published 2016-12-31) · 0 weekly downloads

## Install

```sh
npm install vue-easy-pie-chart
pnpm add vue-easy-pie-chart
yarn add vue-easy-pie-chart
bun add vue-easy-pie-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.0.3 |
| Published | 2016-12-31 |
| First published | 2016-12-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Ray |
| Maintainers | ray-liang |
| Keywords | library, vue, vuejs, easy-pie-chart |

## Links

- npm: https://www.npmjs.com/package/vue-easy-pie-chart
- Repository: https://github.com/DotNetAge/vue-easy-pie-chart
- Homepage: https://github.com/DotNetAge/vue-easy-pie-chart#readme
- Issues: https://github.com/DotNetAge/vue-easy-pie-chart
- npm.io page: https://npm.io/package/vue-easy-pie-chart

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.1.0
- [jquery](https://npm.io/package/jquery.md) ^3.1.1

## 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.0.3 (latest) — 2016-12-31
- 1.0.2 — 2016-12-31
- 1.0.1 — 2016-12-31
- 1.0.0 — 2016-12-31

## README

# vue-easy-pie-chart

easy-pie-chart with all power of Vue2.

## Install

```
$ npm i vue-easy-pie-chart -D
```

## Using in Vue

```html
<template>
  <div>
     <vue-easy-pie-chart :percent="30"></vue-easy-pie-chart>
  </div>
</template>
<script>
  import VueEasyPieChart from 'vue-easy-pie-chart'
  import 'vue-easy-pie-chart/dist/vue-easy-pie-chart.css'
  
  export default {
      components:{ VueEasyPieChart }
  }
</script>
```


## Custom the inner text

```html
<vue-easy-pie-chart :percent="30">
  <i class="fa-icon fa-icon-email"></i>
</vue-easy-pie-chart>
```


## Run the playground

Clone this repository to your local and run the following command to start the playground 

```
$ npm run dev
```
  
  
![Playground](playground.png)

## Properties

Properites (Type) | Default | Description
------------------|---------|------------
`bar-color`| `#ef1e25` | The color of the curcular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color.
`font-size` | `20px`| Set the font size of the inner text
`track-color` | `#f2f2f2` | The color of the track for the bar, false to disable rendering.
`scale-color` | `#dfe0e0` | The color of the scale lines, false to disable rendering.
`line-cap` | `round` | Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
`line-width` | `3` | Width of the bar line in px.
`size`| `110` | Size of the pie chart in px. It will always be a square.
`animate`|`false`|Time in milliseconds for a eased animation of the bar growing, or false to deactivate.

## Events

Event | Description
------|------------
`@start`| Callback function that is called at the start of any animation (only if animate is not false).
`@stop`| Callback function that is called at the end of any animation (only if animate is not false).
`@step`| Callback function that is called during animations providing the current value (the context is the plugin, so you can access the DOM element via this.$el).

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