label 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
            }
        }
    });
});

color

Specifies a font color for a constant line label.

Type: String
Default Value: '#767676'

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the font color of the constant line labels is changed to olive.

<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: 'yellowgreen',
                dashStyle: 'longdash',
                width: 2,
                label: {
                    font: { color: 'olive' }
                }
            }
        }
    });
});

family

Specifies a font family for a constant line label.

Type: String
Default Value: "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana"

For details on acceptable values, refer to the Font family article.

Show Example:
jQuery

In this example, the font family of 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: 'yellowgreen',
                dashStyle: 'longdash',
                width: 2,
                label: {
                    font: { family: 'Zapf-Chancery, cursive' }
                }
            }
        }
    });
});

opacity

Specifies the font opacity for a constant line label.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the font opacity of the constant line labels is changed to 0.85.

<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: {
                opacity: 0.85
            }
        }
    });
});

size

Specifies the font size for a constant line label.

Type: Number|String
Default Value: 12

For details on acceptable values, refer to the Font size article.

Show Example:
jQuery

In this example, the font size of the constant line labels is changed to 16.

<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: {
                size: 16
            }
        }
    });
});

weight

Specifies the font weight for a constant line label.

Type: Number
Default Value: 400

Show Example:
jQuery

In this example, the font weight of the constant line labels is changed to 700.

<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: {
                weight: 700
            }
        }
    });
});