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,
            majorTick: { 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,
            majorTick: { color: 'black' },
            minorTick: {
                visible: true,
                color: 'dodgerblue'
            }
        },
        value: 321
    });
});

customTickValues

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.

Show Example:
jQuery

In this example, the scale's minor ticks are generated on the base of the Fibonacci sequence. An array with this sequence is assigned to the customTickValues option. In addition, the automatically calculated minor ticks are concealed by setting the showCalculatedTicks option to false.

<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: 100,
            majorTick: {
                tickInterval: 25,
                color: 'black'
            },
            minorTick: {
                visible: true,
                color: 'black',
                customTickValues: [0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89],
                showCalculatedTicks: false
            }
        },
        value: 55
    });
});

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,
            majorTick: { color: 'black' },
            minorTick: {
                visible: true,
                color: 'black',
                length: 2
            }
        },
        value: 441
    });
});

showCalculatedTicks

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.

Show Example:
jQuery

In this example, several custom minor ticks based on the Fibonacci sequence are generated in addition to those ticks, which are calculated automatically. You can change the visibility of the automatically calculated minor ticks by toggling the check box under the gauge.

<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="showCalculatedTicksCheckbox"> showCalculatedTicks
</div>

$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'white' },
        valueIndicator: { color: 'mediumslateblue' },
        scale: {
            startValue: 0,
            endValue: 100,
            majorTick: {
                color: 'black',
                tickInterval: 25
            },
            minorTick: {
                visible: true,
                color: 'black',
                customTickValues: [0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89],
                showCalculatedTicks: false
            }
        },
        value: 55
    });

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

tickInterval

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.

Show Example:
jQuery

In this example, the scale's minor ticks are generated with an interval of 2.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        valueIndicator: { type: 'circle' },
        scale: {
            startValue: 0,
            endValue: 100, 
            minorTick: {
                visible: true,
                tickInterval: 2
            }
        },
        value: 56
    });
});

visible

Indicates whether scale minor ticks are visible or not.

Type: Boolean
Default Value: false

When this property is set to false, both the minor ticks that are automatically calculated and the minor ticks that are specifically set (see customTickValues) become invisible. To hide the automatically calculated major ticks only, set the showCalculatedTicks property to false.

Show Example:
jQuery

In this example, the scale contains both the custom and 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: {
                customTickValues: [34, 42, 64, 12, 13],
                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,
            majorTick: { color: 'black' },
            minorTick: {
                visible: true, 
                color: 'black',
                width: 3
            }
        },
        value: 632
    });
});