React Chart - argumentAxis

Configures the argument axis.

Selector: ArgumentAxis
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.

aggregateByCategory

Aggregates series points that fall into the same category.

Type:

Boolean

Default Value: false

Aggregation by categories can be applied only when the axis displays categories, and each category contains two or more series points.

When aggregateByCategory is true, data is aggregated using the specified aggregation method.

The following code shows an example of a data source that can be aggregated by categories and the Chart configuration for this use-case:

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
        dataSource: [
            { arg: "A", val: 1 },
            { arg: "A", val: 1 },
            { arg: "A", val: 1 },

            { arg: "B", val: 1 },
            { arg: "B", val: 1 }
        ],
        series: {
            type: "bar",
            aggregation: {
                enabled: true,
                method: "sum"
            }
        },
        argumentAxis: {
            aggregateByCategory: true
        }
    });
});
Angular
app.component.html
app.component.ts
app.service.ts
app.module.ts
<dx-chart dataSource="chartData">
    <dxi-series type="bar">
        <dxo-aggregation
            [enabled]="true"
            method="sum">
        </dxo-aggregation>
    </dxi-series>
    <dxo-argument-axis [aggregateByCategory]="true"></dxo-argument-axis>
</dx-chart>
import { Component } from '@angular/core';
import { DataPoint, Service } from './app.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    chartData: DataPoint[];
    constructor(service: Service) {
        this.chartData = service.getDataPoints();
    }
}
import { Injectable } from '@angular/core';

export class DataPoint {
    arg: String,
    val: Number
}

let dataPoints: DataPoint[] = [
    { arg: "A", val: 1 },
    { arg: "A", val: 1 },
    { arg: "A", val: 1 },

    { arg: "B", val: 1 },
    { arg: "B", val: 1 },
    { arg: "B", val: 1 }
];

@Injectable()
export class Service {
    getDataPoints(): DataPoint[] {
        return dataPoints;
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';
import { Service } from './app.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [
        Service
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
data.js
<template>
    <DxChart :data-source="chartData">
        <DxSeries type="bar">
            <DxAggregation
                :enabled="true"
                method="sum" 
            />
        </DxSeries>
        <DxArgumentAxis :aggregate-by-category="true" />
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxAggregation,
    DxArgumentAxis
} from 'devextreme-vue/chart';

import service from './data.js';

export default {
    components: {
        DxChart,
        DxSeries,
        DxAggregation,
        DxArgumentAxis
    },
    data() {
        const chartData = service.getDataPoints;
        return {
            chartData
        }
    }
}
</script>
const dataPoints = [
    { arg: "A", val: 1 },
    { arg: "A", val: 1 },
    { arg: "A", val: 1 },

    { arg: "B", val: 1 },
    { arg: "B", val: 1 },
    { arg: "B", val: 1 }
];
export default {
    getDataPoints() {
        return dataPoints;
    }
};
React
App.js
data.js
import React from 'react';

import Chart, {
    Series,
    Aggregation,
    ArgumentAxis
} from 'devextreme-react/chart';

import service from './data.js';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.chartData = service.getDataPoints;
    }

    render() {
        return (
            <Chart dataSource={this.chartData}>
                <Series type="bar">
                    <Aggregation
                        enabled={true}
                        method="sum"
                    />
                </Series>
                <ArgumentAxis aggregateByCategory={true} />
            </Chart>
        );
    }
}
export default App;
const dataPoints = [
    { arg: "A", val: 1 },
    { arg: "A", val: 1 },
    { arg: "A", val: 1 },

    { arg: "B", val: 1 },
    { arg: "B", val: 1 },
    { arg: "B", val: 1 }
];
export default {
    getDataPoints() {
        return dataPoints;
    }
};

This code produces the following result:

DevExtreme Chart: Aggregate by Category

If aggregateByCategory is false, the aggregation methods are not applied.

aggregatedPointsPosition

Specifies the start position of the aggregated series points in the aggregation interval.

Type:

String

Default Value: 'betweenTicks'
Accepted Values: 'betweenTicks' | 'crossTicks'

DevExtreme Charts - Aggregated points position

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonAxisSettings: {
            aggregatedPointsPosition: 'crossTicks',
        },
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... >
    <dxo-common-axis-settings [aggregatedPointsPosition]="crossTicks" >
    </dxo-common-series-settings>
</dx-chart>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxChart ... >
        <DxCommonAxisSettings :aggregated-points-position="crooTicks" />
    </DxChart>
