🍩 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