Configuration valueAxis

Specifies value axis options for the dxChart widget.

Type: Object|Array

For charting, the rectangular coordinate system is used to determine each point uniquely on a plane through two numbers, the argument and the value of the point. Two perpendicular lines (the axis of arguments and the axis of values) are specified to define the coordinates. To define the argument axis, use the argumentAxis configuration object. To define the value axis, use the valueAxis configuration object. When series are displayed on several panes, there should be a value axis for each pane defined. In addition, different series can be displayed using different value axes on one pane. In these instances, the valueAxis can be an array of objects representing values axes.

To set the properties of all axes to a common value, use the commonAxisSettings configuration object. It exposes properties that can be specified for all axes simultaneously. Note that the value specified for an axis individually (in the argumentAxis or valueAxis object) overrides the value that specified in the commonAxisSettings object.

Show Example:
jQuery

In this example, the value axis' axisDivisionFactor option is set to 15, and the minValueMargin and maxValueMargin options are set to 0.04.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            axisDivisionFactor: 15,
            valueMarginsEnabled: true,
            minValueMargin: 0.04,
            maxValueMargin: 0.04,
            visible: true
        }
    });
});

axisDivisionFactor

Specifies a coefficient for dividing the value axis.

Type: Number
Default Value: 30

The value axis is divided by default so that the labels corresponding to the ticks/grid lines do not overlap each other. If you need to make the axis tick interval larger or smaller, use the axisDivisionFactor property. This property value is a coefficient used internally to calculate the distance between axis labels. This allows you to set axis division without knowledge of the actual axis values.

NOTE: This property is used for continuous value axes only.

Show Example:
jQuery

In the example below, the value axis' axisDivisionFactor option is set to 15.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            axisDivisionFactor: 15,
            visible: true
        }
    });
});

categories

Specifies the order in which discrete values are arranged on the value axis.

Type: Array

If you specify the chart's data using a common array of objects, these objects may be displayed in a random order. If you set the Chart's data for each series individually, the order in which the series are positioned in the series array can also be random. In these instances, the resulting value order on the discrete value axis may not be appropriate. To specify the order of categories (values on a discrete value axis), assign an array of category names to the categories property.

Show Example:
jQuery

This example shows how to use the categories option for ordering values. The required order is specified in the array assigned to the value axis' categories option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1952, name: 'Dwight D. Eisenhower', party: 'republican' },
    { year: 1956, name: 'Dwight D. Eisenhower', party: 'republican' },
    { year: 1960, name: 'John F. Kennedy', party: 'democratic' },
    { year: 1964, name: 'Lyndon B. Johnson', party: 'democratic' },
    { year: 1968, name: 'Richard Nixon', party: 'republican' },
    { year: 1972, name: 'Richard Nixon', party: 'republican' },
    { year: 1976, name: 'Jimmy Carter', party: 'democratic' },
    { year: 1980, name: 'Ronald Reagan', party: 'republican' },
    { year: 1984, name: 'Ronald Reagan', party: 'republican' },
    { year: 1988, name: 'George H. W. Bush', party: 'republican' },
    { year: 1992, name: 'Bill Clinton', party: 'democratic' },
    { year: 1996, name: 'Bill Clinton', party: 'democratic' },
    { year: 2000, name: 'George W. Bush', party: 'republican' },
    { year: 2004, name: 'George W. Bush', party: 'republican' },
    { year: 2008, name: 'Barack Obama', party: 'democratic' },
    { year: 2012, name: 'Barack Obama', party: 'democratic' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            valueField: 'party',
            type: 'spline',
            tagField: 'name'
        },
        series: {},
        title: 'Winners of the Untited States presidential elections',
        tooltip: {
            enabled: true,
            customizeText: function (hoveredPoint) {
                return hoveredPoint.argument + ' - ' + hoveredPoint.point.tag
            }
        },
        legend: { visible: false },
        argumentAxis: {
            grid: { visible: true },
            tickInterval: 4,
            valueMarginsEnabled: false
        },
        valueAxis: {
            type: 'discrete',
            categories: ['democratic', 'republican'],
            label: { rotationAngle: -90 }
        }
    });
});

color

Specifies the color of the line that represents an axis.

Type: String
Default Value: 'rgba(128,128,128,0.35)'

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 value axis is green.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            visible: true,
            color: 'green'
        }
    });
});

