constantLines label

An object defining constant line label options.

Type: Object

A constant line label shows information on the constant line. You can configure label appearance using the label object. Within this object, you can set font options, a position and text using corresponding fields. In addition, you can specify the horizontal and vertical alignments for the label.

You can set the label options for all the argument axis constant lines simultaneously. For this purpose, use the argumentAxis | constantLineStyle | label object. Note that the options that are set within the argumentAxis | constantLine | label object override the corresponding options that are set within the argumentAxis | constantLineStyle | label object.

Show Example:
jQuery

In the following example, a number of options for the argument axis constant line labels are changed. The "1955" and "1992" labels are aligned to the left, while the "2013" label is positioned outside the chart plot and displayed with the altered text. In addition, all labels are colored differently.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1950, europe: 546, americas: 332, africa: 227 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [
                {
                    value: 1955,
                    label: {
                        horizontalAlignment: 'left',
                        font: { color: 'lightsalmon' }
                    }
                }, {
                    value: 1992,
                    label: {
                        horizontalAlignment: 'left',
                        font: { color: 'salmon' }
                    }
                }, {
                    value: 2013,
                    label: {
                        position: 'outside',
                        text: 'now',
                        font: {
                            color: 'rosybrown',
                            size: 16
                        }
                    }
                }
            ]
        }
    });
});

font

Specifies font options for a constant line label.

Type: Object

Show Example:
jQuery

In this example, each argument axis constant line label is displayed in a different color and size.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1950, europe: 546, americas: 332, africa: 227 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [
                {
                    value: 1955,
                    label: {
                        font: {
                            color: 'lightskyblue',
                            size: 12
                        }
                    }
                }, {
                    value: 1992,
                    label: {
                        font: {
                            color: 'deepskyblue',
                            size: 14
                        }
                    }
                }, {
                    value: 2013,
                    label: {
                        font: {
                            color: 'dodgerblue',
                            size: 16
                        }
                    }
                }
            ]
        }
    });
});

horizontalAlignment

Specifies the horizontal alignment of a constant line label.

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

Show Example:
jQuery

In this example, each argument axis constant line label is aligned differently using the horizontalAlignment option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1950, europe: 546, americas: 332, africa: 227 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [
                {
                    value: 1968,
                    label: { horizontalAlignment: 'left' }
                }, {
                    value: 2013,
                    label: { horizontalAlignment: 'right' }
                }
            ]
        }
    });
});

position

Specifies the position of the constant line label relative to the chart plot.

Type: String
Default Value: 'inside'
Accepted Values: 'inside'|'outside'

By default, a constant line label is displayed inside the chart plot near the constant line it belongs to. You can place the label outside the plot by setting the position option to 'outside'.

Show Example:
jQuery

In this example, the "2013" label is placed outside the chart plot using the position option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1950, europe: 546, americas: 332, africa: 227 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [
                {
                    value: 2013,
                    label: {
                        position: 'outside',
                        text: 'now'
                    }
                }
            ]
        }
    });
});

text

Specifies the text to be displayed in a constant line label.

Type: String
Default Value: undefined

By default, a constant line label shows the value of the constant line. However, the label can display any information you demand. For this purpose, assign the required string to the text option.

Show Example:
jQuery

In this example, the text of the constant line label is changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1950, europe: 546, americas: 332, africa: 227 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [{
                value: 2013,
                label: {
                    text: 'now'
                }
            }]
        }
    });
});

verticalAlignment

Specifies the vertical alignment of a constant line label.

Type: String
Default Value: 'top'
Accepted Values: 'top' | 'center' | 'bottom'

Show Example:
jQuery

In this example, each argument axis constant line label is aligned differently using the verticalAlignment option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1950, europe: 546, americas: 332, africa: 227 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [
                {
                    value: 1955,
                    label: { verticalAlignment: 'bottom' }
                }, {
                    value: 1984,
                    label: { verticalAlignment: 'center' }
                }, {
                    value: 2013,
                    label: { verticalAlignment: 'top' }
                }
            ]
        }
    });
});