</template>

<script>
import DxChart, {
    DxCommonAxisSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxCommonAxisSettings,
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import Chart, {
    CommonAxisSettings
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <CommonAxisSettings aggregatedPointsPosition="crossTicks" />
            </Chart>
        );
    }
}
export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Chart()
    .AggregatedPointsPosition(AggregatedPointsPosition.CrossTicks)
    // ...
)
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Chart()
    .AggregatedPointsPosition(AggregatedPointsPosition.CrossTicks)
    // ...
)
See Also

aggregationGroupWidth

Specifies the length of aggregation intervals in pixels. Does not apply if aggregateByCategory is true. May be ignored in favor of the aggregationInterval property.

Type:

Number

Default Value: undefined

For data aggregation, the argument axis is divided into intervals. Series points that fall within the same interval get aggregated together. The aggregationGroupWidth property defines the length of each interval in pixels.

See Also

aggregationInterval

Specifies the length of aggregation intervals in axis units. Applies only to axes of continuous and logarithmic types.

Selector: AggregationInterval
Type:

Number

|

Object

|

String

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

For data aggregation, the argument axis is divided into intervals. Series points that fall within the same interval get aggregated together. The aggregationInterval property defines the length of each interval.

If the axis displays numbers, assign a number to this property. For example, an aggregationInterval of 100 produces the following intervals: 0 to 100, 100 to 200, 200 to 300, etc. If the axis displays date-time values, set this property to one of the accepted string values. Alternatively, you can set it to an object that contains one of the fields described in this section.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            // Interval of one day
            aggregationInterval: "day",
            // Interval of five days
            aggregationInterval: { days: 5 }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis
        aggregationInterval="day"> <!-- Interval of one day -->
        <dxo-aggregation-interval
            [days]="5">            <!-- Interval of five days -->
        </dxo-aggregation-interval>
    </dxo-argument-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxChart ... >
        <DxArgumentAxis
            aggregation-interval="day">     <!-- Interval of one day -->
            <DxAggregationInterval 
                :days="5" />                <!-- Interval of five days -->
        </DxArgumentAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxAggregationInterval
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxAggregationInterval
    }
}
</script>
React
App.js
import React from 'react';

import Chart, {
    ArgumentAxis,
    AggregationInterval
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis
                    aggregationInterval={"day"}>    {/* Interval of one day */}
                    <AggregationInterval 
                        days={5} />                 {/* Interval of five days */}
                </ArgumentAxis>
            </Chart>
        );
    }
}

export default App;     

On a logarithmic axis, intervals are calculated based on powers. For example, if the logarithmBase is 10 and the aggregationInterval is 1, the following intervals are produced: 100 to 101, 101 to 102, 102 to 103, etc. If the aggregationInterval becomes 2, intervals become longer: 100 to 102, 102 to 104, 104 to 106, etc.

View Demo

See Also

allowDecimals

Specifies whether to allow decimal values on the axis. When false, the axis contains integer values only.

Type:

Boolean

Default Value: undefined

argumentType

Casts arguments to a specified data type.

Type:

String

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

If your data source stores numbers or dates as strings, specify the proper data type using this property. Make sure the dates have a valid format.

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 UI component 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: 70

For axes displaying numbers, the distance between major ticks depends on two interconnected properties: axisDivisionFactor and tickInterval. Consider that you have specified both these properties. 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 property only if you need to set the distance between ticks not knowing the axis values. Otherwise, use the tickInterval property.

breaks[]

Declares a scale break collection. Applies only if the axis' type is "continuous" or "logarithmic".

Selector: Break
Type:

Array<Object>

Default Value: undefined
Cannot be used in themes.

A scale break is an area across an axis that is displayed instead of a section of an axis range. Scale breaks improve the readability of chart sections with large gaps in their ranges.

DevExtreme HTML5 JavaScript Charts Scale Breaks

Each object in the breaks array configures a single scale break. A scale break range should be at least two tick intervals. Otherwise, the scale break might not be visible.

See Also

breakStyle

Configures the scale breaks' appearance.

Selector: BreakStyle
Type:

Object

categories

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

Type:

Array<Number | String | Date>

Arguments of the string type on discrete axes maintain the order of objects in the data source. Arguments of the number and date types are sorted in ascending order regardless of their order within the data source. Specify the categories array to set the required order of arguments. In the following example, arguments are sorted alphabetically:

