On a Continuous Axis
A continuous axis indicates numeric or date-time values. If you know the range of these values, you can arrange ticks using the tickInterval option. It specifies the interval between two side-by-side major ticks. For numeric values, this option accepts a number; for date-time values, it accepts a string or an object with a single field that designates the date component measuring the interval. Similarly, you can arrange minor ticks using the minorTickInterval option.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis tickInterval: 10, minorTickInterval: 2, // === or === tickInterval: { years: 1 }, minorTickInterval: { months: 6 }, // === or === tickInterval: 'year', minorTickInterval: 'month', // Making ticks visible tick: { visible: true }, minorTick: { visible: true } } }); });
Angular
<dx-chart ... > <dxo-argument-axis [tickInterval]="10" [minorTickInterval]="2"> <dxo-tick [visible]="true"></dxo-tick> <dxo-minor-tick [visible]="true"></dxo-minor-tick> </dxo-argument-axis> <!-- or --> <dxo-argument-axis> <dxo-tick-interval [years]="1"></dxo-tick-interval> <dxo-minor-tick-interval [months]="6"></dxo-minor-tick-interval> <dxo-tick [visible]="true"></dxo-tick> <dxo-minor-tick [visible]="true"></dxo-minor-tick> </dxo-argument-axis> <!-- or --> <dxo-argument-axis tickInterval="year" minorTickInterval="month"> <dxo-tick [visible]="true"></dxo-tick> <dxo-minor-tick [visible]="true"></dxo-minor-tick> </dxo-argument-axis> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Without knowing the range of values on the axis, you can arrange major ticks by specifying the minimum distance between two side-by-side ticks in pixels. For this purpose, set the axisDivisionFactor option. Minor ticks in this case should be arranged using the minorTickCount option. It specifies how many minor ticks to place between two side-by-side major ticks.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis axisDivisionFactor: 20, minorTickCount: 4, tick: { visible: true }, minorTick: { visible: true } } }); });
Angular
<dx-chart ... > <dxo-argument-axis [axisDivisionFactor]="20" [minorTickCount]="4"> <dxo-tick [visible]="true"></dxo-tick> <dxo-minor-tick [visible]="true"></dxo-minor-tick> </dxo-argument-axis> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
On a Discrete Axis
Values on a discrete axis are called "categories", and ticks on this axis separate one category from another. In terms of tick arrangement, you can only specify whether ticks (and consequently, grid lines) should be placed between axis labels or should cross them. Use the discreteAxisDivisionMode option for this purpose.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis tick: { visible: true }, discreteAxisDivisionMode: 'crossLabels' // or 'betweenLabels' } }); });
Angular
<dx-chart ... > <dxo-argument-axis discreteAxisDivisionMode="crossLabels"> <!-- or 'betweenLabels' --> <dxo-tick [visible]="true"></dxo-tick> </dxo-argument-axis> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
On a Logarithmic Axis
A logarithmic axis indicates numeric values; each of them is the logarithmBase value raised to some power. For example, logarithmBase that is equal to 10 produces the following values: 10-2, 10-1, 100, 101, 102, 103, etc. That is so if the tickInterval option is 1. Changing tickInterval, for example, to 2 removes every second value from this sequence, leaving the following: 10-1, 101, 103, etc.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis type: 'logarithmic' tickInterval: 2, tick: { visible: true } } }); });
Angular
<dx-chart ... > <dxo-argument-axis type="logarithmic" [tickInterval]="2"> <dxo-tick [visible]="true"></dxo-tick> </dxo-argument-axis> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
As an alternative to tickInterval, you can use the axisDivisionFactor option to arrange ticks. This option specifies the minimum distance between two side-by-side ticks in pixels.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis type: 'logarithmic' axisDivisionFactor: 20, tick: { visible: true } } }); });
Angular
<dx-chart ... > <dxo-argument-axis type="logarithmic" [axisDivisionFactor]="20"> <dxo-tick [visible]="true"></dxo-tick> </dxo-argument-axis> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.