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');
neckHeight and neckWidth properties can be used to customize the neck of the funnel. Some other commonly used customization options are showInLegend, exploded, etc.