Vue RangeSelector - chart.series.label

Configures point labels.

Selector: DxLabel

Type:

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

alignment

Aligns point labels in relation to their points.

Type:

String

Default Value: 'center'

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

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

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.

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.

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:

Hexadecimal colors
RGB colors
RGBA colors
Predefined/cross-browser color names
Predefined SVG colors
Paint server address

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

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.
size	The size value of the point. For bubble series only.
index	0 - if the point is minimum; 1 - if the point is maximum. For range area and range bar series only.
point	The Point object.
seriesName	The name of the series to which the point belongs.

The following fields are inherent to stacked-like series only.

Field	Description
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.

The following fields are inherent to financial series (candlestick and stock) only.

Field	Description
originalOpenValue	The raw open value of the point.
openValue	The originalOpenValue after type cast.
openValueText	The openValue with an applied format and converted to string.
originalCloseValue	The raw close value of the point.
closeValue	The originalCloseValue after type cast.
closeValueText	The closeValue with an applied format and converted to string.
originalHighValue	The raw high value of the point.
highValue	The originalHighValue after type cast.
highValueText	The highValue with an applied format and converted to string.
originalLowValue	The raw low value of the point.
lowValue	The originalLowValue after type cast.
lowValueText	The lowValue with an applied format and converted to string.
reductionValue	The reduction value.
reductionValueText	The reductionValue with an applied format and converted to string.

NOTE

As an alternative to the function’s parameter you can use the this keyword.

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

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 %)
}

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

Vue RangeSelector - chart.series.label

jQuery

Angular

Vue

React

See Also

alignment

argumentFormat

See Also

backgroundColor

border

customizeText

See Also

displayFormat

jQuery

Angular

Vue

React

ASP.NET Core Controls

ASP.NET MVC Controls

font

format

See Also

horizontalOffset

rotationAngle

verticalOffset

visible