argumentAxis

Configures the argument axis.

Type: Object

DevExtreme HTML5 Charts Axis Axes

The argumentAxis object, which is described here, configures the argument axis individually. To specify common settings for all axes in a chart, use the commonAxisSettings object. Axis-specific settings override common settings.

argumentType

Casts arguments to a specified data type.

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

If your data source stores, for example, numbers as strings, specify the proper data type using the argumentType option.

NOTE: When configuring the widget using ASP.NET MVC Wrappers, specify this option using the ChartDataType enum. This enum accepts the following values: Numeric, DateTime and String.

See Also
  • valueAxis | valueType - casts values to a specified data type.
  • argumentAxis | type - specifies the axis type.
  • dataPrepareSettings | checkTypeForAllData - validates the type of each value coming from the data source.
  • dataPrepareSettings | convertToAxisDataType - allows you to disable the type cast in favour of the widget performance.

axisDivisionFactor

Specifies the minimum distance between two neighboring major ticks in pixels. Applies only to the axes of the "continuous" and "logarithmic" types.

Type: Number
Default Value: 50

For axes displaying numbers, the distance between major ticks depends on two interconnected options: axisDivisionFactor and tickInterval. Consider that you have specified both these options. If the specified tick interval leads the pixel distance between two ticks to being less than the axisDivisionFactor value, this tick interval will be ignored.

Use the axisDivisionFactor option only if you need to set the distance between ticks not knowing the axis values. Otherwise, use the tickInterval option.

NOTE: If the axisDivisionFactor value causes axis labels to overlap, this value will be ignored.

categories

Specifies the order of categories on an axis of the "discrete" type.

Type: Array

By default, arguments on a discrete axis keep the order of objects in the data source. For example, objects in the following data source are sorted by decreasing area value. The resulting arguments will be sorted the same way.

JavaScript
var continentsByArea = [
    { continent: 'Asia', area: 43820000 },
    { continent: 'Africa', area: 30370000 },
    { continent: 'North America', area: 24490000 },
    { continent: 'South America', area: 17840000 },
    { continent: 'Antarctica', area: 13720000 },
    { continent: 'Europe', area: 10180000 },
    { continent: 'Australia', area: 9008500 }
];

To sort the arguments, for example, alphabetically, you need to assign an array of properly sorted arguments to the categories option.

JavaScript
var chartOptions = {
    // ...
    argumentAxis: {
        categories: ['Africa', 'Antarctica', 'Asia', 'Australia',
            'Europe', 'North America', 'South America']
    }
};

NOTE: Arguments missing from the categories array will be added to its end automatically.

color

Specifies the color of the axis line.

Type: String
Default Value: '#d3d3d3'

This option supports the following colors.

constantLines[]

Declares a collection of constant lines belonging to the argument axis.

Type: Array
Cannot be used in themes.

DevExtreme HTML5 Charts ConstantLines

Each object in the constantLines array configures a single constant line. Setting the value option is necessary for a constant line to be displayed.

See Also
  • argumentAxis | constantLineStyle - specifies the appearance of those constant lines that belong to the argument axis.
  • commonAxisSettings | constantLineStyle - specifies the appearance of all constant lines in the widget.
Show Example:
jQuery

In the following example, each argument axis constant line is drawn in a different color and width.


                                    

                                    

constantLineStyle

Specifies the appearance of those constant lines that belong to the argument axis.

Type: Object

DevExtreme HTML5 Charts ConstantLines

See Also
  • argumentAxis | constantLines[] - configures individual constant lines. Overrides the options of the argumentAxis | constantLineStyle object, which is described here.
  • commonAxisSettings | constantLineStyle - specifies the appearance of all constant lines in the widget.

discreteAxisDivisionMode

Specifies whether ticks and grid lines should cross axis labels or lie between them. Applies only to the axes of the "discrete" type.

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

NOTE: When configuring the widget using ASP.NET MVC Wrappers, specify this option using the DiscreteAxisDivisionMode enum. This enum accepts the following values: BetweenLabels and CrossLabels.

