Vue Charts - Funnel Chart

The DevExtreme JavaScript Funnel Chart visualizes a value at different stages. It helps assess value changes throughout these stages and identify potential issues. In this demo, the Funnel shows the percentage of website users that performed a certain action: downloaded a trial, contacted support, purchased a subscription, etc. The chart shows that most users decided not to subscribe after contacting support. You can use this information to make a decision, for example, to provide extra training for the support team.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

​x
 
<template>
  <DxFunnel    id="funnel"    :data-source="dataSource"    palette="Soft Pastel"    argument-field="argument"    value-field="value"  >    <DxTitle text="Website Conversions">      <DxMargin :bottom="30"/>    </DxTitle>    <DxExport :enabled="true"/>    <DxTooltip      :enabled="true"      format="fixedPoint"    />    <DxItem>      <DxBorder :visible="true"/>    </DxItem>    <DxLabel      :visible="true"      :customize-text="formatLabel"      position="inside"      background-color="none"    />  </DxFunnel></template>​<script setup lang="ts">import DxFunnel, {  DxTitle,  DxMargin,  DxExport,  DxTooltip,  DxItem,  DxBorder,  DxLabel,} from 'devextreme-vue/funnel';import { dataSource } from './data.ts';​const formatLabel = ({ percentText, item: { argument } }) => `<span class="label">${percentText}</span><br/>${argument}`;</script>​<style>#funnel {  height: 440px;}​#funnel .label {  font-size: 28px;}</style>​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'plugin-babel',  meta: {    '*.vue': {      loader: 'vue-loader',    },    '*.ts': {      loader: 'demo-ts-loader',    },    '*.svg': {      loader: 'svg-loader',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'project:': '',    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  map: {    'vue': 'npm:vue@3.4.27/dist/vue.esm-browser.js',    '@vue/shared': 'npm:@vue/shared@3.4.27/dist/shared.cjs.prod.js',    'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',    'demo-ts-loader': 'project:utils/demo-ts-loader.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'svg-loader': 'project:utils/svg-loader.js',    'mitt': 'npm:mitt/dist/mitt.umd.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.5/cjs',    'devextreme-vue': 'npm:devextreme-vue@24.2.5/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',    'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme-vue': {      main: 'index.js',    },    'devextreme': {      defaultExtension: 'js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,  },};System.config(window.config);​

xxxxxxxxxx
 
export const dataSource = [
  { argument: 'Visited the Website', value: 9152 },  { argument: 'Downloaded a Trial', value: 6879 },  { argument: 'Contacted Support', value: 5121 },  { argument: 'Subscribed', value: 2224 },  { argument: 'Renewed', value: 1670 },];​

xxxxxxxxxx
 
import { createApp } from 'vue';
import App from './App.vue';​createApp(App).mount('#app');​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"> </div>    </div>  </body></html>​

NOTE

Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos