Vue PieChart - Legend

Specifies PieChart legend properties.

import { DxPieChartTypes } from "devextreme-vue/pie-chart"

customizeHint

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

Type:

Function

Function parameters:
pointInfo:

Object

Information on the series point.

Object structure:
Name Type Description
pointColor

String

The point's color.
pointIndex

Number

The point's index.
pointName any

The point's name.
Return Value:

String

The text for the hint to display.

customizeItems

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

Type:

Function

Function parameters:
items:

Array<PieChartLegendItem>

Legend items before customizations.

Return Value:

Array<PieChartLegendItem>

Legend items after customizations.

customizeText

Specifies a callback function that returns the text to be displayed by a legend item.

Type:

Function

Function parameters:
pointInfo:

Object

Information on the series point.

Object structure:
Name Type Description
pointColor

String

The point's color.
pointIndex

Number

The point's index.
pointName any

The point's name.
Return Value:

String

The text for the legend item to display.

Cannot be used in themes.

hoverMode

Specifies what chart elements to highlight when a corresponding item in the legend is hovered over.

Type:

PieChartLegendHoverMode

Default Value: 'allArgumentPoints'

markerTemplate

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

Type:

template

| undefined
Function parameters:
legendItem:

PieChartLegendItem

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