Vue PieChart - series.label

An object defining the label configuration properties.

Selector: DxLabel
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 properties for the series.

View Demo

argumentFormat

Formats the point argument before it is displayed in the point label. To format the point value, use the format property.

Selector: DxArgumentFormat
Type:

Format

Default Value: undefined

NOTE
DevExtreme UI components 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.
  • Value Formatting - shows how to apply formatting to various UI component elements.

backgroundColor

Colors the point labels' background. The default color is inherited from the points.

Selector: background-color
Type:

String

Default Value: undefined

This property supports the following colors:

You can remove the label's background by setting this property to "none". In this case, the label's text is the same color as the point.

border

Specifies border properties for point labels.

Selector: DxBorder
Type:

Object

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

connector

Specifies connector properties for series point labels.

Selector: DxConnector
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 properties using the connector object.

View Demo

customizeText

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

Selector: customize-text
Type:

Function

Function parameters:
pointInfo:

Object

Information on the series point.

Return Value:

String

The text for the label to display.

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 represented point.
  • valueText
    Specifies the value of the represented point with applied formatting if the format property is specified.
  • argument
    Specifies the argument value of the represented point.
  • argumentText
    Specifies the argument value of the represented point with applied formatting if the argumentFormat property is specified.
  • percent
    Specifies the proportional value of the represented point in a floating point format.
  • percentText
    Specifies the value of the represented point as a percentage with a precision of the format.percentPrecision property.
  • point.tag
    Specifies the tag of the represented point.
NOTE
As an alternative to the function’s parameter you can use the this keyword.

View Demo

See Also

displayFormat

Specifies the label's text.

Selector: display-format
Type:

String

Default Value: undefined

This property is ignored if labels are hidden.

Use the parameters of the label.customizeLabel function as placeholders in the displayFormat property value.

The example below illustrates how to customize label text for all series and individual series:

jQuery
index.js
$(function() {
    $("#chartContainer").dxPieChart({
    // ...
    commonSeriesSettings: {
        label: {
            visible: true,
            displayFormat: "{series}: {value}",
        }
    },
    series: [
        { valueField: 'y1564', name: '15-64 years' },
        { valueField: 'y014', name: '0-14 years' },
        { valueField: 'y65', name: '65 years and older', 
            label: { 
                displayFormat: "<u>65+ years</u>: {value}",
            }, 
        },
    ],
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-pie-chart ... >
    <dxi-series valueField="y1564" name="15-64 years"></dxi-series>
    <dxi-series valueField="y014" name="0-14 years"></dxi-series>
    <dxi-series valueField="y65" name="65 years and older">
        <dxo-label displayformat="<u>65+ years</u>: {value}">
        </dxo-label>
    </dxi-series>
    <dxo-common-series-settings ... >
        <dxo-label 
            [visible]="true"
            displayFormat="{series}: {value}">
        </dxo-label>
    </dxo-common-series-settings>
</dx-pie-chart>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPieChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPieChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxPieChart ... >
        <DxSeries
            value-field="y1564"
            name="15-64 years"
        />
        <DxSeries
            value-field="y014"
            name="0-14 years"
        />
        <DxSeries
            value-field="y65"
            name="65 years and older">
            <DxLabel display-format="<u>65+ years</u>: {value}" />
        </DxSeries>
        <DxCommonSeriesSettings ... >
            <DxLabel :visible="true" display-format="{series}: {value}" />
        </DxCommonSeriesSettings>
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxSeries,
    DxLabel,
    DxCommonSeriesSettings
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxSeries,
        DxLabel,
        DxCommonSeriesSettings
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import PieChart, {
    Series,
    Label,
    CommonSeriesSettings
} from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Series valueField="y1564" name="15-64 years"></Series>
                <Series valueField="y014" name="0-14 years"></Series>
                <Series valueField="y65" name="65 years and older">
                    <Label displayFormat="<u>65+ years</u>: {value}" >
                    </Label>
                </Series>                
                <CommonSeriesSettings ... >
                    <Label 
                        visible={true}
                        displayFormat="{series}: {value}"
                        >
                    </Label>
                </CommonSeriesSettings>
            </PieChart>
        );
    }
}
export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().PieChart()
    .CommonSeriesSettings(s => s
        .Label(label => label
            .DisplayFormat("{series}: {value}")
            .Visible(true)                    
            )
        )
    )
    .Series(s => {
        s.Add().ValueField("y1564").Name("15-64 years");
        s.Add().ValueField("y014").Name("0-14 years");
        s.Add().ValueField("y65").Name("65 years and older").Label(label => label
            .DisplayFormat("<u>65+ years</u>: {value}")
        );
    })
    // ...
)
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().PieChart()
    .CommonSeriesSettings(s => s
        .Label(label => label
            .DisplayFormat("{series}: {value}")
            .Visible(true)                    
            )
        )
    )
    .Series(s => {
        s.Add().ValueField("y1564").Name("15-64 years");
        s.Add().ValueField("y014").Name("0-14 years");
        s.Add().ValueField("y65").Name("65 years and older").Label(label => label
            .DisplayFormat("<u>65+ years</u>: {value}")
        );
    })
    // ...
)

font

Specifies font properties for the text displayed in point labels.

Selector: DxFont
Type:

Object

format

Formats a value before it is displayed in a point label.

Selector: DxFormat
Type:

Format

Default Value: undefined

See the format section for information on accepted values.

When this property value is undefined, the date-time axes display larger date range boundaries in labels. For example, if an axis displays months, it also displays a year near each instance of January. If an axis displays days, it also displays a month name near each first visible day mark.

See Also

position

Specifies a label position relative to the chart.

Type:

LabelPosition

Default Value: 'outside'

View Demo

radialOffset

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

Selector: radial-offset
Type:

Number

Default Value: 0

rotationAngle

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

Selector: rotation-angle
Type:

Number

Default Value: 0

textOverflow

Specifies what to do with label texts that overflow the allocated space after applying wordWrap: hide, truncate them and display an ellipsis, or do nothing.

Selector: text-overflow
Type:

TextOverflow

Default Value: 'ellipsis'

visible

Specifies the visibility of point labels.

Type:

Boolean

Default Value: false

wordWrap

Specifies how to wrap label texts if they do not fit into a single line.

Selector: word-wrap
Type:

WordWrap

Default Value: 'normal'

The following modes are available:

  • "normal"
    Text breaks only at allowed breakpoints (for example, a space between two words).

  • "breakWord"
    Words can be broken if there are no available breakpoints in the line.

  • "none"
    Word wrap is disabled.

If the text overflows the container even after word wrap, the UI component applies the textOverflow property.