vue-css-donut-chart playground

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

by Christian Bonato

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 v-bind="props">
    <small>
      <strong>vue-css-donut-chart</strong>
      <br>
      playground
    </small>
  </vc-donut>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap');

body {
  font-family: 'Roboto Slab';
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
strong { font-weight: bold; }

JavaScript

Vue.use(vcdonut.default);

new Vue({
  el: '#app',
  data() {
    return {
      props: {
        size: 250,
        sections: [
        	{ value: 35 },
          { value: 15 },
          { value: 15 },
          { value: 35 }
        ],
        thickness: 20, // set this to 100 to render it as a pie chart instead
        hasLegend: true,
        // specify more props here
      }
    };
  },
  
  methods: {
  	updateData(){
    
    }
  }
});