Vue Chart - commonSeriesSettings.label

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.

$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: [{
            label: {
                // Settings for all point labels of an individual series
            }
        }, {
            // ...  
        }],
        commonSeriesSettings: {
            label: {
                // Settings for all point labels in the Chart
            }
        }
    });
});

<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 { }

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

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

• customizeLabel

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.

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

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.

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

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

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

See Also

• Value Formatting

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:

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

• customizeText
• Value Formatting

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.

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.

View Demo