discreteAxisDivisionMode

Specifies whether ticks/grid lines of a discrete axis are located between labels or cross the labels.

Type: String
Default Value: 'betweenLabels'
Accepted Values: 'betweenLabels' | 'crossLabels'

When a discrete axis is divided, its ticks/grid lines are located between labels by default. If this is not appropriate, use the discreteAxisDivisionMode property to set the required mode for positioning ticks and grid lines on a discrete axis.

Show Example:
jQuery

In the following example, you can note the difference between two modes of positioning ticks and grid lines on a discrete axis. Use the drop-down list in the bottom to change the value of the discreteAxisDivisionMode option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    discreteAxisDivisionMode:
    <select id="dropdownListSelector">
        <option value="betweenLabels">betweenLabels</option>
        <option value="crossLabels">crossLabels</option>
    </select>
</div>
var dataSource = [
    { year: 1952, name: 'Dwight D. Eisenhower', party: 'republican' },
    { year: 1956, name: 'Dwight D. Eisenhower', party: 'republican' },
    { year: 1960, name: 'John F. Kennedy', party: 'democratic' },
    { year: 1964, name: 'Lyndon B. Johnson', party: 'democratic' },
    { year: 1968, name: 'Richard Nixon', party: 'republican' },
    { year: 1972, name: 'Richard Nixon', party: 'republican' },
    { year: 1976, name: 'Jimmy Carter', party: 'democratic' },
    { year: 1980, name: 'Ronald Reagan', party: 'republican' },
    { year: 1984, name: 'Ronald Reagan', party: 'republican' },
    { year: 1988, name: 'George H. W. Bush', party: 'republican' },
    { year: 1992, name: 'Bill Clinton', party: 'democratic' },
    { year: 1996, name: 'Bill Clinton', party: 'democratic' },
    { year: 2000, name: 'George W. Bush', party: 'republican' },
    { year: 2004, name: 'George W. Bush', party: 'republican' },
    { year: 2008, name: 'Barack Obama', party: 'democratic' },
    { year: 2012, name: 'Barack Obama', party: 'democratic' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            valueField: 'party',
            type: 'spline',
            tagField: 'name'
        },
        animation: false,
        series: {},
        title: 'Winners of the Untited States presidential elections',
        tooltip: {
            enabled: true,
            customizeText: function (hoveredPoint) {
                return hoveredPoint.argument + ' - ' + hoveredPoint.point.tag
            }
        },
        legend: { visible: false },
        argumentAxis: {
            grid: { visible: true },
            tickInterval: 4,
            valueMarginsEnabled: false
        },
        valueAxis: {
            type: 'discrete',
            label: { rotationAngle: -90 }
        }
    });

    $("#dropdownListSelector").change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            valueAxis: { discreteAxisDivisionMode: this.value }
        });
    });
});

grid

An object defining the configuration options for the grid lines of an axis in the dxChart widget.

Type: Object

Grid lines are the reference lines used to improve the readability of a chart's visual data. Grid lines are drawn from axis ticks throughout the entire chart. The grid object exposes the properties that allow you to specify visibility and appearance settings for axis grid lines. To learn more about axis grid lines and their options, refer to the Grid topic.

Show Example:
jQuery

In this example, the value axis gridlines are displayed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            grid: { visible: true }
        }
    });
});

inverted

Indicates whether or not an axis is inverted.

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

When an axis is inverted, the maximum and minimum values are reversed. As a result, the axis values increase in a direction that is opposite to the initial direction. The chart series are also inverted.

Show Example:
jQuery

Use the check box at the bottom to invert the value axis.

<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;text-align:center">
    <input type="checkbox" id="invertedCheckbox"> Inverted Value Axis
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            grid: { visible: true }
        }
    });

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

label

Specifies options for value axis labels.

Type: Object

Axis labels represent textual values for axis ticks, which are not visible by default. To specify custom settings for the value axis labels, use the label configuration object. If you need to set a common value for labels on all axes, use the commonAxisSettings | label configuration object. This object exposes the properties that can be specified for labels on all axes simultaneously. Note that a value specified for the value axis individually (in the valueAxis | label object) overrides the value that is specified in the commonAxisSettings | label object.

Show Example:
jQuery