See Also
  • argumentAxis | type - sets the type of the argument axis.
  • valueAxis | type - sets the type of the value axis.
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the discreteAxisDivisionMode option using the select box under the chart. Note how the grid lines change their position in accordance with the value of this option.


                                    

                                    

                                    

In this example, you can change the value of the discreteAxisDivisionMode option using the select box under the chart. Note how the grid lines change their position in accordance with the value of this option.


                                    

                                    

                                    

In this example, you can change the value of the discreteAxisDivisionMode option using the select box under the chart. Note how the grid lines change their position in accordance with the value of this option.


                                    

                                    

                                    

grid

Configures the grid.

Type: Object

A grid is a set of mutually-crossing vertical and horizontal lines that stretch throughout the entire chart. Visually, grid lines can be considered extensions of major ticks. The grid improves the readability of chart data.

DevExtreme HTML5 Charts GridLines

The commonAxisSettings | grid object specifies common settings for all grid lines in the chart. To configure only those grid lines that descend from a particular axis, use the following objects.

Axis-specific settings override common settings.

See Also
  • commonAxisSettings | minorGrid - configures the minor grid built on minor ticks.

hoverMode

Specifies chart elements to be highlighted when a user points to an axis label.

Type: String
Default Value: 'none'
Accepted Values: 'none' | 'allArgumentPoints'

This option accepts one of the following values.

  • none
    Axis labels do not respond to pointing to them.
  • allArgumentPoints
    When a user points to a label on the argument axis, series points of the corresponding argument become highlighted.

NOTE: When configuring the widget using ASP.NET MVC Wrappers, specify this option using the ArgumentAxisHoverMode enum. This enum accepts the following values: AllArgumentPoints and None.

See Also
  • commonSeriesSettings | point | hoverStyle - specifies the appearance of series points in the hover state. Applies to all series points.
  • series | point | hoverStyle - the same, but applies to the points of a particular series.
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the argumentAxis | hoverMode option using the select box under the chart. To spot the difference between the "none" and "allArgumentPoints" settings, point to an axis label.


                                    

                                    

                                    

In this example, you can change the value of the argumentAxis | hoverMode option using the select box under the chart. To spot the difference between the "none" and "allArgumentPoints" settings, point to an axis label.


                                    

                                    

                                    

In this example, you can change the value of the argumentAxis | hoverMode option using the select box under the chart. To spot the difference between the "none" and "allArgumentPoints" settings, point to an axis label.


                                    

                                    

                                    

inverted

Inverts the axis.

Type: Boolean
Default Value: false

When an axis is inverted (that is, when this option is set to true), its maximum and minimum values swap their places. As a result, axis values ascend in the opposite direction. Along with the axis, series also become inverted.

See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to invert the argument axis.


                                    

                                    

In this example, click the check box under the chart to invert the argument axis.


                                    

                                    

In this example, click the check box under the chart to invert the argument axis.


                                    

                                    

label

Configures the labels of the argument axis.

Type: Object

Axis labels display the values of major axis ticks.

DevExtreme HTML5 Charts AxisLabels

See Also
  • commonAxisSettings | label - configures the labels of all axes in the widget.

logarithmBase

Specifies the value to be raised to a power when generating ticks for an axis of the "logarithmic" type.

Type: Number
Default Value: 10

By default, ticks on a logarithmic axis are generated on a base of 10, i.e., 0.1, 1, 10, 100, 1000 etc. But you can specify the needed base using the logarithmBase option. For example, if you set this option to 5, the following ticks will be generated: 0.5, 5, 25, 125, 625, etc.

NOTE: This value should be greater than 1.

Show Example:
jQuery

Use the set of radio buttons located under the chart to change the argument axis' logarithmBase option at runtime.


                                    

                                    

max

Coupled with the min option, focuses the widget on a specific chart segment. Applies only to the axes of the "continuous" and "logarithmic" type.

Default Value: undefined

The min and max options specify custom limits for the argument axis, thus focusing the widget on a specific chart segment. By default, these options equal to the minimum and maximum arguments on the axis.

