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 property. It specifies the interval between two side-by-side major ticks. For numeric values, this property 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 property.
jQuery
JavaScript
$(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
HTML
TypeScript
<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
],
// ...
})Vue
App.vue
<template>
<DxChart ... >
<DxArgumentAxis
:tick-interval="10"
:minor-tick-interval="2"
>
<DxTick :visible="true"/>
<DxMinorTick :visible="true"/>
</DxArgumentAxis>
<!-- or -->
<DxArgumentAxis>
<DxTickInterval :years="1"/>
<DxMinorTickInterval :months="6"/>
<DxTick :visible="true"/>
<DxMinorTick :visible="true"/>
</DxArgumentAxis>
<!-- or -->
<DxArgumentAxis
tick-interval="year"
minor-tick-interval="month"
>
<DxTick :visible="true"/>
<DxMinorTick :visible="true"/>
</DxArgumentAxis>
</DxChart>
</template>
<script>
import DxChart, {
DxArgumentAxis,
DxTick,
DxMinorTick,
DxTickInterval,
DxMinorTickInterval
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxArgumentAxis,
DxTick,
DxMinorTick,
DxTickInterval,
DxMinorTickInterval
}
}
</script>React
App.js
import React from 'react';
import Chart, {
ArgumentAxis,
Tick,
MinorTick,
TickInterval,
MinorTickInterval
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<ArgumentAxis
tickInterval={10}
minorTickInterval={2}
>
<Tick visible={true} />
<MinorTick visible={true} />
</ArgumentAxis>
{/* or */}
<ArgumentAxis>
<TickInterval years={1} />
<MinorTickInterval months={6} />
<Tick visible={true} />
<MinorTick visible={true} />
</ArgumentAxis>
{/* or */}
<ArgumentAxis
tickInterval="year"
minorTickInterval="month"
>
<Tick visible={true} />
<MinorTick visible={true} />
</ArgumentAxis>
</Chart>
);
}
}
export default App;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 property. Minor ticks in this case should be arranged using the minorTickCount property. It specifies how many minor ticks to place between two side-by-side major ticks.
jQuery
JavaScript
$(function() {
$("#chartContainer").dxChart({
// ...
argumentAxis: { // or valueAxis
axisDivisionFactor: 20,
minorTickCount: 4,
tick: { visible: true },
minorTick: { visible: true }
}
});
});Angular
HTML
TypeScript
<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
],
// ...
})Vue
App.vue
<template>
<DxChart ... >
<DxArgumentAxis
:axis-division-factor="20"
:minor-tick-count="4"
>
<DxTick :visible="true"/>
<DxMinorTick :visible="true"/>
</DxArgumentAxis>
</DxChart>
</template>
<script>
import DxChart, {
DxArgumentAxis,
DxTick,
DxMinorTick
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxArgumentAxis,
DxTick,
DxMinorTick
}
}
</script>React
App.js
import React from 'react';
import Chart, {
ArgumentAxis,
Tick,
MinorTick
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<ArgumentAxis
axisDivisionFactor={20}
minorTickCount={4}
>
<Tick visible={true} />
<MinorTick visible={true} />
</ArgumentAxis>
</Chart>
);
}
}
export default App;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 property for this purpose.
jQuery
JavaScript
$(function() {
$("#chartContainer").dxChart({
// ...
argumentAxis: { // or valueAxis
tick: { visible: true },
discreteAxisDivisionMode: 'crossLabels' // or 'betweenLabels'
}
});
});Angular
HTML
TypeScript
<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
],
// ...
})Vue
App.vue
<template>
<DxChart ... >
<DxArgumentAxis
discrete-axis-division-mode="crossLabels"> <!-- or 'betweenLabels' -->
<DxTick :visible="true"/>
</DxArgumentAxis>
</DxChart>
</template>
<script>
import DxChart, {
DxArgumentAxis,
DxTick
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxArgumentAxis,
DxTick
}
}
</script>React
App.js
import React from 'react';
import Chart, {
ArgumentAxis,
Tick
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<ArgumentAxis
discreteAxisDivisionMode="crossLabels"> {/* or 'betweenLabels' */}
<Tick visible={true} />
</ArgumentAxis>
</Chart>
);
}
}
export default App;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 property is 1. Changing tickInterval, for example, to 2 removes every second value from this sequence, leaving the following: 10-1, 101, 103, etc.
jQuery
JavaScript
$(function() {
$("#chartContainer").dxChart({
// ...
argumentAxis: { // or valueAxis
type: 'logarithmic'
tickInterval: 2,
tick: { visible: true }
}
});
});Angular
HTML
TypeScript
<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
],
// ...
})Vue
App.vue
<template>
<DxChart ... >
<DxArgumentAxis
:tick-interval="2"
type="logarithmic"
>
<DxTick :visible="true"/>
</DxArgumentAxis>
</DxChart>
</template>
<script>
import DxChart, {
DxArgumentAxis,
DxTick
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxArgumentAxis,
DxTick
}
}
</script>React
App.js
import React from 'react';
import Chart, {
ArgumentAxis,
Tick
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<ArgumentAxis
type="logarithmic"
tickInterval={2}
>
<Tick visible={true} />
</ArgumentAxis>
</Chart>
);
}
}
export default App;As an alternative to tickInterval, you can use the axisDivisionFactor property to arrange ticks. This property specifies the minimum distance between two side-by-side ticks in pixels.
jQuery
JavaScript
$(function() {
$("#chartContainer").dxChart({
// ...
argumentAxis: { // or valueAxis
type: 'logarithmic'
axisDivisionFactor: 20,
tick: { visible: true }
}
});
});Angular
HTML
TypeScript
<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
],
// ...
})Vue
App.vue
<template>
<DxChart ... >
<DxArgumentAxis
:axis-division-factor="20"
type="logarithmic"
>
<DxTick :visible="true"/>
</DxArgumentAxis>
</DxChart>
</template>
<script>
import DxChart, {
DxArgumentAxis,
DxTick
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxArgumentAxis,
DxTick
}
}
</script>React
App.js
import React from 'react';
import Chart, {
ArgumentAxis,
Tick
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<ArgumentAxis
type="logarithmic"
axisDivisionFactor={20}
>
<Tick visible={true} />
</ArgumentAxis>
</Chart>
);
}
}
export default App;See Also
Feedback