In this example, additional text is added to the value axis labels using the customizeText option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            label: {
                customizeText: function (value) {
                    return value.value + ' mln'
                }
            },
            visible: true
        }
    });
});

max

Specifies the maximum value on the value axis.

Type: Number
Default Value: undefined

Use the max property to set a custom maximum value for the value axis. You can also set a custom minimum value for the value axis using the min property. If you do not specify these properties, the maximum and minimum values on the value axis correspond to the maximum and minimum values in the chart's data.

If you need to extend the limit values for the value axis, set the valueMarginsEnabled property to true and specify the minValueMargin and maxValueMargin properties (if the axis is continuous). In this instance, the series will be indented from the maximum and minimum axis boundaries.

Show Example:
jQuery

The following example illustrates how to display a portion of the chart using the value axis' min and max options.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { time: 10, car1: 110, car2: 104, car3: 112 },
    { time: 20, car1: 130, car2: 124, car3: 132 },
    { time: 30, car1: 143, car2: 135, car3: 141 },
    { time: 40, car1: 157, car2: 159, car3: 160 },
    { time: 50, car1: 169, car2: 166, car3: 174 },
    { time: 60, car1: 181, car2: 180, car3: 185 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'time'
        },
        series: [
            { valueField: 'car1', name: 'Car #1' },
            { valueField: 'car2', name: 'Car #2' },
            { valueField: 'car3', name: 'Car #3' }
        ],
        argumentAxis: {
            label: {
                customizeText: function () {
                    return this.value + ' sec';
                }
            }
        },
        valueAxis: {
            visible: true,
            label: {
                customizeText: function () {
                    return this.value + ' mph';
                }
            },
            min: 120,
            max: 170
        }
    });
});

maxValueMargin

Specifies a coefficient for determining the maximum value's margin on an axis.

Type: Number
Default Value: 0.1

When the valueMarginsEnabled property is set to true, the axis is expanded from the min and max values. This is helpful when you need to display a series with indents from the axes. For continuous axes, you can set the maximum and minimum value margins. Use the maxValueMargin property to set how much to expand the axes from the max value. Since this property value is a coefficient, you can set a value for the axis expansion without knowledge of the actual axis values. The resulting end axis value is calculated using the following formula: max + (max - min)*maxValueMargin. Assume that min is 1960 and max is 2010. If you set maxValueMargin to 0.1, the resulting end axis value will be 2015.

MaxValueMargin ChartJS

min

Specifies the minimum value on the value axis.

Type: Number
Default Value: undefined

Use the min property to set a custom minimum value for the value axis. You can also set a custom maximum value for the value axis using the max property. If you do not specify these properties, the maximum and minimum values on the value axis correspond to the maximum and minimum values in the chart's data.

If you need to extend the boundary values for the value axis, set the valueMarginsEnabled property to true and specify the minValueMargin and maxValueMargin properties (if the axis is continuous). In this instance, the series will be indented from the maximum and minimum axis boundaries.

Show Example:
jQuery

The following example illustrates how to display a portion of the chart using the value axis' min and max options.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { time: 10, car1: 110, car2: 104, car3: 112 },
    { time: 20, car1: 130, car2: 124, car3: 132 },
    { time: 30, car1: 143, car2: 135, car3: 141 },
    { time: 40, car1: 157, car2: 159, car3: 160 },
    { time: 50, car1: 169, car2: 166, car3: 174 },
    { time: 60, car1: 181, car2: 180, car3: 185 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'time'
        },
        series: [
            { valueField: 'car1', name: 'Car #1' },
            { valueField: 'car2', name: 'Car #2' },
            { valueField: 'car3', name: 'Car #3' }
        ],
        argumentAxis: {
            label: {
                customizeText: function () {
                    return this.value + ' sec';
                }
            }
        },
        valueAxis: {
            visible: true,
            label: {
                customizeText: function () {
                    return this.value + ' mph';
                }
            },
            min: 120,
            max: 170
        }
    });
});

minValueMargin

Specifies a coefficient for determining the minimum value's margin on an axis.

Type: Number
Default Value: 0.1

