constantLineStyle label

An object defining constant line label options.

Type: Object

This object configures all the constant line labels of the value axis. A constant line label shows information on the constant line. Within the label object you can configure position, text and font options using the corresponding fields. In addition, you can specify the horizontal and vertical alignment for the label.

To configure styles for the constant line labels of the argument and value axis together, use the commonAxisSettings | constantLineStyle | label object.

In addition, you can define the appearance of each constant line label individually. For more information, refer to the valueAxis | constantLines | label object description.

NOTE: The options specified within the valueAxis | constantLines | label object override the corresponding options specified within the valueAxis | constantLineStyle | label object. In turn, the options specified within the valueAxis | constantLineStyle | label object override the options specified within the commonAxisSettings | constantLineStyle | label object.

Show Example:
jQuery

In the following example, the value axis constant line labels are positioned outside the chart. In addition, these labels are drawn in the rosybrown color.

<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' }
        ],
        valueAxis: {
            constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }],
            constantLineStyle: {
                label: {
                    position: 'outside',
                    font: {
                        color: 'rosybrown'
                    }
                }
            }
        }
    });
});

font

Specifies font options for a constant line label.

Type: Object

Show Example:
jQuery

In this example, a number of font options for the argument axis constant line labels 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' }
        ],
        valueAxis: {
            constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }],
            constantLineStyle: {
                label: {
                    font: {
                        color: 'rosybrown',
                        family: 'Zapf-Chancery, cursive',
                        opacity: 0.55,
                        size: 10,
                        weight: 700
                    }
                }
            }
        }
    });
});

horizontalAlignment

Specifies the horizontal alignment of a constant line label.

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

Show Example:
jQuery

Use the drop-down menu below to change the value of the horizontalAlignment option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Constant Line Label's Horizontal Alignment:
    <select id="dropdownListSelector">
        <option value="left">left</option>
        <option value="center">center</option>
        <option value="right">right</option>
    </select>
</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' }
        ],
        valueAxis: {
            constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }],
            constantLineStyle: {
                label: {
                    horizontalAlignment: 'left'
                }
            }
        }
    });

    $("#dropdownListSelector").change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            valueAxis: {
                constantLineStyle: {
                    label: { horizontalAlignment: this.value }
                }
            }
        });
    });
});

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

Use the drop-down menu below to change the position of the argument axis constant line labels.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Value Axis Constant Line Label's Position:
    <select id="dropdownListSelector">
        <option value="inside">inside</option>
        <option value="outside">outside</option>
    </select>
</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' }
        ],
        valueAxis: {
            constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }],
            constantLineStyle: {
                label: {
                    position: 'inside'
                }
            }
        }
    });

    $("#dropdownListSelector").change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            valueAxis: {
                constantLineStyle: {
                    label: { position: this.value }
                }
            }
        });
    });
});

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, the value axis constant line labels are aligned to the bottom of the constant lines.

<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' }
        ],
        valueAxis: {
            constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }],
            constantLineStyle: {
                label: {
                    verticalAlignment: 'bottom'
                }
            }
        }
    });
});