Vue Chart - FullStackedAreaSeries.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 all chart series at once.

Specify the label object's properties within the commonSeriesSettings configuration object to set label properties for all chart series at once.

If you have several series of a single type, you can set label properties to the values specific to this series type using the corresponding object (area, line, etc.) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

If you need to set a label property for an individual series, use the label object within the series object of the series array. The values that are set individually override the corresponding common values.

alignment

Aligns point labels in relation to their points.

Type:

HorizontalAlignment

Default Value: 'center'

This property accepts the following values:

  • center
    Displays labels in the center of the point.

  • left
    Aligns the left corner of the label to the center of the point.

  • right
    Aligns the right corner of the label to the center of the point.

NOTE
This property has no effect if the rotated property is enabled.

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

| undefined
Default Value: undefined

A point label displays only the point value by default. Using the label.customizeText property, you can instruct the label to display the point argument as well. The argumentFormat property applies in this case only. This property accepts an object whose fields are described in the format 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

| undefined
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.

View Demo

border

Configures the borders of point labels.

Selector: DxBorder
Type:

Object

connector

Configures the label connectors.

Selector: DxConnector
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 property to true.

customizeText

Customizes the text 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.

This property 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.
percent The percentage value of the point.
percentText The percent with an applied format and converted to string.
total The sum of all values in the stack.
totalText The total 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

displayFormat

Specifies the label's text.

Selector: display-format
Type:

String

| undefined
Default Value: undefined

This property is ignored if labels are hidden.

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

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

DevExtreme Charts - Format label text

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
    // ...
    commonSeriesSettings: {
        type: 'line',
        label: {
            format: 'thousands',
            visible: true,
            displayFormat: "{seriesName}: {valueText}",
        }
    },
    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>: {valueText}",
            }, 
        },
    ],
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-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>: {valueText}">
        </dxo-label>
    </dxi-series>
    <dxo-common-series-settings ... >
        <dxo-label 
            format="thousands"
            [visible]="true"
            displayFormat="{seriesName}: {valueText}">
        </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
            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>: {valueText}" />
        </DxSeries>
        <DxCommonSeriesSettings ... >
            <DxLabel :visible="true" format="thousands" display-format="{seriesName}: {valueText}" />
        </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 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>: {valueText}" >
                    </Label>
                </Series>                
                <CommonSeriesSettings ... >
                    <Label 
                        format="thousands" 
                        visible={true}
                        displayFormat="{seriesName}: {valueText}"
                        >
                    </Label>
                </CommonSeriesSettings>
            </Chart>
        );
    }
}
export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Chart()
    .CommonSeriesSettings(s => s
        .Label(label => label
            .Format(Format.Thousands)
            .DisplayFormat("{seriesName}: {valueText}")
            .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>: {valueText}")
        );
    })
    // ...
)
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Chart()
    .CommonSeriesSettings(s => s
        .Label(label => label
            .Format(Format.Thousands)
            .DisplayFormat("{seriesName}: {valueText}")
            .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>: {valueText}")
        );
    })
    // ...
)

font

Specifies font properties for point labels.

Selector: DxFont
Type:

Object

format

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

Selector: DxFormat
Type:

Format

| undefined
Default Value: undefined

See the format section for information on accepted values.

If you specify the format with an object and apply it to a full-stacked-like series, this object can also contain the percentPrecision field. Full-stacked-like series points have absolute and percentage values. The percentPrecision field specifies how many decimal digits the percentage values should have:

JavaScript
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 %)
}
See Also

horizontalOffset

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

Selector: horizontal-offset
Type:

Number

Default Value: 0

The number assigned to this property 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.

Selector: rotation-angle
Type:

Number

Default Value: 0

verticalOffset

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

Selector: vertical-offset
Type:

Number

Default Value: 0

The number assigned to this property 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

View Demo