When the valueMarginsEnabled property is set to true, the axis is expanded beyond the max and min values. This is helpful when you need to display the series with indents from the axes. For a continuous argument axis, you can set the maximum and minimum value margins. Use the minValueMargin property to set how much to expand the axes beyond the min value. Since this property value is a coefficient, you can set a value for the axis expansion without knowledge of the actual axis values. The resulting start axis value is calculated using the following formula: min - (max - min)*minValueMargin. Assume that min is 1960 and max is 2010. If you set minValueMargin to 0.1, the resulting start axis value will be 1955.

MinValueMargin ChartJS

multipleAxesSpacing

Specifies the spacing, in pixels, between multiple value axes in a chart.

Type: Number
Default Value: 5

Use this option when you have several value axes placed on one side, and the default spacing between them is not appropriate. When set for a valueAxis object, this option specifies the spacing between the axis line and the labels of the axis that is closest to the plot. Thus, there will be no effect if you set this option for the first axis (closest to the plot). You can also set this option for the commonAxisSettings object. In this instance, equal spacing will be set between all the value axes. To learn how to implement multi-axis mode, refer to the Multi-Axis Chart topic.

NOTE: If you set an axis placeholderSize that is wider than required for the axis labels, the multipleAxesSpacing will be the spacing between the axis line and the placeholder of the axis that is closest to the plot.

MultipleAxesSpacing ChartJS

name

Specifies the name of the value axis.

Type: String
Default Value: undefined

Specify the name of a value axis when displaying several value axes on a single pane. Use the specified axis name when setting the axis property of a series. In this instance, the data source of the series will be used to create the related axis.

Show Example:
jQuery

In this example, different names are assigned to each value axis using the name option. These names are used in code to identify the axes.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'fullstackedbar',
            axis: 'percentAxis'
        },
        series: [
            { valueField: 'oceania' },
            { valueField: 'africa' },
            { valueField: 'asia' },
            { valueField: 'europe' },
            { valueField: 'latinamerica' },
            { valueField: 'northamerica' },
            {
                axis: 'valueAxis',
                type: 'spline',
                valueField: 'total',
                color: 'blue'
            }
        ],
        valueAxis: [{
            name: 'percentAxis'
        }, {
            name: 'valueAxis',
            label: {
                format: 'largeNumber'
            }
        }],
        legend: { visible: false }
    });
});

opacity

Specifies the opacity of the line that represents an axis.

Type: Number
Default Value: 0.35

Show Example:
jQuery

In this example, the value axis' opacity option is set to 1.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            visible: true,
            opacity: 1
        }
    });
});

placeholderSize

Specifies, in pixels, the space reserved for an axis.

Type: Number
Default Value: null

The scale's height includes the space occupied by the axis labels, axis line and the space between the axis labels and axis line.

AxisPlaceholder ChartJS

position

Specifies the position of the value axis on a chart.

Type: String
Default Value: 'left'
Accepted Values: 'right' | 'left' | 'top' | 'bottom'

The 'left' and 'right' values are appropriate when the value axis is vertical. The 'top' and 'bottom' values are appropriate when the value axis is horizontal. To make the value axis horizontal, use the chart's rotated property.

Show Example:
jQuery

In the example below, the value axis is placed on the right side using the position option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { time: 10, car1: 110, car2: 104, car3: 112 },
    { time: 20, car1: 130, car2: 124, car3: 132 },
    { time: 30, car1: 143, car2: 135, car3: 141 },
    { time: 40, car1: 157, car2: 159, car3: 160 },
    { time: 50, car1: 169, car2: 166, car3: 174 },
    { time: 60, car1: 181, car2: 180, car3: 185 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'time'
        },
        series: [
            { valueField: 'car1', name: 'Car #1' },
            { valueField: 'car2', name: 'Car #2' },
            { valueField: 'car3', name: 'Car #3' }
        ],
        argumentAxis: {
            label: {
                customizeText: function () {
                    return this.value + ' sec';
                }
            }
        },
        valueAxis: {
            position: 'right'
        }
    });
});

setTicksAtUnitBeginning

Indicates whether to set ticks/grid lines of a continuous axis of the 'date-time' type at the beginning of each date-time interval.

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

This property is used when a continuous axis of the 'date-time' value type is divided. If this property is set to true, axis ticks/grid lines are set at the beginning of date-time units (months, days, years, etc.). The following examples will help you understand the logic:

