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, font color for the value axis constant line labels are changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4
            }, {
                value: 6
            }],
            constantLineStyle: {
                color: "#5f8b95",
                dashStyle: "dash",
                label: {
                    font: { color: "#5f8b95" }
                }
            }
        }
    });
});

font

Specifies font options for a constant line label.

Type: Object

Show Example:
jQuery

In this example, several font options for the value axis constant line labels are changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4,
                label: {
                    text: "4 days"
                }
            }, {
                value: 6,
                label: {
                    text: "6 days"
                }
            }],
            constantLineStyle: {
                color: "#ba4d51",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#ba4d51",
                        size: 16
                    },
                }
            }
        }
    });
});

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 value 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 value axis constant line labels
</div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4
            }, {
                value: 6
            }],
            constantLineStyle: {
                color: "#5f8b95",
                dashStyle: "dash",
                label: {
                    font: { color: "#5f8b95" },
                    visible: true
                }
            }
        }
    });

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