Vue Chart - commonAxisSettings

Defines common settings for both the argument and value axis in a chart.

Selector: DxCommonAxisSettings

DevExtreme HTML5 Charts Axis Axes

The commonAxisSettings object, which is described here, specifies common settings for all axes in a chart. To configure a particular axis, use the argumentAxis or valueAxis object. Axis-specific settings override common settings.

aggregatedPointsPosition

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

Selector: aggregated-points-position
Default Value: 'betweenTicks'

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

allowDecimals

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

Selector: allow-decimals
Type:

Boolean

Default Value: undefined

breakStyle

Configures the scale breaks' appearance.

Selector: DxBreakStyle
Type:

Object

color

Specifies the color of the axis line.

Type:

String

Default Value: '#767676'

This property supports the following colors:

constantLineStyle

Configures the appearance of all constant lines in the UI component.

Selector: DxConstantLineStyle

DevExtreme HTML5 Charts ConstantLines

The commonAxisSettings.constantLineStyle object, which is described here, specifies common settings for all constant lines in the chart. To configure only those constant lines that belong to a particular axis, use the following objects.

To configure individual constant lines, use the following arrays of objects.

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

discreteAxisDivisionMode

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

Selector: discrete-axis-division-mode
Default Value: 'betweenLabels'

The images below show the difference between the 'betweenLabels' and 'crossLabels' modes.

discreteAxisDivisionMode set to 'betweenLabels'

discreteAxisDivisionMode set to 'crossLabels'

View Demo

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.

Selector: end-on-tick
Type:

Boolean

Default Value: undefined

grid

Configures the grid.

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

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 axis labels.

Selector: DxLabel

Axis labels display the values of major axis ticks.

DevExtreme HTML5 Charts AxisLabels

The commonAxisSettings.label object, which is described here, specifies common settings for all axis labels in the chart. To configure only those labels that belong to a particular axis, use the following objects.

Axis-specific settings override common settings.

maxValueMargin

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

Selector: max-value-margin
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: DxMinorGrid
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: DxMinorTick
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.

minValueMargin

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

Selector: min-value-margin
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

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.

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

stripStyle

Configures the appearance of strips.

Selector: DxStripStyle

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

title

Configures axis titles.

Selector: DxTitle

Usually, an axis title displays units of measurement for values displayed by an axis. However, you can display any needed text in the axis title.

DevExtreme HTML5 Charts AxisTitles

The commonAxisSettings.title object, which is described here, specifies common settings for all axis titles in the chart. To configure only the axis title that belongs to a particular axis, use the following objects.

Axis-specific settings override common settings.

See Also
  • argumentAxis.title.text - specifies the text of the title for the argument axis.
  • valueAxis.title.text - specifies the text of the title for the value axis.

valueMarginsEnabled

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

Selector: value-margins-enabled
Type:

Boolean

Default Value: true

By default, the axes extend slightly beyond their 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
  • commonAxisSettings.minValueMargin - sets a custom margin for minimum series points.
  • commonAxisSettings.maxValueMargin - sets a custom margin for maximum series points.

visible

Makes the axis line visible.

Type:

Boolean

Default Value: true

width

Specifies the width of the axis line in pixels.

Type:

Number

Default Value: 1