Tick Interval Start Value Ticks Generated
2 hours 11 (h) : 35 (min) : 25 (s) : 10 (ms) "13 (h) : 00 (min) : 00 (s) : 00 (ms)"; "15 (h): 00 (min) : 00 (s) : 00 (ms)"; ...
2 days 6 (d) : 11 (h) : 35 (min) "8 (d) : 00 (h) : 00 (min)"; "10 (d) : 00 (h) : 00 (min)"; ...
2 months March : 13 (d) "May : 0 (d)"; "July: 0 (d)"; ...

The values that will be generated for the axis can be formatted using the format property (see Data Formatting).

Show Example:
jQuery

In the example below, you can spot the difference between two modes of arranging ticks/grid lines. Use the check box in the bottom to change the value of the setTicksAtUnitBeginning option.

<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;text-align:center">
    <input type="checkbox" id="setTicksAtUnitBeginningCheckbox" checked> setTicksAtUnitBeginning
</div>
var dataSource = [
    { name: 'L. Soulie', start: new Date(2011, 11, 1, 17, 15, 30), finish: new Date(2011, 11, 1, 18, 09, 08, 50) },
    { name: 'L. Spector', start: new Date(2011, 11, 1, 17, 16, 00), finish: new Date(2011, 11, 1, 18, 14, 11, 70) },
    { name: 'S. Solemdal', start: new Date(2011, 11, 1, 17, 16, 30), finish: new Date(2011, 11, 1, 18, 07, 11, 90) },
    { name: 'M. Dorin-Habert', start: new Date(2011, 11, 1, 17, 17, 00), finish: new Date(2011, 11, 1, 18, 07, 18, 60) },
    { name: 'W. Nowakowska-Ziemniak', start: new Date(2011, 11, 1, 17, 17, 30), finish: new Date(2011, 11, 1, 18, 12, 22, 70) },
    { name: 'O. Vilukhina', start: new Date(2011, 11, 1, 17, 18, 00), finish: new Date(2011, 11, 1, 18, 10, 10, 30) },
    { name: 'V. Semerenko', start: new Date(2011, 11, 1, 17, 18, 30), finish: new Date(2011, 11, 1, 18, 08, 37, 20) },
    { name: 'A. Kuzmina', start: new Date(2011, 11, 1, 17, 19, 00), finish: new Date(2011, 11, 1, 18, 08, 57, 70) },
    { name: 'H. Ekholm', start: new Date(2011, 11, 1, 17, 19, 30), finish: new Date(2011, 11, 1, 18, 09, 13, 10) },
    { name: 'A. Cyl', start: new Date(2011, 11, 1, 17, 20, 00), finish: new Date(2011, 11, 1, 18, 11, 48, 20) }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'name',
            type: 'rangeBar'
        },
        series: [{
            rangeValue1Field: 'start', rangeValue2Field: 'finish'
        }],
        animation: false,
        title: {
            text: 'Biathlon World Cup Individual Competition. Racing time',
            font: { size: 18 }
        },
        legend: { visible: false },
        argumentAxis: {
            label: { overlappingBehavior: 'rotate' }
        },
        valueAxis: {
            label: { format: 'longTime' },
            tickInterval: { minutes: 5 },
            valueMarginsEnabled: false,
            setTicksAtUnitBeginning: true
        }
    });

    $("#setTicksAtUnitBeginningCheckbox").change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            valueAxis: { setTicksAtUnitBeginning: this.checked }
        });
    });
});

strips[]

Specifies options for value axis strips.

Type: Array

Strips are the highlighted areas in a chart within the defined range of values (minimum and maximum) for an axis to which they belong. In general, strips are used to visually represent a range of values behind a series to trace whether the series points' values fall in or out of that range. For more details on strips, refer to the Strips topic.

To define strips for the value axis, use the strips array. When a strip's startValue, endValue and color properties are specified, the strip is displayed in a chart. In addition, you can show a label with descriptive information on a strip. To set the text for a label, use the strip's label object.

If you need to set similar values for all strips of all axes, use the commonAxisSettings | stripStyle configuration object. It exposes the properties that can be specified for strips of all axes at once. Note that the values specified for the value axis individually (in the valueAxis | strips object) override the values that are specified for all axes (in the commonAxisSettings | stripStyle object).

Show Example:
jQuery