jQuery
JavaScript
$(function() {
    $('#chartContainer').dxChart({
        // ...
        dataSource: dataSource,
        argumentAxis: {
            categories: continentNames,
            argumentField: 'continent'
        }
    });

    const dataSource = [
        { 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 }
    ];

    const continentNames = [
        'Africa', 
        'Antarctica', 
        'Asia', 
        'Australia',
        'Europe',
        'North America',
        'South America'
    ];
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ...
    [dataSource]="dataSource">
    <dxo-argument-axis
        [categories]="continentNames"
        argumentField="continent">
    </dxo-argument-axis>
</dx-chart>
import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    dataSource = [
        { 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 }
    ];

    continentNames = [
        'Africa', 
        'Antarctica', 
        'Asia', 
        'Australia',
        'Europe',
        'North America',
        'South America'
    ];
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxChart ... 
        :data-source="dataSource">
        <DxArgumentAxis 
            :categories="continentNames"
            argument-field="continent" 
        />
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis
} from 'devextreme-vue/chart'; 

export default {
    components: {
        DxChart,
        DxArgumentAxis
    },
    data() {
        return {
            dataSource: [
                { 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 }
            ],

            continentNames: [
                'Africa', 
                'Antarctica', 
                'Asia', 
                'Australia',
                'Europe',
                'North America',
                'South America'
            ]
        };
    }
}
</script>
React
App.js
import React from 'react';

import Chart, {
    ArgumentAxis
} from 'devextreme-react/chart';

const dataSource = [
    { 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 }
];

const continentNames = [
    'Africa', 
    'Antarctica', 
    'Asia', 
    'Australia',
    'Europe',
    'North America',
    'South America'
];

class App extends React.Component {
    render() {
        return (
            <Chart ... 
                dataSource={dataSource}>
                <ArgumentAxis
                    categories={continentNames}
                    argumentField="continent"
                />
            </Chart>
        );
    }
}

export default App;     

color

Specifies the color of the axis line.

Type:

String

Default Value: '#767676'

This property supports the following colors:

constantLines[]

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

Selector: ConstantLine
Type:

Array<Object>

Cannot be used in themes.

DevExtreme HTML5 Charts ConstantLines

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

View Demo

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 UI component.

constantLineStyle

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

Selector: ConstantLineStyle
Type:

Object

DevExtreme HTML5 Charts ConstantLines

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

customPosition

Specifies the position of the argument axis on the value axis.

Type:

Number

|

Date

|

String

Default Value: undefined

The value of this property should be specified in the same format as the values on the value axis. The argument axis is on the pane border if the customPosition's value is outside the value axis range.

View Demo

NOTE
This property overrides the position property.
See also

customPositionAxis

Specifies the name of a value axis on which the argument axis should be positioned. Applies only to multi-axis charts.

Type:

String

Default Value: undefined

See also

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'

See Also
  • argumentAxis.type - sets the type of the argument axis.
  • valueAxis.type - sets the type of the value axis.

endOnTick

Specifies whether to force the axis to start and end on ticks.

Type:

Boolean

Default Value: false

grid

Configures the grid.

Selector: 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.

holidays

Dates to be excluded from the axis when workdaysOnly is true.

Type:

Array<Date | String>

|

Array<Number>

Default Value: undefined

See Also

hoverMode

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

Type:

String

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

This property 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.
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.

inverted

Inverts the axis.

Type:

Boolean

Default Value: false

When an axis is inverted (that is, when this property 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

label

Configures the labels of the argument axis.

Selector: Label
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 UI component.

linearThreshold

Specifies a value used to calculate the range on a logarithmic axis within which the axis should be linear. Applies only if the data source contains negative values or zeroes.

Type:

Number

Default Value: undefined

Setting this property prevents generating an infinite number of small axis values. Set it to an integer value that designates a power of logarithmBase. The following code sample shows how different linearThreshold values affect the linear range when the logarithmBase is 10:

JavaScript
linearThreshold: -1 // [-0.1; 0.1]
linearThreshold: -2 // [-0.01; 0.01]
linearThreshold: -3 // [-0.001; 0.001]

View Demo

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 property. For example, if you set this property to 5, the following ticks will be generated: 0.5, 5, 25, 125, 625, etc.

NOTE
This value should be greater than 1.

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 properties. These properties are used in the following formulas for the actual start and end axis values.

startAxisValue = minDataValue - (maxDataValue - minDataValue) * minValueMargin
endAxisValue = maxDataValue + (maxDataValue - minDataValue) * maxValueMargin

For example, consider that minDataValue is 1960 and maxDataValue is 2010. If you set the minValueMargin and maxValueMargin properties 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

minorGrid

Configures the minor grid.

Selector: MinorGrid
Type:

Object

In addition to the major grid built on major ticks, the Chart UI component 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.

Selector: MinorTick
Type:

Object

Along with major ticks, the Chart UI component 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 property.

minorTickInterval

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

Selector: MinorTickInterval
Type:

Number

|

Object

|

String

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

Minor ticks divide the segment between two neighboring major ticks into smaller segments. Minor tick value is calculated automatically, unless the minorTickInterval property is set.

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

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            // ...
            minorTickInterval: { days: 5 }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis ... >
        <dxo-minor-tick-interval [days]="5"></dxo-minor-tick-interval>
    </dxo-argument-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxChart ... >
        <DxArgumentAxis>
            <DxMinorTickInterval :days="5" />
        </DxArgumentAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxMinorTickInterval
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxMinorTickInterval
    }
}
</script>
React
App.js
import React from 'react';

