Vue.js Doughnut / Donut Chart

Download Vue.js Chart Samples

Example shows Vuejs doughnut / donut chart with indexlabels & custom colors.

/* App.vue */
<script>

  export default {
    data() {
      return {
        options: {
          theme: "light2",
          animationEnabled: true,
          title: {
            text: "World Silicon Production"
          },
          subtitles: [{
            text: "in tonnes"
          }],
          data: [{
            type: "doughnut",
            startAngle: 90,
            indexLabel: "{label} {y}(#percent%)",
            yValueFormatString: "#,##0K",
            toolTipContent: "<span style='\"'color: {color};'\"'>{label}</span>, {y} tonnes",
            dataPoints: [
              { label: "China", y: 4500, color: "#DE2910" },
              { label: "Russia", y: 600, color: "#0039A6" },
              { label: "India", y: 370, color: "#F79432" },
              { label: "United States Of America", y: 320, color: "#37366B" },
              { label: "Brazil", y: 210, color: "#F5D900" },
              { label: "Malaysia", y: 150, color: "#F7C600" },
              { label: "Others", y: 876, color: "#7a7677" }
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    }
  }
</script>
<template>
  <CanvasJSChart :options="options" :styles="styleOptions"/>
</template>                              
/*main.js*/
import { createApp } from 'vue'
import App from './App.vue'

import CanvasJSChart from '@canvasjs/vue-charts';

const app = createApp(App);
app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
app.mount('#app');

Chart Customizations

You can customize the outer and inner radius of the doughnut chart using radius and innerRadius properties. Some other commonly used customization options include color, indexLabel, startAngle, etc.

Note   For step by step instructions, follow our Vuejs Integration Tutorial