Vue.js Funnel Chart with Index / Data Labels

Download Vue.js Chart Samples

Example shows Vuejs funnel chart with index / data labels to show additional information about a datapoint.

/* App.vue */
<script>
  export default {
    data() {
      return {
        chart: null,
        options: {
          theme: "light2",
          animationEnabled: true,
          title: {
          text: "Sales Lifecycle"
          },
          data: [{
            type: "funnel",
            indexLabel: "{name}: {y}",
            valueRepresents: "area",
            dataPoints: [
              { y: 10000, name: "Prospect" },
              { y: 8200, name: "Qualified" },
              { y: 2500, name: "Price Quote" },
              { y: 1200, name: "Negotiation" },
              { y: 480, name: "Won" }
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    }
  }
</script>
  
<template>
    <CanvasJSChart :options="options" :style="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

indexLabel property can be used to show Index / Data Labels for the data-points. You can also enable legend for dataseries by setting showInLegend to true. Some other commonly used customization options include color, etc.

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