import Chart, {
    ArgumentAxis,
    MinorTickInterval
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis>
                    <MinorTickInterval days={5} />
                </ArgumentAxis>
            </Chart>
        );
    }
}

export default App;     
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 properties. These properties are used in the following formulas for the actual start and end axis values.

startAxisValue = minDataValue - (maxDataValue - minDataValue) * minValueMargin
endAxisValue = maxDataValue + (maxDataValue - minDataValue) * maxValueMargin

For example, consider that minDataValue is 1960 and maxDataValue is 2010. If you set the minValueMargin and maxValueMargin properties 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

minVisualRangeLength

Specifies the minimum length of the visual range.

Selector: MinVisualRangeLength
Type:

Number

|

Object

|

String

Default Value: undefined
Accepted Values: 'day' | 'hour' | 'millisecond' | 'minute' | 'month' | 'quarter' | 'second' | 'week' | 'year'
Cannot be used in themes.

If the visual range is set on a numeric axis, assign a number to this property. If the axis displays date-time values, assign one of the accepted string values or an object to this property. The object should contain one or several fields described in this section, for example:

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            // ...
            minVisualRangeLength: { weeks: 2 }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... >
    <dxo-argument-axis ... >
        <dxo-min-visual-range-length [weeks]="2"></dxo-min-visual-range-length>
    </dxo-argument-axis>
</dx-chart>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxChart ... >
        <DxArgumentAxis ... >
            <DxMinVisualRangeLength :weeks="2" />
        </DxArgumentAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxMinVisualRangeLength
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxMinVisualRangeLength
    },
    data() {
        return {
            // ...
        }
    },
}
</script>
React
App.js
import React from 'react';
import Chart, {
    ArgumentAxis,
    MinVisualRangeLength
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis ... >
                    <MinVisualRangeLength weeks={2} />
                </ArgumentAxis>
            </Chart>
        );
    }
}
export default App;
See Also

offset

Specifies the shift in pixels of the argument axis.

Type:

Number

Default Value: undefined

Negative numbers shift the axis position to the top, positive numbers - to the bottom. If the rotated property is enabled, negative numbers will shift the axis position to the left, and positive numbers - to the right.

See Also

opacity

Specifies how transparent the axis line should be.

Type:

Number

Default Value: undefined

This property 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 UI component.

position

Relocates the argument axis.

Type:

String

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

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

rotated position
false "bottom" or "top"
true "left" or "right"

If the predefined positions do not meet your requirements, use the customPosition property.

singleWorkdays

Dates to be included on the axis when workdaysOnly is true.

Type:

Array<Date | String>

|

Array<Number>

Default Value: undefined

See Also

strips[]

Declares a collection of strips belonging to the argument axis.

Selector: Strip
Type:

Array<Object>

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 properties. 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 property 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 UI component.

stripStyle

Configures the appearance of strips.

Selector: StripStyle
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.

Selector: Tick
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.

Selector: TickInterval
Type:

Number

|

Object

|

String

Default Value: undefined
Accepted Values: 'day' | 'hour' | 'millisecond' | 'minute' | 'month' | 'quarter' | 'second' | 'week' | '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 property is set.

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

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            // ...
            tickInterval: { days: 5 }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis ... >
        <dxo-tick-interval [days]="5"></dxo-tick-interval>
    </dxo-argument-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxChart ... >
        <DxArgumentAxis>
            <DxTickInterval :days="5" />
        </DxArgumentAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxTickInterval
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxTickInterval
    }
}
</script>
React
App.js
import React from 'react';