In this example, the value axis strips are defined and colored in a custom color.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            strips: [
                { startValue: 200, endValue: 250, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 700, endValue: 900, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 1900, endValue: 2000, color: 'rgba(68, 100, 213, 0.2)' }
            ]
        }
    });
});

stripStyle

An object defining configuration options for strip style.

Type: Object

Strips are the highlighted areas of a chart within a defined range of values (maximum and minimum) for an axis to which they belong. In general, strips are used to visually represent a range of values behind a series, to trace whether the series point values fall in or out of that range. For more details on strips, refer to the Strips topic.

To set options for configuring strip style, define the stripStyle object within the argumentAxis or valueAxis configuration object. To set common options for all strips in a chart, define the stripStyle 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 the example below, the strip label text is blue.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            strips: [{
                startValue: 200, endValue: 350, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Lowest' }
            }, {
                startValue: 700, endValue: 900, color: 'rgba(68, 100, 213, 0.2)'
            }, {
                startValue: 1800, endValue: 2000, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Highest' }
            }],
            stripStyle: {
                label: {
                    font: { color: 'blue' }
                }
            }
        }
    });
});

synchronizedValue

Specifies the value by which the chart's value axes are synchronized.

Type: Number
Default Value: undefined

Use this option to set a common value where the value axes cross the argument axis. For example, you can synchronize value axes at the zero value. To learn how to implement multi-axis mode, refer to the Multi-Axis Chart topic.

Show Example:
jQuery

In the example below, the synchronizedValue option is set to 0 for one of the value axes, and to 1000000000 for the other value axis. These are the values in which the value axes cross the argument axis.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
   { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
   { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
   { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
   { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
   { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'fullstackedbar',
            axis: 'percentAxis'
        },
        series: [{
            valueField: 'oceania'
        }, {
            valueField: 'africa'
        }, {
            valueField: 'asia'
        }, {
            valueField: 'europe'
        }, {
            valueField: 'latinamerica'
        }, {
            valueField: 'northamerica'
        }, {
            axis: 'valueAxis',
            type: 'spline',
            valueField: 'total',
            color: 'blue'
        }
        ],
        valueAxis: [{
            name: 'percentAxis',
            synchronizedValue: 0
        }, {
            name: 'valueAxis',
            label: {
                format: 'largeNumber'
            },
            synchronizedValue: 1000000000
        }],
        legend: { visible: false }
    });
});

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 dxChart 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 value axis' ticks are visible, with the opacity option set to 0.75.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            visible: true
        },
        valueAxis: {
            grid: { visible: false },
            tick: {
                visible: true,
                opacity: 0.75
            }
        }
    });
});

tickInterval

Specifies an interval between axis ticks/grid lines.

Default Value: undefined
Accepted Values: number|object|'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'

Use this property to divide the scale by ticks in a specified interval from each other. If this property is not set, ticks are automatically arranged so that their labels do not overlap each other.

In case of a numeric axis, assign a numeric value to this property. If the axis is of the date-time type, assign one of the predefined string values or an object to this property. The object's properties specify the number of days, hours etc.

NOTE: The specified tick interval can be changed internally if its value leads to label overlapping. If you need to prohibit automatic tick arrangement in this situation, set the axis's overlappingMode property.

To set the tickInterval property for several axis at once, use the commonAxisSettings configuration object. To set this property for an individual axis, use the argumentAxis or valueAxis configuration object.

Show Example:
jQuery

