All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
Box
Map
Vue
A newer version of this page is available. Switch to the current version.

jQuery Chart - StepAreaSeries.label

Configures point labels.

Type:

Object

Declared in commonSeriesSettings, the label settings apply to all point labels in the chart. Declared in a series configuration object, the label settings apply only to the point labels that belong to this particular series. The series-specific label settings override the common ones.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: [{
            label: {
                // Settings for all point labels of an individual series
            }
        }, {
            // ...  
        }],
        commonSeriesSettings: {
            label: {
                // Settings for all point labels in the Chart
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... >
    <dxi-series>
        <dxo-label ... >
            <!-- Settings for all point labels of an individual series -->
        </dxo-label>
    </dxi-series>
    <dxo-common-series-settings ... >
        <dxo-label ... >
            <!-- Settings for all point labels in the Chart -->
        </dxo-label>
    </dxo-common-series-settings>
</dx-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 { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxChart ... >
        <DxSeries ... >
            <DxLabel ...>
                <!-- Settings for all point labels of an individual series -->
            </DxLabel>
        </DxSeries>
        <DxCommonSeriesSettings ... >
            <DxLabel ... >
                <!-- Settings for all point labels in the Chart -->
            </DxLabel>
        </DxCommonSeriesSettings>
    </DxChart>
</template>

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

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

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

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series ... >
                    <Label ... >
                        // Settings for all point labels of an individual series
                    </Label>
                </Series>
                <CommonSeriesSettings ... >
                    <Label ... >
                        // Settings for all point labels in the Chart
                    </Label>
                </CommonSeriesSettings>
            </Chart>
        );
    }
}
export default App;

View Demo

See Also

alignment

Aligns point labels in relation to their points.

Type:

String

Default Value: 'center'
Accepted Values: 'center' | 'left' | 'right'

Use the HorizontalAlignment enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Center, and Right.

argumentFormat

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

Type:

Format

Default Value: undefined

A point label displays only the point value by default. Using the label.customizeText option, you can instruct the label to display the point argument as well. The argumentFormat option applies in this case only. This option accepts an object whose fields are described in the format section.

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.

backgroundColor

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

Type:

String

Default Value: undefined

This option supports the following colors:

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

View Demo

border

Configures the borders of point labels.

Type:

Object

connector

Configures the label connectors.

Type:

Object

A point label is always displayed near its series point, though the label is placed separately. To make the relationship between the series point and its label evident, use a connector.

By default, label connectors are hidden. To make them visible, set the connector.visible option to true.

customizeText

Customizes the text displayed by point labels.

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.

This option accepts a function whose parameter exposes the following fields.

Field Description
originalValue The raw value of the point.
value The originalValue after type cast.
valueText The value with an applied format and converted to string.
originalArgument The raw argument of the point.
argument The originalArgument after type cast.
argumentText The argument with an applied format and converted to string.
point The Point object.
seriesName The name of the series to which the point belongs.
NOTE
As an alternative to the function’s parameter you can use the this keyword.
See Also

font

Specifies font options for point labels.

Type:

Object

format

Formats the point value before it will be displayed in the point label.

Type:

Format

Default Value: undefined

This option accepts an object whose fields are described in the format section. However, there is one more field, called percentPrecision, which is available only to full-stacked-like series, where one point always has an absolute and a percentage value. The percentPrecision field specifies how many digits after the decimal point to save in the percentage value. See an example in the following code.

format: {
    type: "fixedPoint", // the format of absolute values
    precision: 1, // the precision of absolute values (123.456 --> 123.4)
    percentPrecision: 2 // the precision of percentage values (12.3456 % --> 12.34 %)
}
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.

horizontalOffset

Along with verticalOffset, shifts point labels from their initial positions.

Type:

Number

Default Value: 0

The number assigned to this option specifies the shift in pixels. A negative number shifts the point labels to the left, a positive number - to the right.

rotationAngle

Rotates point labels.

Type:

Number

Default Value: 0

verticalOffset

Along with horizontalOffset, shifts point labels from their initial positions.

Type:

Number

Default Value: 0

The number assigned to this option specifies the shift in pixels. A negative number shifts the point labels up, a positive number shifts them down.

visible

Makes the point labels visible.

Type:

Boolean

Default Value: false