Vue.js Pie Chart with Index / Data Labels

Download Vue.js Chart Samples

Example shows Vuejs pie chart with index / data labels for each datapoint.

/* App.vue */
<script>

  export default {
    data() {
      return {
        options: {
          theme: "light2",
          animationEnabled: true,
          title:{
            text: "Visitors By Channel"
          },
          data: [{
            type: "pie",
            indexLabel: "{label} (#percent%)",
            yValueFormatString: "#,##0",
            toolTipContent: "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
            dataPoints: [
              { label: "Organic Traffic", y: 130631 },
              { label: "Direct", y: 28874 },
              { label: "Referral", y: 15467 },
              { label: "Social", y: 10543 },
              { label: "Email", y: 5613 },
              { label: "Others", y: 8492 }
            ]
          }]
        },
        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 font-family, font size and font color of indexlabels using indexLabelFontFamily, indexLabelFontSize and indexLabelFontColor properties respectively.

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