In the following example, the value axis tick interval is set to 0.2.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    {date: new Date(1994,2,1), low: 24.00, high: 25.00, open: 25.00, close: 24.875},
    {date: new Date(1994,2,2), low: 23.625, high: 25.125, open: 24.00, close: 24.875},
    {date: new Date(1994,2,3), low: 26.25, high: 28.25, open: 26.75, close: 27.00},
    {date: new Date(1994,2,4), low: 26.50, high: 27.875, open: 26.875, close: 27.25},
    {date: new Date(1994,2,7), low: 26.375, high: 27.50, open: 27.375, close: 26.75},
    {date: new Date(1994,2,8), low: 25.75,high:  26.875, open: 26.75, close: 26.00},
    {date: new Date(1994,2,9), low: 25.75, high: 26.75, open: 26.125, close: 26.25},
    {date: new Date(1994,2,10), low: 25.75, high: 26.375, open: 26.375, close: 25.875},
    {date: new Date(1994,2,11), low: 24.875, high: 26.125, open: 26.00, close: 25.375},
    {date: new Date(1994,2,14), low: 25.125, high: 26.00, open: 25.625, close: 25.75},
    {date: new Date(1994,2,15), low: 25.875, high: 26.625, open: 26.125, close: 26.375},
    {date: new Date(1994,2,16), low: 26.25, high: 27.375, open: 26.25, close: 27.25},
    {date: new Date(1994,2,17), low: 26.875, high: 27.25, open: 27.125, close: 26.875},
    {date: new Date(1994,2,18), low: 26.375, high: 27.125, open: 27.00, close: 27.125},
    {date: new Date(1994,2,21), low: 26.75, high: 27.875, open: 26.875, close: 27.75},
    {date: new Date(1994,2,22), low: 26.75, high: 28.375, open: 27.50, close: 27.00},
    {date: new Date(1994,2,23), low: 26.875, high: 28.125, open: 27.00, close: 28.00},
    {date: new Date(1994,2,24), low: 26.25, high: 27.875, open: 27.75, close: 27.625},
    {date: new Date(1994,2,25), low: 27.50, high: 28.75, open: 27.75, close: 28.00},
    {date: new Date(1994,2,28), low: 25.75, high: 28.25, open: 28.00, close: 27.25},
    {date: new Date(1994,2,29), low: 26.375, high: 27.50, open: 27.50, close: 26.875},
    {date: new Date(1994,2,30), low: 25.75, high: 27.50, open: 26.375, close: 26.25},
    {date: new Date(1994,2,31), low: 24.75, high: 27.00, open: 26.50, close: 25.25},
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'stock'
        },
        series: {},
        valueAxis: {
            tickInterval: 0.2,
            label: {
                format: 'fixedPoint',
                precision: 2
            }
        }
    });
});

title

Specifies the title for a value axis.

Type: Object

If you only wish to set the text for the axis title, assign the text to the title property directly. If you need to customize title options, set the text property and other properties of the title configuration object. For an overview of axis titles, refer to the Axis Titles topic.

If you need to set similar values for titles of all axes, use the commonAxisSettings | title configuration object. It exposes the properties that can be specified for titles of all axes at once. Note that the values specified for the value axis individually (in the valueAxis | title object) override the values that are specified for all axes (in the commonAxisSettings | title object).

To define a title for an individual value axis, use the properties listed in the valueAxis | title object. In addition, any property of the commonAxisSettings | title configuration object can be added to the individual definition of the value axis title. For example, even though a common margin is specified in the commonAxisSettings, an individual margin can be specified for each axis.

Show Example:
jQuery

In the example below, the value axis title text is assigned directly to the title field.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            title: 'Population, mln',
            axisDivisionFactor: 15,
            valueMarginsEnabled: true,
            minValueMargin: 0.04,
            maxValueMargin: 0.04,
            visible: true
        }
    });
});

type

Specifies the required type of the value axis.

Type: String
Default Value: undefined
Accepted Values: 'discrete' | 'continuous'

The 'discrete' type is set when string values are specified in the data source of the chart's series. The discrete value axis is divided by the values (called categories) that are specified in a series' data source. The categories order can be specified by the categories property, if the order used in the data source is not appropriate.

The 'continuous' type is set when numeric or date-time values are specified in the series data source. The continuous axis is divided automatically. Axis ticks and grid lines are positioned so that their labels do not overlap each other. In addition, you can set a custom maximum axis value (the max property), minimum axis value (the min property) and tick interval (the tickInterval or axisDivisionFactor properties).

If you require a discrete axis when numeric or date-time values are specified in the data source, set the type property to 'discrete'.

Show Example:
jQuery

