label

An object defining the label configuration options.

Type:

Object

Each series point can be accompanied by a text label that represents data related to the point. These are called series point labels. Use the label object's properties to set label options for the series.

View Demo

Show Example:
jQuery

Here, the point labels and their connectors are displayed. The label's format option is also changed.


                                    

                                    

argumentFormat

Specifies a format for arguments displayed by point labels.

Type:

Format

Default Value: undefined
NOTE
DevExtreme widgets provide a wide choice of predefined formats. If you are, however, going to use custom formats, link the Globalize library to your project. Learn how to do this from topics in the Installation section.
See Also
  • format - provides a comprehensive overview of formatting capabilities.
  • Data Formatting - shows how to apply formatting to various widget elements.

argumentPrecision

Deprecated

Use the series | label | argumentFormat | precision instead.

Specifies a precision for formatted point arguments displayed in point labels.

Type:

Number

Default Value: undefined

backgroundColor

Specifies a background color for point labels.

Type:

String

Default Value: undefined

Labels are painted in the color of the series points they represent by default. You can set a custom background color. For this purpose, use the backgroundColor property of the label object.

Show Example:
jQuery

In this example, the label's backgroundColor option is set to green.


                                    

                                    

border

Specifies border options for point labels.

Type:

Object

Use this object to make the borders of point labels visible/invisible and set up border options such as color and width.

Show Example:
jQuery

In this example, the label border is colored in lightslategrey and has a 2-pixel width.


                                    

                                    

connector

Specifies connector options for series point labels.

Type:

Object

A series point label can be placed separately near the represented point. To make the relationship between a label and its respective point clear, use a connector. Set the connector's visibility and appearance options using the connector object.

Show Example:
jQuery

In this example, the point labels are displayed with connectors colored in cornflowerblue.


                                    

                                    

customizeText

Specifies a callback function that returns the text to be displayed by point labels.

Type:

function

Function parameters:
pointInfo:

Object

Defines the point value to be displayed in a label.

Return Value:

String

The text to be displayed in a label.

Cannot be used in themes.

When implementing a callback function for this property, use the point value to be displayed in a label. In addition, you can use the argument of the currently displayed value. These values can be accessed using the following properties of the this object.

  • value
    Specifies the value of the currently represented point.
  • valueText
    Specifies the value of the currently represented point with applied formatting if the format property is specified.
  • argument
    Specifies the argument value of the currently represented point.
  • argumentText
    Specifies the argument value of the currently represented point with applied formatting if the argumentFormat property is specified.
  • percent
    Specifies the proportional value of the currently represented point in a floating point format.
  • percentText
    Specifies the value of the currently represented point as a percentage with a precision of the format | percentPrecision option.
  • point.tag
    Specifies the tag of the currently represented point.

The function's parameter represents the same object as the this object. If appropriate, you can use the function's parameter to obtain the value that is currently represented by a label.

To get general information on data formatting, refer to the Data Formatting topic.

Show Example:
jQuery

In this example, the point labels display values as a percentage using the label's customizeText option.


                                    

                                    

font

Specifies font options for the text displayed in point labels.

Type:

Object

Show Example:
jQuery

In this example, the font options of the point labels are changed.


                                    

                                    

format

Specifies a format for the text displayed by point labels.

Type:

Format

Default Value: undefined
NOTE
DevExtreme widgets provide a wide choice of predefined formats. If you are, however, going to use custom formats, link the Globalize library to your project. Learn how to do this from topics in the Installation section.
See Also
  • format - provides a comprehensive overview of formatting capabilities.
  • Data Formatting - shows how to apply formatting to various widget elements.
Show Example:
jQuery

In this example, the 'largeNumber' format is applied to the point labels using the format option.


                                    

                                    

percentPrecision

Deprecated

Use the series | label | format | percentPrecision instead.

Specifies a precision for the percentage values displayed in labels.

Type:

Number

Default Value: undefined

position

Specifies a label position relative to the chart.

Type:

String

Default Value: 'outside'
Accepted Values: 'outside' | 'inside' | 'columns'

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the PieChartLabelPosition enum. This enum accepts the following values: Outside, Inside and Columns.

View Demo

Show Example:
jQuery

In this example, you can change the position of the point labels. Use the drop-down menu below to set the value of the label's position option.


                                    

                                    

precision

Deprecated

Use the series | label | format | precision option instead.

Specifies a precision for formatted point values displayed in point labels.

Type:

Number

Default Value: undefined

radialOffset

Specifies how to shift labels from their initial position in a radial direction in pixels.

Type:

Number

Default Value: 0

Show Example:
jQuery

In this example, the point labels are shifted from their initial positions in a radial direction by 10 pixels.


                                    

                                    

rotationAngle

Specifies the angle used to rotate point labels from their initial position.

Type:

Number

Default Value: 0

Show Example:
jQuery

In this example, the point labels are rotated anticlockwise from their initial positions by 30 degrees using the rotationAngle option.


                                    

                                    

visible

Specifies the visibility of point labels.

Type:

Boolean

Default Value: false

Show Example:
jQuery

Use the check box below to change the visibility of the point labels.