commonAxisSettings minorTick

Specifies the options of the minor ticks.

Type: Object

In addition to major ticks, the dxPolarChart widget provides the capability to draw minor ticks. Minor ticks divide an axis segment that lies between two neighboring major ticks. To specify how to generate minor ticks, use the minorTickInterval or minorTickCount options.

To configure the appearance of minor ticks, use the options of the minorTick object. Declared within the commonAxisSettings object, the minorTick object sets options for all minor ticks. To change the appearance of the minor ticks that belong to the argument or value axis individually, declare the minorTick object in the argumentAxis or valueAxis object respectively. Settings specified individually override those that are set in the commonAxisSettings object.

By default, minor ticks are hidden. To make them visible, assign true to the visible option of the minorTick object. Additionally, you can change the color, opacity and width of the minor ticks using the corresponding options.

NOTE: Minor ticks cannot be displayed on a discrete axis.

Show Example:
jQuery

In this example, the minor 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: {
            minorGrid: {visible: false},
            minorTick: {
                visible: true,
                color: 'blue',
                width: 2
            }
        }
    });
});

color

Specifies a color for the minor ticks.

Type: String
Default Value: '#d3d3d3'

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

length

Specifies minor tick length.

Type: Number
Default Value: 8

opacity

Specifies an opacity for the minor ticks.

Type: Number
Default Value: undefined

Show Example:
jQuery

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

visible

Indicates whether or not the minor ticks are displayed on an axis.

Type: Boolean
Default Value: false

Show Example:
jQuery

Use the check box at the bottom to change the visibility of the minor 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 minor 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: {
            minorGrid: {visible: false},
            minorTick: {
                visible: true,
                color: 'blue',
                width: 2
            }
        }
    });

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

width

Specifies minor tick width.

Type: Number
Default Value: 1