0.3.0 • Published 4 years ago
vue-doughnut-chart v0.3.0
🍩 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-chartUse 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