NOTE: If the valueMarginsEnabled option is true, the argument axis extends slightly beyond the min and max values.

maxValueMargin

Controls the empty space between the maximum series points and the axis. Applies only to the axes of the "continuous" and "logarithmic" type.

Type: Number
Default Value: undefined

By default, the axes extend slightly beyond their extrema generating an empty space between the axes and the minimum/maximum series points. It prevents cutting off parts of those points. To control this empty space, use the minValueMargin and maxValueMargin options. These options are used in the following formulas for the actual start and end axis values.

startAxisValue = min - (max - min) * minValueMargin
endAxisValue = max + (max - min) * maxValueMargin

For example, consider that min is 1960 and max is 2010. If you set the minValueMargin and maxValueMargin options to 0.1, the axis will start in 1955 and end in 2015.

startAxisValue = 1960 - (2010 - 1960) * 0.1 = 1960 - 50 * 0.1 = 1960 - 5 = 1955
endAxisValue = 2010 + (2010 - 1960) * 0.1 = 2010 + 50 * 0.1 = 2010 + 5 = 2015

See Also

min

Coupled with the max option, focuses the widget on a specific chart segment. Applies only to the axes of the "continuous" and "logarithmic" type.

Default Value: undefined

The min and max options specify custom limits for the argument axis, thus focusing the widget on a specific chart segment. By default, these options equal to the minimum and maximum arguments on the axis.

NOTE: If the valueMarginsEnabled option is true, the argument axis extends slightly beyond the min and max values.

minorGrid

Configures the minor grid.

Type: Object

In addition to the major grid built on major ticks, the Chart widget provides the minor grid built on minor ticks.

DevExtreme HTML5 Charts MinorGridLines

NOTE: Neither minor ticks, nor the minor grid can be displayed if the axis is of the "discrete" type.

The commonAxisSettings | minorGrid object specifies common settings for all minor grid lines in the chart. To configure only those grid lines that descend from a particular axis, use the following objects.

Axis-specific settings override common settings.

NOTE: Displaying the minor grid without the major grid may impair the readability of a chart. To prevent this situation, we recommend you use the minor grid only in conjunction with the major grid.

minorTick

Configures the appearance of minor axis ticks.

Type: Object

Along with major ticks, the Chart widget supports minor ticks. They divide an axis segment limited by two neighboring major ticks.

DevExtreme HTML5 Charts MinorTicks

The commonAxisSettings | minorTick object specifies common settings for all minor ticks in the chart. To configure only those minor ticks that belong to a particular axis, use the following objects.

Axis-specific settings override common settings.

NOTE: Minor ticks cannot be displayed on an axis of the "discrete" type.

See Also
  • argumentAxis | minorTickInterval - specifies the minor tick interval of the argument axis.
  • valueAxis | minorTickInterval - specifies the minor tick interval of the value axis.

minorTickCount

Specifies how many minor ticks to place between two neighboring major ticks.

Type: Number
Default Value: undefined
See Also
  • argumentAxis | minorTickInterval - specifies the interval between minor ticks. Has a higher priority than the minorTickCount option.

minorTickInterval

Specifies the interval between minor ticks. Applies only to the axes of the "continuous" type.

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

Minor ticks divide the segment between two neighboring major ticks into smaller segments. Minor ticks are generated automatically, unless the minorTickInterval option is set.

If the axis displays numbers, assign a number to this option. If the axis displays date-time values, assign one of the accepted string values or an object to this option. The object should contain only one of all fields described in this section, for example:

JavaScript
var chartOptions = {
    // ...
    argumentAxis: {
        // ...
        minorTickInterval: { days: 5 }
    }
};

NOTE: When configuring the widget using ASP.NET MVC Wrappers, specify this option using the VizTimeInterval enum. This enum accepts the same values, but they start with an upper-case letter, for example, 'day' becomes Day.

