Lightweight Vue component for drawing pure CSS donut charts

by

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

Vue-component-donut-charts


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)

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.




Usage with all the available props

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by dumptyd. Visit their official github repository for more information and follow for future updates.


Published by Rohit