commonAxisSettings label

An object defining the label configuration options that are common for all axes in the PolarChart widget.

Type: Object

Axis labels represent textual values for axis ticks, which are not visible by default. Use the label object's properties to set common label options for all axes simultaneously.

To set a common option for labels of a particular axis, use the label object within the argumentAxis or valueAxis configuration object. The values that are set individually override the corresponding common values.

Show Example:
jQuery

In this example, the axes label 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 }
            }
        }
    });
});

font

Specifies font options for axis labels.

Type: Object

Show Example:
jQuery

In this example, the text of the axes labels is colored in black and enlarged up to the size of 15 pixels.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
$(function () {
    $("#chartContainer").dxPolarChart({
        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 }],
        series: [{ type: "line" }],
        legend: {
            visible: false
        },
        commonAxisSettings: {
            label: {
                font: { color: 'black', size: 15 }
            }
        }
    });
});

indentFromAxis

Specifies the spacing between an axis and its labels in pixels.

Type: Number
Default Value: 5

IdentFromAxis ChartJS

overlappingBehavior

Specifies the overlap resolving algorithm to be applied to axis labels.

Type: String
Default Value: 'enlargeTickInterval'
Accepted Values: 'ignore' | 'enlargeTickInterval'

When labels overlap each other, you can specify how these labels will be displayed by setting the overlappingBehavior option.

The following values are possible.

  • ignore
    Leave the labels overlapped.
  • enlargeTickInterval
    Leave the labels as they are, but enlarge the axis tick intervals so that the labels do not overlap.

visible

Indicates whether or not axis labels are visible.

Type: Boolean
Default Value: true

Show Example:
jQuery

Use the check box at the bottom to change the visibility of the axes 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 axes 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
        }
    });

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