Lightweight Vue component for drawing pure CSS donut charts

by Posted on

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)

<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.

DEMO | DOWNLOAD

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


Published by admin