React Funnel Chart

  • Showcase a decline or growth trend within your data using the KendoReact Chart.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Funnel Chart Header
  • Create Dynamic Data Visualizations with the KendoReact Funnel Chart

    The KendoReact Funnel Chart component visually represents the data flow through the various process stages. It shows an increasing or decreasing progression of a single data series, shaping a segmented funnel structure, where each segment corresponds to a unique value in your dataset and a stage of the process, represented by a specific color. The React Funnel chart is ideal for tracking different business metrics, such as sales opportunities or leads along the customer journey. 

    See the React Funnel Chart demo  


  • Funnel Shape

    Tailor the appearance of the React Funnel Chart by specifying the neck-to-top ratio. By default, the   value of the neck ratio is set at 0.3, indicating that the base width is 30% of the top width. You have the flexibility to use the chart’s ratio equalizer to adjust the ratio and create the funnel shape based on your specific needs. You can also flip the funnel upside down to resemble a pyramid. 

    See the React Funnel Chart shape demo 

    funnel chart shape
  • Dynamic Slope and Height

    The component also enables you to use a freeform representation of the funnel shape by enabling the dynamic slope and height of the React Funnel Chart. This configuration will result in rendering each segment in a size relative to the corresponding value it represents. 

    See the React Funnel Chart dynamic slope and height demo 


    funnel chart dynamic slope
  • Data Binding

    Populate your React Funnel Chart series with data from different sources, including numbers, arrays and objects. To do this, simply specify the desired fields you intend to use during the configuration process. 

    See the React Chart data binding demo  

  • Rendering Modes

    The React Funnel Chart suppors two rendering modes - Canvas (bitmap) and SVG (vector graphics). By default, the SVG format ensures an always crips presentation of your data. When performance is the priority, navigate to the canvas format to ensure your chart will effectively handle large amounts of data and real-time updates. 

    See the React Funnel Chart rendering demo 

  • Export Options

    You can easily export your React Funnel Chart to PDF, SVG, PNG and the Kendo UI drawing format. In situations where you need to adjustthe image size or align the chart to a specific paper size, the intuitive export method will make sure you preserve the quality and rendering of the chart in the output file. 

    See the React Funnel Chart export demo 

  • Appearance

    Personalize the color schemes of the KendoReact Funnel Chart component using a selection of predefined options, including Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (resembles the Bootstrap styling) and Fluent (based on Microsoft Fluent UI). For a deeper level of customization, you can utilize the built-in themes or create a completely new theme by using the Progress ThemeBuilder


  • Globalization

    The KendoReact Funnel Chart includes globalization and localization capabilities ensuring to ensure that the component can effectively support any application’s language and locale. Even more, you can utilize the right-to-left (RTL) rendering for languages that use right-to-left scripts. 

    See the React Funnel Chart globalization demo 

All KendoReact Components

Next Steps