See Also
  • argumentAxis | minorTickCount - specifies how many minor ticks to place between two neighboring major ticks.
  • argumentAxis | minorTick - configures the appearance of minor ticks.
  • argumentAxis | tickInterval - specifies the interval between major ticks.

minValueMargin

Controls the empty space between the minimum series points and the axis. Applies only to the axes of the "continuous" and "logarithmic" type.

Type: Number
Default Value: undefined

By default, the axes extend slightly beyond their extrema generating an empty space between the axes and the minimum/maximum series points. It prevents cutting off parts of those points. To control this empty space, use the minValueMargin and maxValueMargin options. These options are used in the following formulas for the actual start and end axis values.

startAxisValue = min - (max - min) * minValueMargin
endAxisValue = max + (max - min) * maxValueMargin

For example, consider that min is 1960 and max is 2010. If you set the minValueMargin and maxValueMargin options to 0.1, the axis will start in 1955 and end in 2015.

startAxisValue = 1960 - (2010 - 1960) * 0.1 = 1960 - 50 * 0.1 = 1960 - 5 = 1955
endAxisValue = 2010 + (2010 - 1960) * 0.1 = 2010 + 50 * 0.1 = 2010 + 5 = 2015

See Also

opacity

Specifies how transparent the axis line should be.

Type: Number
Default Value: undefined

This option accepts a value from 0 to 1, where 0 makes the axis line completely transparent, and 1 makes it opaque.

placeholderSize

Reserves a pixel-measured space for the axis.

Type: Number
Default Value: null

The reserved space will be occupied by the axis line and axis labels.

DevExtreme HTML5 Charts AxisPlaceholder

See Also
  • margin - generates space around the widget.

position

Relocates the argument axis.

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

Depending on the value of the rotated option, position accepts different values.

rotated position
false "bottom" or "top"
true "left" or "right"
Show Example:
jQuery

In the example below, the argument axis is placed at the top of the chart using the position option.


                                    

                                    

setTicksAtUnitBeginning

Rounds off date-time values to the nearest tick interval. Applies only to the axes of the "continuous" type containing date-time values.

Type: Boolean
Default Value: true

This option impacts tick arrangement on axes that contain date-time values. The following table illustrates exactly how ticks will be arranged depending on the value of this option.

Tick Interval Start Axis Value setTicksAtUnitBeginning: true
2 hours 11h:35min:25s:10ms 13h:00min:00s:00ms
15h:00min:00s:00ms
17h:00min:00s:00ms
...
2 days 6d:11h:35min 8d:00h:00min
10d:00h:00min
12d:00h:00min
...
2 months March:13d May:1d
July:1d
September:1d
...
See Also
  • argumentAxis | tickInterval - sets a tick interval for the argument axis.
  • valueAxis | tickInterval - sets a tick interval for the value axis.

strips[]

Declares a collection of strips belonging to the argument axis.

Type: Array
Cannot be used in themes.

A strip is a colored piece of the chart's background that highlights a range of values. Strips allow a viewer to see whether a certain series point falls in or out of a range.

DevExtreme HTML5 Charts Strips

Each object in the strips array configures a single strip. To limit a strip, set its startValue and endValue options. You may set only one of them, in which case the strip will not have a limit at one end. Note that setting the color option is also necessary for a strip to be displayed.

See Also
  • argumentAxis | stripStyle - specifies the appearance of those strips that belong to the argument axis.
  • commonAxisSettings | stripStyle - specifies the appearance of all strips in the widget.
Show Example:
jQuery

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


                                    

                                    

stripStyle

Configures the appearance of strips.

Type: Object

DevExtreme HTML5 Charts Strips

The commonAxisSettings | stripStyle object specifies common settings for all strips in the chart. To configure only those strips that belong to a particular axis, use the following objects.

To configure individual strips, use the following arrays of objects.

Individual settings override axis-specific settings which, in their turn, override common settings.

tick

Configures the appearance of major axis ticks.

Type: Object

Ticks divide an axis into sections that measure off values on this axis.

DevExtreme HTML5 Charts MajorTicks

