Vue Funnel - Legend

Configures the legend.

import { DxFunnelTypes } from "devextreme-vue/funnel"

customizeHint

Specifies the hint that appears when a user hovers the mouse pointer over a legend item.

Type:

Function

Function parameters:
itemInfo:

Object

Information on the funnel item and its corresponding legend item.

Object structure:
Name Type Description
item

Funnel Item

The Item object.
text

String

The legend item's text.
Return Value:

String

The text to be displayed in the hint.

customizeItems

Allows you to change the order, text, and visibility of legend items.

Type:

Function

Function parameters:
items:

Array<FunnelLegendItem>

Legend items before customizations.

Return Value:

Array<FunnelLegendItem>

Legend items after customizations.

customizeText

Customizes the text displayed by legend items.

Type:

Function

Function parameters:
itemInfo:

Object

Information on the funnel item and its corresponding legend item.

Object structure:
Name Type Description
item

Funnel Item

The Item object.
text

String

The legend item's original text.
Return Value:

String

The text for the legend item to display.

Cannot be used in themes.

markerTemplate

Specifies an SVG element that serves as a custom legend item marker.

Type:

template

| undefined
Function parameters:
legendItem:

FunnelLegendItem

Information about a legend item.

element:

SVGGElement

A marker's container.

Return Value:

String

|

SVGElement

|

jQuery

One of the following:

  • Template name
  • SVG markup as a string
  • SVGElement
  • jQuery element that contains an SVGElement
Default Value: undefined

visible

Specifies whether the legend is visible.

Type:

Boolean

Default Value: false