vue-css-donut-chart playground

https://dumptyd.github.io/vue-css-donut-chart/

by dumptyd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@1/dist/vcdonut.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@1/dist/vcdonut.css">
<div id="app">
  <vc-donut
    size="150" :thickness="30"
    :total="3 + 3 + 6"
    :sections="sections" />
</div>

CSS

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

Vue.use(vcdonut.default);

new Vue({
  el: '#app',
  data() {
    return {
      sections: [
        { value: 3 },
        { value: 3 },
        { value: 6 }
      ]
    };
  }
});