DevExtreme jQuery - Overview
A funnel item is a visual representation of a data object.
Funnel items get their colors from the palette by default. If you want to use colors from the data source, specify the colorField option.
jQuery
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"
});
});Angular
HTML
TypeScript
<dx-funnel
[dataSource]="fruits"
argumentField="fruit"
valueField="count"
colorField="color">
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
fruits = [
{ fruit: "Apples", count: 10, color: "green" },
{ fruit: "Oranges", count: 12, color: "orange" },
{ fruit: "Lemons", count: 15, color: "yellow" }
];
}
@NgModule({
imports: [
// ...
DxFunnelModule
],
// ...
})To configure other aspects of the funnel items' appearance, use the item object.
jQuery
JavaScript
$(function() {
$("#funnelContainer").dxFunnel({
// ...
item: {
border: {
visible: true
}
}
});
});Angular
HTML
TypeScript
<dx-funnel ... >
<dxo-border
[visible]="true">
</dxo-border>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxFunnelModule
],
// ...
})Refer to other topics in this section for details on the main funnel item features.
See Also
Feedback