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 argument axis constant line labels are drawn in the rosybrown color.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { 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 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
            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 argument axis constant line labels is changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { 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 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
            constantLineStyle: {
                label: {
                    font: {
                        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 at the bottom to change the visibility of the argument axis' 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 argument axis constant line labels
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { 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 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
            constantLineStyle: {
                label: {
                    font: {
                        color: 'rosybrown'
                    }
                }
            }
        }
    });

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