Donut Chart For Vue.js Created Using Pure CSS Only


Category: Vue.js Vue.js Charts | July 5, 2021
Author:dumptyd
Official Page:Go to website
Last Update:July 5, 2021
License:MIT

vuejs donut chart

Description:

Create beautiful Donut chart for Vue.js created using pure CSS. Its light-weight component which requires no external dependencies, performs automatic font size adjustments based on chart size changes.

How to use it?

Step1: Install the component using NPM or Yarn.

# YARN
yarn add vue-css-donut-chart

#NPM
npm install vue-css-donut-chart

Step2: Import the donut chart component.

import Donut from 'vue-css-donut-chart';
import 'vue-css-donut-chart/dist/vcdonut.css';

Vue.use(Donut);

Step3: Basic usages.

<template>
  <vc-donut :sections="sections">Basic donut</vc-donut>
</template>
<script>
  export default {
    data() {
      return {
        sections: [{ value: 25 }, { value: 25 }]
      };
    }
  };
</script>