Gathering detailed insights and metrics for @0saw/vue-css-donut-chart
Gathering detailed insights and metrics for @0saw/vue-css-donut-chart
Gathering detailed insights and metrics for @0saw/vue-css-donut-chart
Gathering detailed insights and metrics for @0saw/vue-css-donut-chart
Lightweight Vue component for drawing pure CSS donut charts
npm install @0saw/vue-css-donut-chart
Typescript
Module System
Node Version
NPM Version
Vue (63.7%)
CSS (21.66%)
JavaScript (10.65%)
HTML (3.99%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
26 Commits
1 Watchers
2 Branches
1 Contributors
Updated on Mar 18, 2019
Latest Version
1.1.5
Package Id
@0saw/vue-css-donut-chart@1.1.5
Unpacked Size
411.48 kB
Size
146.40 kB
File Count
24
NPM Version
6.5.0
Node Version
11.9.0
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Lightweight Vue component for drawing pure CSS donut charts
Live demo can be found on the project page - https://dumptyd.github.io/vue-css-donut-chart
yarn
or npm
1yarn add vue-css-donut-chart
OR
1npm install vue-css-donut-chart
vue-css-donut-chart
1import Donut from 'vue-css-donut-chart'; 2import 'vue-css-donut-chart/dist/vcdonut.css'; 3 4Vue.use(Donut); 5
1<link href="https://unpkg.com/vue-css-donut-chart/dist/vcdonut.css"> 2<script src="https://unpkg.com/vue-css-donut-chart"></script> 3<script> 4 Vue.use(vcdonut.default); 5</script>
With sane defaults in place, basic usage is as simple as passing a sections
array of objects with a value
prop to vc-donut
component.
1<template> 2 <vc-donut :sections="sections">50%</vc-donut> 3</template> 4<script> 5 export default { 6 data() { 7 return { 8 sections: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }] 9 }; 10 } 11 }; 12</script>
1<template> 2 <vc-donut 3 background="white" foreground="grey" 4 :size="200" unit="px" :thickness="30" 5 has-legend legend-placement="top" 6 :sections="sections" :total="100" 7 > 8 <h1>100%</h1> 9 </vc-donut> 10</template> 11<script> 12 export default { 13 data() { 14 return { 15 sections: [ 16 { label: 'Red section' value: 25, color: 'red' }, 17 { label: 'Green section' value: 25, color: 'green' }, 18 { label: 'Blue section' value: 25, color: 'blue' } 19 ] 20 }; 21 } 22 }; 23</script>
size
Number
250
unit
String
px
size
. Can be any valid CSS unit. Use %
to make the donut responsive.thickness
Number
20
text
String
background
String
#ffffff
foreground
String
#eeeeee
total
Number
100
has-legend
Boolean
false
legend-placement
String
bottom
top
, right
, bottom
and left
.sections
Array
[]
value
property. Sum of all the sections' value
should not exceed total
, an error is thrown otherwise.value
- Size of the section. Should be <= total
.color
- Color of the section. vc-donut comes with 24 predefined colors, so this property is optional if you have <= 24 sections without the color
property.label
- Name of this section. This is used in the legend as well as tooltip text.If you want more control over text content of the chart, default slot can be used instead of the text
prop.
legend
Slot for plugging in your own legend.
Code released under MIT license.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/26 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
124 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More