Vue Chart - argumentAxis.minorTickInterval

Specifies the interval between minor ticks. Applies only to the axes of the "continuous" type.

Type:

Number

|

Object

|

String

Default Value: undefined
Accepted Values: 'day' | 'hour' | 'millisecond' | 'minute' | 'month' | 'quarter' | 'second' | 'week' | 'year'

Minor ticks divide the segment between two neighboring major ticks into smaller segments. Minor ticks are generated automatically, unless the minorTickInterval property is set.

If the axis displays numbers, assign a number to this property. If the axis displays date-time values, assign one of the accepted string values or an object to this property. The object should contain one or several fields described in this section, for example:

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            // ...
            minorTickInterval: { days: 5 }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis ... >
        <dxo-minor-tick-interval [days]="5"></dxo-minor-tick-interval>
    </dxo-argument-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxChart ... >
        <DxArgumentAxis>
            <DxMinorTickInterval :days="5" />
        </DxArgumentAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxMinorTickInterval
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxMinorTickInterval
    }
}
</script>
React
App.js
import React from 'react';

import Chart, {
    ArgumentAxis,
    MinorTickInterval
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis>
                    <MinorTickInterval days={5} />
                </ArgumentAxis>
            </Chart>
        );
    }
}

export default App;

When using the UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this property using the VizTimeInterval enum. This enum accepts the same values, but they start with an upper-case letter, for example, 'day' becomes Day.

See Also
  • argumentAxis.minorTickCount - specifies how many minor ticks to place between two neighboring major ticks.
  • argumentAxis.minorTick - configures the appearance of minor ticks.
  • argumentAxis.tickInterval - specifies the interval between major ticks.

days

Specifies the time interval measured in days. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

hours

Specifies the time interval measured in hours. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

milliseconds

Specifies the time interval measured in milliseconds. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

minutes

Specifies the time interval measured in minutes. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

months

Specifies the time interval measured in months. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

quarters

Specifies the time interval measured in quarters. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

seconds

Specifies the time interval measured in seconds. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

weeks

Specifies the time interval measured in weeks. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

years

Specifies the time interval measured in years. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number