chart valueAxis

Specifies options for the chart's value axis.

Type: Object

The dxRangeSelector's chart is displayed without the value axis, and without the axis' ticks, labels, grids and strips, respectively. You can invert the value axis so that the chart series are inverted. In addition, you can specify the required minimum and maximum axis values only. To set these options, use the properties of the valueAxis configuration object.

Show Example:
jQuery

In this example, the chart displayed in the background is inverted. In addition, the min and max options are set.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: [
            { x: 10, y1: 0, y2: 10 },
            { x: 15, y1: 6, y2: 12 },
            { x: 20, y1: 8, y2: 15 },
            { x: 30, y1: 10, y2: 10 },
            { x: 50, y1: 16, y2: 5 },
            { x: 150, y1: 12, y2: 6 },
            { x: 180, y1: 8, y2: 10 }
        ],
        chart: {
            commonSeriesSettings: {
                argumentField: 'x',
                type: 'line'
            },
            series: [
                { valueField: 'y1' },
                { valueField: 'y2' }
            ],
            valueAxis: {
                inverted: true,
                min: -2,
                max: 25
            }
        }
    });
});

inverted

Indicates whether the chart's value axis must be inverted.

Type: Boolean
Default Value: false
Accepted Values: true|false

When inverted, the minimum value of the value axis is placed at the top and the values increase as you approach the bottom of the chart, so that the maximum value appears at the bottom. As a result, the chart series are inverted.

Show Example:
jQuery

Toggle the check box below to invert the chart value axis.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>
<div id="checkboxContainer" style="height:20px;width:150px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="invertedCheckbox" checked> Invert Value Axis
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: [
            { x: 10, y1: 0, y2: 10 },
            { x: 15, y1: 6, y2: 12 },
            { x: 20, y1: 8, y2: 15 },
            { x: 30, y1: 10, y2: 10 },
            { x: 50, y1: 16, y2: 5 },
            { x: 150, y1: 12, y2: 6 },
            { x: 180, y1: 8, y2: 10 }
        ],
        chart: {
            commonSeriesSettings: {
                argumentField: 'x',
                type: 'line'
            },
            series: [
                { valueField: 'y1' },
                { valueField: 'y2' }
            ],
            valueAxis: {
                inverted: true
            }
        }
    });

    $("#invertedCheckbox").change(function () {
        var rangeSelector = $("#rangeSelectorContainer").dxRangeSelector("instance");
        rangeSelector.option({
            chart: {
                valueAxis: { inverted: this.checked }
            }
        });
    });
});

max

Specifies the maximum value of the chart's value axis.

Type: Number
Default Value: undefined

The value axis is generated automatically based on the specified data source. However, you can change the maximum and minimum values of the axis to display the chart's series in a smaller value range. Set the min and max properties to do this. You can also expand the value axis by setting the chart's topIndent and bottomIndent properties.

Show Example:
jQuery

In this example, the max option is set to 16.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: [
            { x: 10, y1: 0, y2: 10 },
            { x: 15, y1: 6, y2: 12 },
            { x: 20, y1: 8, y2: 15 },
            { x: 30, y1: 10, y2: 10 },
            { x: 50, y1: 16, y2: 5 },
            { x: 150, y1: 12, y2: 6 },
            { x: 180, y1: 8, y2: 10 }
        ],
        chart: {
            commonSeriesSettings: {
                argumentField: 'x',
                type: 'line'
            },
            series: [
                { valueField: 'y1' },
                { valueField: 'y2' }
            ],
            valueAxis: {
                max: 16
            }
        }
    });
});

min

Specifies the minimum value of the chart's value axis.

Type: Number
Default Value: undefined

The value axis is generated automatically based on the specified data source. However, you can change the maximum and minimum values of the axis to display the chart's series in a smaller value range. Set the max and min properties to do this. You can also expand the value axis by setting the chart's topIndent and bottomIndent properties.

Show Example:
jQuery

In this example, the min option is set to -10.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: [
            { x: 10, y1: 0, y2: 10 },
            { x: 15, y1: 6, y2: 12 },
            { x: 20, y1: 8, y2: 15 },
            { x: 30, y1: 10, y2: 10 },
            { x: 50, y1: 16, y2: 5 },
            { x: 150, y1: 12, y2: 6 },
            { x: 180, y1: 8, y2: 10 }
        ],
        chart: {
            commonSeriesSettings: {
                argumentField: 'x',
                type: 'line'
            },
            series: [
                { valueField: 'y1' },
                { valueField: 'y2' }
            ],
            valueAxis: {
                min: -10
            }
        }
    });
});

valueType

Specifies the desired type of axis values.

Type: String
Default Value: undefined
Accepted Values: 'numeric' | 'datetime' | 'string'

The type of the axis values is determined based on the type of the values specified in the corresponding data source field of the chart series. If numeric values are specified in the series data source, the axis values will also be of the numeric type. The same logic is used when string or date-time values are specified in the data source.

In some scenarios, you may need the type of values specified in the data source to be converted to another type. In this instance, specify the desired type for the axis values using the valueType property.