The commonAxisSettings | tick object specifies common settings for all major ticks in the chart. To configure only those major ticks that belong to a particular axis, use the following objects.

Axis-specific settings override common settings.

See Also
  • argumentAxis | tickInterval - specifies the tick interval of the argument axis.
  • valueAxis | tickInterval - specifies the tick interval of the value axis.
  • commonAxisSettings | minorTick - customizes the appearance of minor ticks.

tickInterval

Specifies the interval between major ticks.

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

Major ticks divide an axis into segments, thus improving the viewer's perception of visualized data. Major ticks are generated automatically, unless the tickInterval option is set.

If the axis displays numbers, assign a number to this option. If the axis displays date-time values, assign one of the accepted string values or an object to this option. The object should contain only one of all fields described in this section, for example:

JavaScript
var chartOptions = {
    // ...
    argumentAxis: {
        // ...
        tickInterval: { days: 5 }
    }
};

When you use an axis of the "logarithmic" type, ticks are generated on a base of powers. For example, assuming that the logarithm base is 10 and the tick interval is 1, ticks are generated at 10-2, 10-1, 100, 101, 102, 103, etc. If the tick interval becomes 2, ticks are generated at 10-1, 101, 103, etc.

NOTE: A custom tick interval can be ignored if it leads axis labels to overlap each other. To force the widget to use it nevertheless, assign "ignore" to the argumentAxis | label | overlappingBehavior option.

NOTE: When configuring the widget using ASP.NET MVC Wrappers, specify this option using the VizTimeInterval enum. This enum accepts the same values, but they start with an upper-case letter, for example, 'day' becomes Day.

See Also
  • argumentAxis | tick - configures the appearance of major ticks.
  • argumentAxis | minorTickInterval - specifies the interval between minor ticks.

title

Configures the axis title.

Type: String|Object

The axis title is a short text displayed alongside the axis. Usually, the axis title shows units of measurement for arguments displayed by the axis. You can put any text in the axis title though.

DevExtreme HTML5 Charts AxisTitles

If you assign an object to the title option, specifying the text field of this object is necessary for the axis title to be displayed. Besides the object, the title option accepts a string, thus providing a shortcut for setting the axis title. Therefore, this:

title: 'Axis Title'

is the same as this:

title: {
    text: 'Axis Title'
}
See Also
  • commonAxisSettings | title - specifies the appearance of all axis titles in the widget.

type

Specifies the type of the argument axis.

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

The argument axis can have one of the following types.

  • Continuous
    Displays numeric and date-time arguments. To divide this axis into intervals, use the tickInterval option.
  • Discrete
    Displays string arguments called "categories". To sort them, use the categories array.
  • Logarithmic
    Displays numeric arguments. Each argument is the logarithmBase value raised to some power. For example, logarithmBase equaling to 5 produces the following arguments: 50, 51, 52, 53 etc. The logarithmic axis is useful when you visualize a dataset of rapidly-growing values.

Normally, there is no need to specify this option, because the axis type is determined automatically depending on the type of arguments. However, you may force the use of a specific axis type, for example, to employ the "discrete" axis type with numeric or date-time arguments.

NOTE: When configuring the widget using ASP.NET MVC Wrappers, specify this option using the AxisScaleType enum. This enum accepts the following values: Discrete, Continuous and Logarithmic.

valueMarginsEnabled

Adds an empty space between the axis and the minimum and maximum series points.

Type: Boolean
Default Value: true

By default, the argument axis extends slightly beyond its extrema. It prevents cutting off parts of the minimum and maximum series points. To disable this feature, set the valueMarginsEnabled option to false.

NOTE: This option is ignored by bar-like series.

See Also
  • argumentAxis | minValueMargin - sets a custom margin for minimum series points.
  • argumentAxis | maxValueMargin - sets a custom margin for maximum series points.
Show Example:
jQuery

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


                                    

                                    

visible

Makes the axis line visible.

Type: Boolean
Default Value: false

width

Specifies the width of the axis line in pixels.

Type: Number
Default Value: 1