JavaScript/jQuery Gantt - 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:

GanttScaleType

Default Value: 'years'

min

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

Type:

GanttScaleType

Default Value: 'minutes'