Vue Chart - commonAxisSettings

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.

$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonAxisSettings: {
            aggregatedPointsPosition: 'crossTicks',
        },
    });
});

<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 { }

<template>
    <DxChart ... >
        <DxCommonAxisSettings :aggregated-points-position="crooTicks" />
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxCommonAxisSettings,
    },
    // ...
}
</script>

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;

@(Html.DevExtreme().Chart()
    .AggregatedPointsPosition(AggregatedPointsPosition.CrossTicks)
    // ...
)

@(Html.DevExtreme().Chart()
    .AggregatedPointsPosition(AggregatedPointsPosition.CrossTicks)
    // ...
)

See Also

• Implement a Custom Aggregate Function

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

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.

• argumentAxis.constantLineStyle
• valueAxis.constantLineStyle

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

• argumentAxis.constantLines[]
• valueAxis.constantLines[]

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

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

View Demo

See Also

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

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.

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.

• argumentAxis.grid
• valueAxis.grid

Axis-specific settings override common settings.

See Also

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

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

• rotated - rotates the chart.

Axis labels display the values of major axis ticks.

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.

• argumentAxis.label
• valueAxis.label

Axis-specific settings override common settings.

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

• commonAxisSettings.valueMarginsEnabled

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

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.

• argumentAxis.minorGrid
• valueAxis.minorGrid

Axis-specific settings override common settings.

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

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.

• argumentAxis.minorTick
• valueAxis.minorTick

Axis-specific settings override common settings.

See Also

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

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

• commonAxisSettings.valueMarginsEnabled - enables/disables margins for axes.

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

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

See Also

• margin - generates space around the UI component.

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.

• argumentAxis.stripStyle
• valueAxis.stripStyle

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

• argumentAxis.strips[]
• valueAxis.strips[]

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

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

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.

• argumentAxis.tick
• valueAxis.tick

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.

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.

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.

• argumentAxis.title
• valueAxis.title

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.

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.