constantLineStyle label

Configures constant line labels.

Type: Object

A constant line label displays the value of a constant line.

DevExtreme HTML5 Charts ConstantLine ConstantLineLabel

The commonAxisSettings | constantLineStyle | label object, which is described here, specifies common settings for all constant line labels in the chart. To configure the labels of those constant lines that belong to a particular axis, use the following objects.

  • argumentAxis | constantLineStyle | label
  • valueAxis | constantLineStyle | label

To configure the labels of individual constant lines use the following objects.

  • argumentAxis | constantLines[] | label
  • valueAxis | constantLines[] | label

Individual settings override axis-specific settings which, in their turn, override common settings.

font

Specifies font options for constant line labels.

Type: Object

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:
AngularJS
Knockout
jQuery

In this example, you can change the position of constant line labels using the select box under the chart.

<div ng-controller="chartController">
    <div id="chartContainer" dx-chart="{
        dataSource: data,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        argumentAxis: {
            constantLines: [
                { value: 1955 },
                { value: 1992 },
                { value: 2008 }
            ]
        },
        valueAxis: {
            label: { format: 'largeNumber' },
            constantLines: [{ value: 1000000000 }]
        },
        commonAxisSettings: {
            constantLineStyle: {
                label: { position: 'inside' }
            }
        },
        bindingOptions: {
            'commonAxisSettings.constantLineStyle.label.position': 'selectBoxValue'
        }
    }"></div>
    <div class="inline" style="text-align:center">
        <div>constantLineStyle | label | position:&nbsp;</div>
        <div id="selectBoxContainer" ng-model="selectBoxValue" dx-select-box="{
            items: ['inside', 'outside']
        }"></div>
    </div>
</div>
var population = [
    { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
    { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
    { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
    { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
    { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
    { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
    { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 }
];

angular
    .module('myApp', ['dx'])
    .controller('chartController', function ($scope) {
        $scope.data = population;
        $scope.selectBoxValue = 'inside'
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});
#chartContainer {
    height: 350px;
    max-width: 800px;
    margin: 0 auto;
}

#selectBoxContainer {
    height: 35px;
    max-width: 200px;
    margin-top: 5px;
    vertical-align: middle;
}

.inline > div {
    display: inline-block;
}

In this example, you can change the position of constant line labels using the select box under the chart.

<div id="chartContainer" data-bind="dxChart: {
    dataSource: data,
    commonSeriesSettings: {
        argumentField: 'year'
    },
    series: [
        { valueField: 'europe', name: 'Europe' },
        { valueField: 'americas', name: 'Americas' },
        { valueField: 'africa', name: 'Africa' }
    ],
    animation: false,
    argumentAxis: {
        constantLines: [
            { value: 1955 },
            { value: 1992 },
            { value: 2008 }
        ]
    },
    valueAxis: {
        label: { format: 'largeNumber' },
        constantLines: [{ value: 1000000000 }]
    },
    commonAxisSettings: {
        constantLineStyle: {
            label: { position: selectBoxValue }
        }
    }
}"></div>
<div class="inline" style="text-align:center">
    <div>constantLineStyle | label | position:&nbsp;</div>
    <div id="selectBoxContainer" data-bind="dxSelectBox: {
        items: ['inside', 'outside'],
        value: selectBoxValue
    }"></div>
</div>
var population = [
    { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
    { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
    { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
    { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
    { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
    { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
    { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 }
];

var viewModel = {
    data: population,
    selectBoxValue: ko.observable('inside')
};

ko.applyBindings(viewModel);
#chartContainer {
    height: 350px;
    max-width: 800px;
    margin: 0 auto;
}

#selectBoxContainer {
    height: 35px;
    max-width: 200px;
    margin-top: 5px;
    vertical-align: middle;
}

.inline > div {
    display: inline-block;
}

In this example, you can change the position of constant line labels using the select box under the chart.

<div id="chartContainer"></div>
<div class="inline" style="text-align:center">
    <div>constantLineStyle | label | position:&nbsp;</div>
    <div id="selectBoxContainer"></div>
</div>
var population = [
    { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
    { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
    { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
    { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
    { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
    { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
    { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 }
];

$(function () {
    var chart = $("#chartContainer").dxChart({
        dataSource: population,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        argumentAxis: {
            constantLines: [
                { value: 1955 },
                { value: 1992 },
                { value: 2008 }
            ]
        },
        valueAxis: {
            label: { format: 'largeNumber' },
            constantLines: [{ value: 1000000000 }]
        }
    }).dxChart('instance');
	
    $("#selectBoxContainer").dxSelectBox({
        items: ['inside', 'outside'],
        value: 'inside',
        onValueChanged: function (e) {
            chart.option({
                commonAxisSettings: {
                    constantLineStyle: {
                        label: { position: e.value }
                    }
                }
            });
        }
    });
});
#chartContainer {
    height: 350px;
    max-width: 800px;
    margin: 0 auto;
}

#selectBoxContainer {
    height: 35px;
    max-width: 200px;
    margin-top: 5px;
    vertical-align: middle;
}

.inline > div {
    display: inline-block;
}

visible

Makes constant line labels visible.

Type: Boolean
Default Value: true