All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Axis Ticks

Axis ticks divide an axis into parts, and thus the readability of visualized data is improved. There are major and minor ticks. They differ in appearance.

DevExtreme HTML5 JavaScript Charts AxisTicks

To configure major or minor ticks, use the tick or minorTick object respectively. Options in these objects change the color, length, width, and opacity of ticks. But before specifying them, make sure that you have made ticks visible.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: { // or valueAxis, or commonAxisSettings
            tick: { visible: true },
            minorTick: { visible: true }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis> <!-- or dxi-value-axis, or dxo-common-axis-settings -->
        <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> <!-- or DxValueAxis, or DxCommonAxisSettings -->
            <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> {/* or ValueAxis, or CommonAxisSettings */}
                    <Tick visible={true} />
                    <MinorTick visible={true} />
                </ArgumentAxis>
            </Chart>
        );
    }
}

export default App;
See Also