Vue Funnel Chart

The Kendo UI for Vue Funnel Chart illustrates the progression of data across various stages within a process. It visualizes the incremental or decremental advancement of a single data series, shaping a segmented funnel structure. Each segment of the funnel corresponds to a distinct value within your dataset, signifying a stage of the process and represented by a unique color. The Vue Funnel chart serves as an ideal tool for monitoring business metrics such as sales opportunities within a sales funnel or tracking leads throughout the customer journey.

See the Vue Funnel Chart demo

Tailor the configuration of the Vue Funnel Chart by specifying the neck-to-top ratio. By default, the neck ratio is established at 0.3, indicating that the base's width is 30% of the width at the top. Utilize the chart's ratio equalizer feature to modify this ratio, allowing you to shape the funnel according to your application's requirements. You can also flip the funnel upside down, transforming it into a pyramid shape if needed.

See the Vue Funnel Chart shape demo

You can choose to have a freeform representation of the funnel shape by enabling the dynamic slope and height of the Vue Funnel Chart. That will render each segment of the funnel is a size relative to the value it represents.

See the Vue Funnel Chart dynamic slope and height demo

You can populate the Vue Funnel Chart series with data from various source types, including numbers, arrays and objects (or models)—simply specify the fields you want to use during configuration.

See the Vue Funnel Chart data binding demo

The Vue Funnel Chart showcases data in both Canvas (bitmap) and SVG (vector graphics) formats. SVG serves as the default format to ensure consistently sharp data presentations. For situations prioritizing performance, you can seamlessly switch to the canvas format via a single configuration option, ensuring your chart handles large datasets and real-time updates without interruptions.

See the Vue Funnel Chart rendering demo

Export your Vue Funnel Chart to various formats such as PDF, SVG, PNG, and the Kendo UI drawing format. In scenarios requiring adjustments to image size or fitting the chart to a specific paper size when exporting to PDF, the component's intuitive export method preserves the quality and rendering of the Chart in the output file.

See the Vue Funnel Chart export demo

Customize the series colors of the Kendo UI for Vue Funnel Chart component using one of our predefined color sets, including Default (our own styling), Material (based on Material Design guidelines), Bootstrap (resembling Bootstrap styling), and Fluent (based on Microsoft Fluent UI). You can further personalize any of the built-in themes or create a new theme to match your brand's identity using Progress ThemeBuilder.

See the Vue Funnel Chart appearance demo

The Kendo UI for Vue Funnel Chart provides support for globalization and localization to ensure the component effectively serves applications in various languages and locales. You can also enable right-to-left (RTL) rendering for languages with scripts read from right to left.

See the Vue Funnel Chart globalization demo