commonAxisSettings tick

An object defining the configuration options for axis ticks.

Type: Object

Ticks divide an axis into equal sections by a step whose value is determined automatically, or by the tickInterval and axisDivisionFactor options of an axis. Ticks improve the readability of charts, but are not visible in the PolarChart widget by default. To set up tick configuration options, define the tick object within the argumentAxis or valueAxis configuration object. To set common options for all ticks in a chart, define the tick object within the commonAxisSettings configuration object. Note that the values that are set for an individual axis override the corresponding common values.

Show Example:
jQuery

In this example, the axis ticks are visible with the color option set to 'blue' and width option set to 2.

<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: {
            tick: {
                visible: true,
                color: 'blue',
                width: 2
            }
        }
    });
});

color

Specifies ticks color.

Type: String
Default Value: '#d3d3d3'

This option supports the following colors.

Show Example:
jQuery

In this example, the axis ticks are blue.

<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: {
            tick: {
                color: 'blue',
                visible: true
            }
        }
    });
});

length

Specifies tick length.

Type: Number
Default Value: 8

opacity

Specifies tick opacity.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the opacity option of the axis ticks 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: {
            tick: {
                visible: true,
                color: 'blue',
                opacity: 1
            }
        }
    });
});

visible

Indicates whether or not ticks are visible on an axis.

Type: Boolean
Default Value: true

Show Example:
jQuery

Use the check box at the bottom to change the visibility of the axis ticks.

<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="visibleTicksCheckbox" checked> Show axis ticks
</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: {
            tick: {
                visible: true,
                color: 'blue',
                width: 2
            }
        }
    });

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

width

Specifies tick width.

Type: Number
Default Value: 1