https://github.com/mazipan/vue-doughnut-chart

🍩 Doughnut chart component for Vue.js, originally created by Greg Willson
https://github.com/mazipan/vue-doughnut-chart

hacktoberfest vue-chart vue-doughnut-chart vue-gauge-chart

Last synced: 24 days ago
JSON representation

🍩 Doughnut chart component for Vue.js, originally created by Greg Willson

• Host: GitHub
• URL: https://github.com/mazipan/vue-doughnut-chart
• Owner: mazipan
• License: mit
• Created: 2018-11-06T04:31:56.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-06-15T16:47:38.000Z (over 3 years ago)
• Last Synced: 2024-04-24T08:29:43.640Z (6 months ago)
• Topics: hacktoberfest, vue-chart, vue-doughnut-chart, vue-gauge-chart
• Language: Vue
• Homepage: https://mazipan.github.io/vue-doughnut-chart/
• Size: 5.79 MB
• Stars: 29
• Watchers: 2
• Forks: 6
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🍩 Vue Doughnut Chart

> Doughnut chart component for Vue.js, originally created by Greg Willson in [codepen](https://codepen.io/biomassives/pen/yaZwQw)

[![version](https://img.shields.io/npm/v/vue-doughnut-chart.svg)](https://www.npmjs.com/package/vue-doughnut-chart) ![minified](https://badgen.net/bundlephobia/minzip/vue-doughnut-chart) [![downloads](https://img.shields.io/npm/dt/vue-doughnut-chart.svg)](https://www.npmjs.com/package/vue-doughnut-chart) [![Travis](https://img.shields.io/travis/mazipan/vue-doughnut-chart.svg)](https://travis-ci.org/mazipan/vue-doughnut-chart) [![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=mazipan/vue-doughnut-chart)](https://dependabot.com)

## Demo

[https://mazipan.github.io/vue-doughnut-chart](https://mazipan.github.io/vue-doughnut-chart)

## Install

```shell

yarn add vue-doughnut-chart

# OR

npm i vue-doughnut-chart

```

## Use in components

```js

import DoughnutChart from 'vue-doughnut-chart'

export default {

  components: {

    DoughnutChart

  }

}

```

## Props

| Props Name            | Type      | Default Value |Description                                  | 

|-----------------------|-----------|---------------|---------------------------------------------|

| `percent`             | Number    |  0            |                                             |

| `foregroundColor`     | String    |  '#1993ff'    |                                             |

| `backgroundColor`     | String    |  '#ecf6ff'    |                                             |

| `strokeWidth`         | Number    |  10           |                                             |

| `radius`              | Number    |  85           |                                             |

| `width`               | Number    |  200          |                                             |

| `height`              | Number    |  200          |                                             |

| `classValue`          | String    |  ''           |                                             |

| `visibleValue`        | Boolean   |  false        |                                             |

| `valueCountUp`        | Boolean   |  false        |                                             |

| `valueCountUpDuration`| Number    |  2000         | Number in milliseconds                      |

| `valueCountUpDelay`   | Number    |  500          | Percent count-up delay (for changing values)|

| `customPercentSize`   | Number    |  40           | Percent font size in pixels (max 60)        |

| `passTextAsHtml`      | Boolean   |  false        | Allows to add simple html into label        |

| `customText`          | String    |  ''           | Label value                                 |

| `customTextColor`     | String    |  '#1993ff'    | Valid HEX color code or CSS color for label |

| `customTextSize`      | Number    |  15           | Label font size in pixels (max 22)          |

-----

Bringing to NPM Registry by Irfan Maulana © 2018