React PolarChart - commonSeriesSettings.label

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.

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.

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

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.

The function's parameter has the following fields:

• originalValue
  Specifies the value of the represented point as it is set in the data source.
• value
  Specifies the value of the represented point. Differs from the originalValue when the axis' value type differs from the value type in the data source. In this instance, value has the type of the value axis.
• valueText
  Specifies the value of the represented point with applied formatting if the format property is specified (see label).
• originalArgument
  Specifies the argument value of the represented point as it is set in the data source.
• argument
  Specifies the argument value of the represented point. Differs from the originalArgument when the axis' argument type differs from the argument type in the data source. In this instance, argument has the type of the argument axis.
• argumentText
  Specifies the argument value of the represented point with applied formatting if the argumentFormat property is specified.
• size (for bubble series only)
  Specifies the size of the represented bubble as it is set in the data source.
• index (for range area and range bar series only)
  Specifies whether the represented point is maximum (index = 1) or minimum (index = 0).
• point
  Provides access to the represented point. To learn more about the field and methods of the point object, refer to the Point topic in the "Chart Elements" reference section.
• seriesName
  Specifies the series of the represented point.

See Also

• Value Formatting

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:

$(function() {
    $("#chartContainer").dxPolarChart({
    // ...
    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}",
            }, 
        },
    ],
    });
});

<dx-polar-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-polar-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 { DxPolarChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPolarChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxPolarChart ... >
        <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>
    </DxPolarChart>
</template>

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

export default {
    components: {
        DxPolarChart,
        DxSeries,
        DxLabel,
        DxCommonSeriesSettings
    },
    // ...
}
</script>

import React from 'react';

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

class App extends React.Component {
    render() {
        return (
            <PolarChart ... >
                <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>
            </PolarChart>
        );
    }
}
export default App;

@(Html.DevExtreme().PolarChart()
    .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}")
        );
    })
    // ...
)

@(Html.DevExtreme().PolarChart()
    .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}")
        );
    })
    // ...
)

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

• customizeText
• Value Formatting