constantLines label

    Configures the constant line label.

    Type: Object

    The constant line label displays the value of the constant line.

    DevExtreme HTML5 Charts ConstantLine ConstantLineLabel

    The label object specifies the following characteristics of the constant line label.

    • Visibility
      By default, the constant line label is visible. To hide it, assign false to the visible option.
    • Text
      By default, the constant line label displays the value of the constant line. To assign a custom text to the constant line label, use the text option.
    • Position
      The constant line label can be located inside or outside the chart plot. Use the position option to change this setting.
    • Alignment
      To align the constant line label in the horizontal and vertical directions, use the horizontalAlignment and verticalAlignment options.
    • Font
      To change the font of the constant line label, use the fields of the font object.
    See Also
    • valueAxis | constantLineStyle | label - specifies a unified style for the labels of those constant lines that belong to the value axis.
    • commonAxisSettings | constantLineStyle | label - specifies a unified style for the labels of all constant lines in the widget.

    font

    Specifies font options for constant line labels.

    Type: Object

    horizontalAlignment

    Aligns constant line labels in the horizontal direction.

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

    Show Example:
    jQuery

    In this example, each value 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' }
            ],
            valueAxis: {
                constantLines: [
                    {
                        value: 500,
                        label: { horizontalAlignment: 'left' }
                    }, {
                        value: 750,
                        label: { horizontalAlignment: 'center' }
                    }, {
                        value: 1000,
                        label: { horizontalAlignment: 'right' }
                    }
                ]
            }
        });
    });

    position

    Specifies the position of constant line labels on the chart plot.

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

    By default, constant line labels are displayed inside the chart plot near the constant lines they belong to. To place the labels outside the chart plot, set the position option to "outside".

    Show Example:
    jQuery

    In this example, the "1000" 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' }
            ],
            valueAxis: {
                constantLines: [
                    {
                        value: 1000,
                        label: {
                            position: 'outside'
                        }
                    }
                ]
            }
        });
    });

    text

    Specifies the text of a constant line label. By default, equals to the value of the constant line.

    Type: String
    Default Value: undefined

    verticalAlignment

    Aligns constant line labels in the vertical direction.

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

    Show Example:
    jQuery

    In this example, each value 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' }
            ],
            valueAxis: {
                constantLines: [
                    {
                        value: 500,
                        label: { verticalAlignment: 'top' }
                    }, {
                        value: 1000,
                        label: { verticalAlignment: 'bottom' }
                    }
                ]
            }
        });
    });

    visible

    Makes constant line labels visible.

    Type: Boolean
    Default Value: true