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


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 add vue-css-donut-chart

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';


Step3: Basic usages.

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