Vue BarGauge - Legend

Configures the legend.

import { DxBarGaugeTypes } from "devextreme-vue/bar-gauge"

customizeHint

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

Type:

Function

Function parameters:
arg:

Object

Information on the bar and its corresponding legend item.

Object structure:
Name Type Description
item

BarGaugeBarInfo

Information on the bar.
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<BarGaugeLegendItem>

Legend items before customizations.

Return Value:

Array<BarGaugeLegendItem>

Legend items after customizations.

customizeText

Customizes the text displayed by legend items.

Type:

Function

Function parameters:
arg:

Object

Information on the bar and its corresponding legend item.

Object structure:
Name Type Description
item

BarGaugeBarInfo

Information on the bar.
text

String

The legend item's text.
Return Value:

String

The text to be displayed in the hint.

Cannot be used in themes.

itemTextFormat

Formats the item text before it is displayed. Accepts only numeric formats. When unspecified, it inherits the label's format.

Type:

Format

| undefined
Default Value: undefined

markerTemplate

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

Type:

template

| undefined
Function parameters:
legendItem:

BarGaugeLegendItem

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