Angular Funnel - legend
backgroundColor
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
columnCount
Use this option when the legend is oriented vertically. Otherwise, use rowCount.
See Also
- legend.columnItemSpacing
customizeHint
Name | Type | Description |
---|---|---|
item |
The Item object. |
|
text |
The legend item's text. |
customizeItems
The following code shows how to use the customizeItems function to sort legend items alphabetically:
jQuery
$(function() { $("#funnelContainer").dxFunnel({ // ... legend: { customizeItems: function(items) { return items.sort(function(a, b) { var itemA = a.text.toLowerCase(); var itemB = b.text.toLowerCase(); if(itemA < itemB) return -1; if(itemA > itemB) return 1; return 0; }); } } }); });
Angular
<dx-funnel ... > <dxo-legend ... [customizeItems]="sortLegendItems"> </dxo-legend> </dx-funnel>
// ... export class AppComponent { sortLegendItems(items) { return items.sort((a, b) => { let itemA = a.text.toLowerCase(); let itemB = b.text.toLowerCase(); if(itemA < itemB) return -1; if(itemA > itemB) return 1; return 0; }); } }
import { DxFunnelModule } from 'devextreme-angular'; // ... @NgModule({ imports: [ // ... DxFunnelModule ], // ... }) export class AppModule { }
Vue
<template> <DxFunnel ... > <DxLegend :customize-items="sortLegendItems" /> </DxFunnel> </template> <script> import { DxFunnel, DxLegend } from 'devextreme-vue/funnel'; export default { components: { DxFunnel, DxLegend }, methods: { sortLegendItems(items) { return items.sort((a, b) => { let itemA = a.text.toLowerCase(); let itemB = b.text.toLowerCase(); if(itemA < itemB) return -1; if(itemA > itemB) return 1; return 0; }); } } } </script>
React
import React from 'react'; import { Funnel, Legend } from 'devextreme-react/funnel'; class App extends React.Component { render() { return ( <Funnel ... > <Legend ... customizeItems={this.sortLegendItems} /> </Funnel> ); } sortLegendItems(items) { return items.sort((a, b) => { let itemA = a.text.toLowerCase(); let itemB = b.text.toLowerCase(); if(itemA < itemB) return -1; if(itemA > itemB) return 1; return 0; }); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Funnel() @* ... *@ .Legend(l => l .CustomizeItems("sortLegendItems") ) ) <script type="text/javascript"> function sortLegendItems (items) { return items.sort(function(a, b) { var itemA = a.text.toLowerCase(); var itemB = b.text.toLowerCase(); if(itemA < itemB) return -1; if(itemA > itemB) return 1; return 0; }); } </script>
customizeText
Name | Type | Description |
---|---|---|
item |
The Item object. |
|
text |
The legend item's original text. |
horizontalAlignment
Along with verticalAlignment, specifies the legend's position.
Use the HorizontalAlignment
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left
, Center
, and Right
.
See Also
- legend.orientation
itemsAlignment
Aligns items in the last column or row (depending on the legend's orientation). Applies when legend items are not divided into columns or rows equally.
Use the HorizontalAlignment
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left
, Center
, and Right
.
orientation
Arranges legend items vertically (in a column) or horizontally (in a row). The default value is "horizontal" if the legend.horizontalAlignment is "center". Otherwise, it is "vertical".
Use the Orientation
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Horizontal
and Vertical
.
See Also
- legend.verticalAlignment
- legend.horizontalAlignment
rowCount
Use this option when the legend is oriented horizontally. Otherwise, use columnCount.
See Also
- legend.rowItemSpacing
title
To specify only the title's text, assign it directly to this option. Otherwise, set this option to an object with the text and other fields specified.
The title can be accompanied by a subtitle. Assign it to the title.subtitle option.
verticalAlignment
Along with horizontalAlignment, specifies the legend's position.
Use the VerticalEdge
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top
and Bottom
.
See Also
- legend.orientation
If you have technical questions, please create a support ticket in the DevExpress Support Center.