JavaScript/jQuery Chart - valueAxis.tick

Configures major axis tick appearance.

Type:

Ticks help you align values with their corresponding data points on an axis. The tick object configures major ticks that are placed in relation to value labels.

DevExtreme HTML5 Charts MajorTicks

jQuery

index.js

$('#chart').dxChart({
    commonAxisSettings: {
        tick: {
            visible: true,
            color: "blue",
            length: 20,
            opacity: 0.75,
            shift: 0,
            width: 2,
        },
    },
})

Angular

app.component.html

<dx-chart ... >
    <dxo-common-axis-settings>
        <dxo-tick
            [visible]="true"
            color="blue"
            [length]="20"
            [opacity]="0.75"
            [shift]="0"
            [width]="2"
        ></dxo-tick>
    </dxo-common-axis-settings>
</dx-chart>

Vue

App.vue

<template>
    <DxChart ... >
        <DxCommonAxisSettings>
            <DxTick
                :visible="true"
                color="blue"
                :length="20"
                :opacity="0.75"
                :shift="0"
                :width="2"
            />
        </DxCommonAxisSettings>
    </DxChart>
</template>

<script setup lang="ts">
import { DxChart, DxCommonAxisSettings, DxTick } from 'devextreme-vue/chart';

</script>

React

App.tsx

import { Chart, CommonAxisSettings, Tick } from 'devextreme-react/chart';

function App() {
    return (
        <Chart ... >
            <CommonAxisSettings>
                <Tick
                    visible={true}
                    color="blue"
                    length={20}
                    opacity={0.75}
                    shift={0}
                    width={2}
                />
            </CommonAxisSettings>
        </Chart>
    )
}

The commonAxisSettings.tick object specifies common settings for all major ticks in a chart. To configure only those major ticks that belong to a particular axis, use the following objects: