All docs
V21.2
22.1
21.2
21.1
The page you are viewing does not exist in version 21.1. This link will take you to the root page.
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
Box
Map
Vue

scaleTypeRange

Configures zoom range settings.

Type:

Object

Use the scaleTypeRange.min and scaleTypeRange.max properties to limit zoom in the Gantt chart.

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        scaleTypeRange: {
            min: 'days',
            max: 'years'
        },
        // ...
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
    <dxo-scale-type-range
        [min]="days" 
        [max]="years">
    </dxo-scale-type-range>
    <!-- ... -->
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    // ...      
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxGantt ... >
        <DxScaleTypeRange
            min="days"
            max="years"
        />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxScaleTypeRange, 
        // ... 
    } from 'devextreme-vue/gantt';

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

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    ScaleTypeRange , 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <ScaleTypeRange
                min="days"
                max="years" />
            {/* ... */}
        </Gantt>
    );
};

export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .ScaleTypeRange(e => {
        e.Min(GanttScaleType.Days)
        e.Max(GanttScaleType.Years)
    })
    // ...
)
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .ScaleTypeRange(e => {
        e.Min(GanttScaleType.Days)
        e.Max(GanttScaleType.Years)
    })
    // ...
)
See Also

max

Specifies the maximum zoom level of tasks in the Gantt chart.

Type:

String

Default Value: 'years'
Accepted Values: 'auto' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'quarters' | 'years'

min

Specifies the minimum zoom level of tasks in the Gantt chart.

Type:

String

Default Value: 'minutes'
Accepted Values: 'auto' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'quarters' | 'years'