In this tutorial I am going to share simple Vue component for drawing pure CSS donut charts. This Vue component help you to display your plain data into graphical donut charts.
Features:
- Pure CSS. Vue is only used for calculations.
- No external dependencies
- ~3KB min+gzipped JS and ~0.4KB min+gzipped CSS
Install via npm
npm install vue-css-donut-chart |
Import and use vue-css-donut-chart
import Donut from 'vue-css-donut-chart'; import 'vue-css-donut-chart/dist/vcdonut.css'; Vue.use(Donut); |
In-browser (using unpkg.com’s CDN)
<link href="https://unpkg.com/vue-css-donut-chart/dist/vcdonut.css"> <script src="https://unpkg.com/vue-css-donut-chart">script> <script> Vue.use(vcdonut.default); script> |
Basic usage
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.
<template> <vc-donut :sections="sections">50%vc-donut> template> <script> export default { data() { return { sections: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }] }; } }; script> |
Usage with all the available props
<template> <vc-donut background="white" foreground="grey" :size="200" unit="px" :thickness="30" hasLegend legendPlacement="top" :sections="sections" :total="100" > <h1>100%h1> vc-donut> template> <script> export default { data() { return { sections: [ { label: 'Red section' value: 25, color: 'red' }, { label: 'Green section' value: 25, color: 'green' }, { label: 'Blue section' value: 25, color: 'blue' } ] }; } }; script> |
See live demo and download source code.
This awesome plugin is developed by dumptyd. Visit their official github repository for more information and follow for future updates.