This example shows a value axis of a discrete type, which is ordered using the categories option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(2011, 11, 3), neuner: 1, domracheva: 5, makarainen: 3 },
    { date: new Date(2011, 11, 9), neuner: 1, domracheva: 5, makarainen: 2 },
    { date: new Date(2011, 11, 16), neuner: 4, domracheva: 2, makarainen: '5+' },
    { date: new Date(2011, 11, 16), neuner: 4, domracheva: 2, makarainen: '5+' },
    { date: new Date(2012, 0, 6), neuner: 1, domracheva: 2, makarainen: 4 },
    { date: new Date(2012, 0, 13), neuner: 3, domracheva: '5+', makarainen: '5+' },
    { date: new Date(2012, 0, 19), neuner: 1, domracheva: 3, makarainen: 2 },
    { date: new Date(2012, 1, 2), neuner: 1, domracheva: 2, makarainen: '5+' },
    { date: new Date(2012, 1, 11), neuner: 1, domracheva: 3, makarainen: 2 },
    { date: new Date(2012, 2, 3), neuner: 1, domracheva: 2, makarainen: '5+' },
    { date: new Date(2012, 2, 16), neuner: 1, domracheva: 3, makarainen: 4 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'date',
            type: 'scatter'
        },
        series: [
            { valueField: 'neuner', name: 'Magdalena Neuner (GER)' },
            { valueField: 'domracheva', name: 'Darya Domracheva (BLR)' },
            { valueField: 'makarainen', name: 'Kaisa Mäkäräinen (FIN)' }
        ],
        title: 'Biathlon World Cup - Sprint Women - Year-End Top 3',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        argumentAxis: {
            type: 'discrete',
            label: {
                overlappingBehavior: 'ignore'
            },
            grid: { visible: true }
        },
        valueAxis: {
            title: 'Standings at Finish',
            type: 'discrete',
            categories: [1, 2, 3, 4, 5, '5+']
        }
    });
});

valueMarginsEnabled

Indicates whether to display series with indents from axis boundaries.

Type: Boolean
Default Value: true

For a continuous axis, you can specify how far to extend an axis from its maximum and minimum values. Use the axis' minValueMargin and maxValueMargin properties to do this.

Show Example:
jQuery

Use the check box at the bottom to enable/disable value margins for the value axis.

<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="valueMarginsCheckbox" checked> valueMarginsEnabled
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        commonAxisSettings: {
            grid: { visible: true }
        }
    });

    $('#valueMarginsCheckbox').change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            valueAxis: { valueMarginsEnabled: this.checked }
        });
    });
});

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's 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 the values that are 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.

Show Example:
jQuery

In this example, the 'start' and 'finish' fields of the 'dataSource' array are intentionally set in 'numeric' format. To display the values of these fields in 'datetime' format on the chart, the valueType option is used.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { name: 'L. Soulie', start: 1322745330000, finish: 1322748548050 },
    { name: 'L. Spector', start: 1322745360000, finish: 1322748851070 },
    { name: 'S. Solemdal', start: 1322745390000, finish: 1322748431090 },
    { name: 'M. Dorin-Habert', start: 1322745420000, finish: 1322748438060 },
    { name: 'W. Nowakowska-Ziemniak', start: 1322745450000, finish: 1322748742070 },
    { name: 'O. Vilukhina', start: 1322745480000, finish: 1322748610030 },
    { name: 'V. Semerenko', start: 1322745510000, finish: 1322748517020 },
    { name: 'A. Kuzmina', start: 1322745540000, finish: 1322748537070 },
    { name: 'H. Ekholm', start: 1322745570000, finish: 1322748553010 },
    { name: 'A. Cyl', start: 1322745600000, finish: 1322748708020 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'name',
            type: 'rangeBar'
        },
        series: [{
            rangeValue1Field: 'start', rangeValue2Field: 'finish'
        }],
        title: {
            text: 'Biathlon World Cup Individual Competition. Racing time',
            font: { size: 18 }
        },
        legend: { visible: false },
        argumentAxis: {
            label: { overlappingBehavior: 'rotate' }
        },
        valueAxis: {
            tickInterval: { minutes: 5 },
            valueMarginsEnabled: false,
            valueType: 'datetime'
        }
    });
});

visible

Indicates whether the line that represents an axis in a chart is visible.

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

Show Example:
jQuery

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

<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="visibleValueAxisCheckbox" checked> Show Value Axis
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        valueAxis: { visible: true }
    });

    $('#visibleValueAxisCheckbox').change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            valueAxis: { visible: this.checked }
        });
    });
});

width

Specifies the width of the line that represents an axis in the chart.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the value axis' width option is set to 3.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        valueAxis: {
            visible: true,
            width: 3
        }
    });
});