React Chart - valueAxis.minorTick

Configures the appearance of minor axis ticks.

Selector: MinorTick
Type:

Object

In addition to major ticks, the DevExtreme Chart can display minor ticks. This component places minor ticks between major ticks.

DevExtreme HTML5 Charts MinorTicks

jQuery
index.js
$('#chart').dxChart({
    commonAxisSettings: {
        minorTick: {
            visible: true,
            color: "blue",
            length: 10,
            opacity: 0.5,
            shift: 0,
            width: 1,
        },
    },
})
Angular
app.component.html
<dx-chart ... >
    <dxo-common-axis-settings>
        <dxo-minor-tick
            [visible]="true"
            color="blue"
            [length]="10"
            [opacity]="0.5"
            [shift]="0"
            [width]="1"
        ></dxo-minor-tick>
    </dxo-common-axis-settings>
</dx-chart>
Vue
App.vue
<template>
    <DxChart ... >
        <DxCommonAxisSettings>
            <DxMinorTick
                :visible="true"
                color="blue"
                :length="10"
                :opacity="0.5"
                :shift="0"
                :width="1"
            />
        </DxCommonAxisSettings>
    </DxChart>
</template>

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

</script>
React
App.tsx
import { Chart, CommonAxisSettings, MinorTick } from 'devextreme-react/chart';

function App() {
    return (
        <Chart ... >
            <CommonAxisSettings>
                <MinorTick
                    visible={true}
                    color="blue"
                    length={10}
                    opacity={0.5}
                    shift={0}
                    width={1}
                />
            </CommonAxisSettings>
        </Chart>
    )
}

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

Axis-specific settings override common settings.

NOTE
The component does not display minor ticks for "discrete" axes.
See Also
  • argumentAxis.minorTickInterval - specifies the minor tick interval of the argument axis.
  • valueAxis.minorTickInterval - specifies the minor tick interval of the value axis.

color

Specifies the color of minor ticks.

Type:

String

Default Value: '#767676'

This property supports the following colors:

length

Specifies the length of minor ticks in pixels.

Type:

Number

Default Value: 7

opacity

Specifies how transparent minor ticks should be.

Type:

Number

Default Value: 0.3

This property accepts a value from 0 to 1, where 0 makes minor ticks completely transparent, and 1 makes them opaque.

shift

Shifts minor ticks from the reference position.

Type:

Number

Default Value: 3

Main article: shift for major ticks

visible

Makes minor ticks visible.

Type:

Boolean

Default Value: false

width

Specifies the width of minor ticks in pixels.

Type:

Number

Default Value: 1