constantLineStyle label

An object defining constant line label options.

Type: Object

A constant line label shows information on the constant line. Use the label object to configure all the constant line labels simultaneously. Within this object you can set font options, a position and text using corresponding fields.

To specify styles for the constant line labels of the argument and value axis separately, use the argumentAxis | constantLineStyle | label or valueAxis | constantLineStyle | label configuration object correspondingly. Note that the options that are set within these objects override the corresponding options that are set within the commonAxisSettings | constantLineStyle | label object.

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

Show Example:
jQuery

In the following example, the constant line labels are drawn in the rosybrown color.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: 0, val: 0 },
                 { arg: 30, val: 1.7 },
                 { arg: 45, val: 0 },
                 { arg: 60, val: 1.7 },
                 { arg: 90, val: 0 },
                 { arg: 120, val: 1.7 },
                 { arg: 135, val: 0 },
                 { arg: 150, val: 1.7 },
                 { arg: 180, val: 0 },
                 { arg: 210, val: 1.7 },
                 { arg: 225, val: 0 },
                 { arg: 240, val: 1.7 },
                 { arg: 270, val: 0 },
                 { arg: 300, val: 1.7 },
                 { arg: 315, val: 0 },
                 { arg: 330, val: 1.7 },
                 { arg: 360, val: 0 }];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [{ type: 'line' }],
        legend: { visible: false },
        valueAxis: {
            constantLines: [
                { value: 1.7 }
            ],
        },
        argumentAxis: {
            constantLines: [
                { value: 30, label: { text: '30 &degC' } },
                { value: 60, label: { text: '60 &degC' } },
                { value: 120, label: { text: '120 &degC' } },
                { value: 150, label: { text: '150 &degC' } },
                { value: 210, label: { text: '210 &degC' } },
                { value: 240, label: { text: '240 &degC' } },
                { value: 300, label: { text: '300 &degC' } },
                { value: 330, label: { text: '330 &degC' } }
            ]
        },
        commonAxisSettings: {
            constantLineStyle: {
                label: {
                    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 constant line labels is changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: 0, val: 0 },
                 { arg: 30, val: 1.7 },
                 { arg: 45, val: 0 },
                 { arg: 60, val: 1.7 },
                 { arg: 90, val: 0 },
                 { arg: 120, val: 1.7 },
                 { arg: 135, val: 0 },
                 { arg: 150, val: 1.7 },
                 { arg: 180, val: 0 },
                 { arg: 210, val: 1.7 },
                 { arg: 225, val: 0 },
                 { arg: 240, val: 1.7 },
                 { arg: 270, val: 0 },
                 { arg: 300, val: 1.7 },
                 { arg: 315, val: 0 },
                 { arg: 330, val: 1.7 },
                 { arg: 360, val: 0 }];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [{ type: 'line' }],
        legend: { visible: false },
        valueAxis: {
            constantLines: [
                { value: 1.7 }
            ],
        },
        argumentAxis: {
            constantLines: [
                { value: 30, label: { text: '30 &degC' } },
                { value: 60, label: { text: '60 &degC' } },
                { value: 120, label: { text: '120 &degC' } },
                { value: 150, label: { text: '150 &degC' } },
                { value: 210, label: { text: '210 &degC' } },
                { value: 240, label: { text: '240 &degC' } },
                { value: 300, label: { text: '300 &degC' } },
                { value: 330, label: { text: '330 &degC' } }
            ]
        },
        commonAxisSettings: {
            constantLineStyle: {
                color: 'rosybrown',
                family: 'Zapf-Chancery, cursive',
                opacity: 0.55,
                size: 10,
                weight: 700
            }
        }
    });
});

visible

Indicates whether or not to display labels for the axis constant lines.

Type: Boolean
Default Value: true

Show Example:
jQuery

Use the check box in the bottom to change visibility of the constant line labels.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="visibleLabelsCheckbox" checked> Show constant line labels
</div>
var dataSource = [{ arg: 0, val: 0 },
                 { arg: 30, val: 1.7 },
                 { arg: 45, val: 0 },
                 { arg: 60, val: 1.7 },
                 { arg: 90, val: 0 },
                 { arg: 120, val: 1.7 },
                 { arg: 135, val: 0 },
                 { arg: 150, val: 1.7 },
                 { arg: 180, val: 0 },
                 { arg: 210, val: 1.7 },
                 { arg: 225, val: 0 },
                 { arg: 240, val: 1.7 },
                 { arg: 270, val: 0 },
                 { arg: 300, val: 1.7 },
                 { arg: 315, val: 0 },
                 { arg: 330, val: 1.7 },
                 { arg: 360, val: 0 }];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [{ type: 'line' }],
        legend: { visible: false },
        valueAxis: {
            constantLines: [
                { value: 1.7 }
            ],
        },
        argumentAxis: {
            constantLines: [
                { value: 30, label: { text: '30 &degC' } },
                { value: 60, label: { text: '60 &degC' } },
                { value: 120, label: { text: '120 &degC' } },
                { value: 150, label: { text: '150 &degC' } },
                { value: 210, label: { text: '210 &degC' } },
                { value: 240, label: { text: '240 &degC' } },
                { value: 300, label: { text: '300 &degC' } },
                { value: 330, label: { text: '330 &degC' } }
            ]
        },
        commonAxisSettings: {
            constantLineStyle: {
                label: {
                    visible: true
                }
            }
        }
    });

    $('#visibleLabelsCheckbox').change(function () {
        var chart = $('#chartContainer').dxPolarChart('instance');
        chart.option({
            commonAxisSettings: {
                constantLineStyle: {
                    label: { visible: this.checked }
                }
            }
        });
    });
});