vue-css-donut-chart

Lightweight Vue component for drawing pure CSS donut charts

Live demo can be found on the project page – https://dumptyd.github.io/vue-css-donut-chart/legacy/

Playground – https://jsfiddle.net/dumptyd/ujvypcd3/

◾ No external dependencies.

◾ Vue 2 and Vue 3 support.

◾ Small size footprint.

◾ High test coverage.

◾ Performs automatic font size recalculation as the size of the donut changes.

◾ Supports responsive donut and pie charts.

• Installation and component registration
• Usage
  • Basic usage
  • Usage with all the available props
  • Using the component as a pie chart
• API
  • Props
  • Events
  • Slots
• Contributing
• License

yarn add vue-css-donut-chart@legacy

OR

npm install vue-css-donut-chart@legacy

◾ ES6

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

Vue.use(Donut);

<link rel="stylesheet" href="https://unpkg.com/vue-css-donut-chart@1/dist/vcdonut.css">
<script src="https://unpkg.com/vue-css-donut-chart@1"></script>
<script>
  Vue.use(vcdonut.default);
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@1/dist/vcdonut.css">
<script src="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@1/dist/vcdonut.umd.min.js"></script>
<script>
  Vue.use(vcdonut.default);
</script>

With sane defaults in place, basic usage is as simple as passing a sections array with objects containing a value property. This will create a donut with 2 sections that take up 25% each.

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

<template>
  <vc-donut
    background="white" foreground="grey"
    :size="200" unit="px" :thickness="30"
    has-legend legend-placement="top"
    :sections="sections" :total="100"
    :start-angle="0" :auto-adjust-text-size="true"
    @section-click="handleSectionClick">
    <h1>75%</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' }
        ]
      };
    },
    methods: {
      handleSectionClick(section, event) {
        console.log(`${section.label} clicked.`);
      }
    }
  };
</script>

For brevity, only the section-click event is demonstrated in the above example. You can use all the other section-* events the same way.

Making the component look like a pie chart is as simple as setting the thickness to 100.

<template>
  <vc-donut
    :sections="[{ value: 35 }, { value: 15 }, { value: 15 }, { value: 35 }]"
    :thickness="100">
  </vc-donut>
</template>

Note: setting thickness to 100 will completely hide the diagram's text or slot content. The content will still be present in the DOM, however it won't be visible for obvious reasons.

All the section-* listeners are called with the section object on which the event occurred and the native Event object as arguments respectively. Consider adding a custom property (eg: name) to the section objects to uniquely identify them.

Issues – https://github.com/dumptyd/vue-css-donut-chart/issues

Code released under MIT license.