dumptyd / Vue Css Donut Chart

vue-css-donut-chart

Lightweight Vue component for drawing pure CSS donut charts

Live demo

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

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

Features

◾️ No external dependencies.

◾️ Small size footprint.

◾️ High test coverage.

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

◾️ Supports responsive donut and pie charts.

Table of Contents

• 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

Installation

Install via yarn or npm

yarn add vue-css-donut-chart

OR

npm install vue-css-donut-chart

Registering vue-css-donut-chart

◾️ ES6

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

Vue.use(Donut);

◾️ In-browser using CDNs

Using unpkg

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vcdonut.css">
<script src="https://unpkg.com/[email protected]"></script>
<script>
  Vue.use(vcdonut.default);
</script>

Using jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vcdonut.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vcdonut.umd.min.js"></script>
<script>
  Vue.use(vcdonut.default);
</script>

Usage

Basic usage

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>

Usage with all the available props

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

Using the component as a pie chart

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.

API

Props

Events

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.

Slots

Contributing

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

License

Code released under MIT license.