Vue.js Funnel Chart with Custom Neck

Download Vue.js Chart Samples

Example shows Vuejs funnel chart with custom neck length. When neck width & height are set to 0, it becomes an inverted pyramid chart.

/* App.vue */
<script>
  export default {
    data() {
      return {
        chart: null,
        options: {
          animationEnabled: true,
          theme: "light1",
          title:{
            text: "Software Sales Conversion"
          },
          data: [{
            type: "funnel",
            yValueFormatString: "#,###\"%\"",
            indexLabel: "{label} - {y}",
            neckHeight: 0,
            dataPoints: [
              { y: 100, label: "Website Visit" },
              { y: 68, label: "Download Page Visit" },
              { y: 49, label: "Downloaded" },
              { y: 35, label: "Interested To Buy" },
              { y: 7, label: "Purchased" }
            ]
          }]
        },
        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

neckHeight and neckWidth properties can be used to customize the neck of the funnel. Some other commonly used customization options are showInLegend, exploded, etc.

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