scale minorTick

Specifies options of the gauge's minor ticks.

Type: Object

Major and minor ticks are calculated automatically based on the scale's startValue and endValue property values. Major ticks are made visible by default. You can make minor tick visible as well, using their visible property. In addition, you can set a custom minor tick interval or add custom minor ticks using the tickInterval and customTickValues properties respectively. You can also specify the length, width and color of the minor ticks using corresponding properties.

View Demo

Show Example:
jQuery

In this example, the scale's minor ticks are colored in black and downscaled to 1 pixel. These ticks are generated with an interval of 5.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'white' },
        valueIndicator: { color: 'wheat' },
        scale: {
            startValue: 0,
            endValue: 1000,
            tick: { color: 'black' },
            minorTick: {
                visible: true,
                color: 'black',
                length: 1,
                tickInterval: 5
            }
        },
        value: 456
    });
});

color

Specifies the color of the scale's minor ticks.

Type: String
Default Value: '#FFFFFF'

This option supports the following colors.

Show Example:
jQuery

In this example, the scale's minor ticks are colored in dodgerblue.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'white' },
        valueIndicator: { color: 'mediumaquamarine' },
        scale: {
            startValue: 0,
            endValue: 1000,
            tick: { color: 'black' },
            minorTick: {
                visible: true,
                color: 'dodgerblue'
            }
        },
        value: 321
    });
});

customTickValues

Deprecated

Use the customMinorTicks option instead.

Specifies an array of custom minor ticks.

Type: Array
Default Value: []
Cannot be used in themes.

If you need to show minor ticks, set the visible property to true. If there are no calculated minor ticks at particular scale values, you can set them using the customTickValues property. Assign an array of custom tick values to this property. To show the custom minor ticks only, set the showCalculatedTicks property to false.

length

Specifies the length of the scale's minor ticks.

Type: Number
Default Value: 3

Show Example:
jQuery

In this example, the scale's minor ticks are colored in black and downscaled to 2 pixels.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'white' },
        valueIndicator: { color: 'skyblue' },
        scale: {
            startValue: 0,
            endValue: 1000,
            tick: { color: 'black' },
            minorTick: {
                visible: true,
                color: 'black',
                length: 2
            }
        },
        value: 441
    });
});

opacity

Specifies the opacity of the scale's minor ticks.

Type: Number
Default Value: 1

showCalculatedTicks

Deprecated

This feature is no longer available.

Indicates whether automatically calculated minor ticks are visible or not.

Type: Boolean
Default Value: true

Set this property to false when you only need custom minor ticks to be visible. The ticks that are calculated based on the specified tickInterval or based on a default tick interval will become invisible.

tickInterval

Deprecated

Use the minorTickInterval option instead.

Specifies an interval between minor ticks.

Type: Number
Default Value: undefined

Major ticks are those that are accompanied by labels, which display the corresponding scale values. Minor ticks are the intermediate ticks between major ticks. Minor ticks are required when the major ticks are arranged far from each other. To set a custom minor tick interval, use the minorTickInterval property. If this property is not set, minor ticks are arranged automatically.
You can also add custom minor ticks by manually assigning an array of their values to the customTickValues property.

visible

Indicates whether scale minor ticks are visible or not.

Type: Boolean
Default Value: false

Show Example:
jQuery

In this example, the scale contains automatically calculated minor ticks. Toggle the check box below to show/hide all the minor ticks.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0px auto"></div>
<div id="checkboxContainer" style="height:20px;width:300px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="showMinorTicksCheckbox" checked> Show Minor Ticks
</div>

$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'orangered' },
        valueIndicator: { color: 'burlywood' },
        scale: {
            startValue: 0,
            endValue: 100,
            minorTick: {
                visible: true
            }
        },
        value: 34
    });

    $('#showMinorTicksCheckbox').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            scale: {
                minorTick: {
                    visible: this.checked
                }
            }
        });
    });
});

width

Specifies the width of the scale's minor ticks.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the scale's major ticks are broadened up to 3 pixels.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'white' },
        valueIndicator: { color: 'olivedrab' },
        scale: {
            startValue: 0,
            endValue: 1000,
            tick: { color: 'black' },
            minorTick: {
                visible: true, 
                color: 'black',
                width: 3
            }
        },
        value: 632
    });
});