Skip to content

mazipan/vue-doughnut-chart

Repository files navigation

🍩 Vue Doughnut Chart

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

version minified downloads Travis Dependabot Status

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