label font

Specifies font options for axis labels.

Type: Object

color

Specifies the font color for axis labels.

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, axes labels text is colored in black.

<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
        },
        commonAxisSettings: {
            label: {
                font: { color: 'black' }
            }
        }
    });
});

family

Specifies the font family for axis labels.

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 labels' text is altered for both the argument and value axes.

<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
        },
        commonAxisSettings: {
            label: {
                font: {
                    family: 'Zapf-Chancery, cursive'
                }
            }
        }
    });
});

opacity

Specifies the font opacity for axis labels.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the opacity option of the axes labels is set to 1.

<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
        },
        commonAxisSettings: {
            label: {
                font: { opacity: 1 }
            }
        }
    });
});

size

Specifies the font size for axis labels.

Type: Number|String
Default Value: 12

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

Show Example:
jQuery

In this example, the axes labels' text is enlarged up to the size of 14 pixels.

<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
        },
        commonAxisSettings: {
            label: {
                font: { size: 14 }
            }
        }
    });
});

weight

Specifies the font weight for axis labels.

Type: Number
Default Value: 400

Show Example:
jQuery

In this example, the weight option of the labels' text is altered to 700 for both the argument and value axes.

<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
        },
        commonAxisSettings: {
            label: {
                font: { weight: 700 }
            }
        }
    });
});