JavaScript/jQuery Funnel - Overview

A funnel item is a visual representation of a data object.

Funnel Items

Funnel items get their colors from the palette by default. If you want to use colors from the data source, specify the colorField property.

JavaScript
  • $(function() {
  • $("#funnelContainer").dxFunnel({
  • dataSource: [
  • { fruit: "Apples", count: 10, color: "green" },
  • { fruit: "Oranges", count: 12, color: "orange" },
  • { fruit: "Lemons", count: 15, color: "yellow" }
  • ],
  • argumentField: "fruit",
  • valueField: "count",
  • colorField: "color"
  • });
  • });

To configure other aspects of the funnel items' appearance, use the item object.

JavaScript
  • $(function() {
  • $("#funnelContainer").dxFunnel({
  • // ...
  • item: {
  • border: {
  • visible: true
  • }
  • }
  • });
  • });

Refer to other topics in this section for details on the main funnel item features.

See Also