🍩 Vue Doughnut Chart

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

Demo

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

Install

yarn add vue-doughnut-chart
# OR
npm i vue-doughnut-chart

Use in components

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