import Chart, {
    ArgumentAxis,
    TickInterval
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis>
                    <TickInterval days={5} />
                </ArgumentAxis>
            </Chart>
        );
    }
}

export default App;     

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.

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

title

Configures the axis title.

Selector: 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 property, specifying the text field of this object is necessary for the axis title to be displayed. Besides the object, the title property 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 UI component.

type

Specifies the type of the argument axis.

Type:

String

Default Value: undefined
Accepted Values: 'continuous' | 'discrete' | '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 property.
  • 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 10 produces the following arguments: 10-2, 10-1, 100, 101, 102, etc. The logarithmic axis is useful when you visualize a dataset of rapidly-growing values.

Normally, there is no need to specify this property, 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.

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 property to false.

See Also
  • argumentAxis.minValueMargin - sets a custom margin for minimum series points.
  • argumentAxis.maxValueMargin - sets a custom margin for maximum series points.

visible

Makes the axis line visible.

Type:

Boolean

Default Value: true

visualRange

Defines the axis' displayed range. Cannot be wider than the wholeRange.

Selector: VisualRange
Type:

Object

|

Array<Number | String | Date>

Raised Events: onOptionChanged
Cannot be used in themes.

This property accepts one of the following:

  • A two-item array

    Specifies the range's start and end. The array can contain a pair of numeric, string, or date-time values, depending on the axis's argumentType. You can also set one of the array values to null to specify an open-ended range.

    visualRange: [50, 70]
    // Open-ended range
    visualRange: [null, 70]
  • An object with the startValue and endValue fields

    An alternative to the two-item array.

    visualRange: {
        startValue: 50,
        endValue: 70
    }
    // Open-ended range
    visualRange: {
        startValue: null,
        endValue: 70
    }
  • An object with the length and a startValue or endValue field

    Specifies the range using a start or end value and length.

    visualRange: {
        startValue: 50,
        length: 20
    }
    // ===== or =====
    visualRange: {
        endValue: 70,
        length: 20
    }
  • An object with the length field

    Sets the range of the specified length using the last axis value as the end value.

    visualRange: {
        length: 20
    }

View Demo

To specify the minimum visual range that a user can set, use the minVisualRangeLength property.

See Also

visualRangeUpdateMode

Specifies how the axis's visual range should behave when chart data is updated.

Type:

String

Default Value: 'auto'
Accepted Values: 'auto' | 'keep' | 'reset' | 'shift'

The following modes are available:

  • "shift"
    The visual range moves to the axis's end. The range's length does not change.

  • "reset"
    The visual range becomes equal to the whole range.

  • "keep"
    The visual range does not change.

  • "auto"
    The applied mode changes depending on the visual range's position on the axis:

    • at the start or middle, then "keep";
    • if set to view the whole range, then "reset" (the visual range remains equal to the whole range).
See Also

wholeRange

Defines the range where the axis can be zoomed and panned.

Selector: WholeRange
Type:

Object

|

Array<Number | String | Date>

Default Value: undefined

This property accepts one of the following:

  • A two-item array

    Specifies the range's start and end. The array can contain a pair of numeric, string, or date-time values, depending on the axis's argumentType. You can also set one of the array values to null to specify an open-ended range.

    wholeRange: [50, 70]
    // Open-ended range
    wholeRange: [null, 70]
  • An object with the startValue and endValue fields

    An alternative to the two-item array.

    wholeRange: {
        startValue: 50,
        endValue: 70
    }
    // Open-ended range
    wholeRange: {
        startValue: null,
        endValue: 70
    }
  • An object with the length and a startValue or endValue field

    Specifies the range using a start or end value and length.

    wholeRange: {
        startValue: 50,
        length: 20
    }
    // ===== or =====
    wholeRange: {
        endValue: 70,
        length: 20
    }
  • An object with the length field

    Sets the range of the specified length using the last axis value as the end value.

    wholeRange: {
        length: 20
    }
See Also

width

Specifies the width of the axis line in pixels.

Type:

Number

Default Value: 1

workdaysOnly

Leaves only workdays on the axis: the work week days plus single workdays minus holidays. Applies only if the axis' argumentType is "datetime".

Type:

Boolean

Default Value: false

workWeek

Specifies which days are workdays. The array can contain values from 0 (Sunday) to 6 (Saturday). Applies only if workdaysOnly is true.

Type:

Array<Number>

Default Value: [1, 2, 3, 4, 5]