All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Adaptive Layout

With the ever-growing variety of platforms, today's web sites and applications cannot stay competitive without being adaptive. Supporting this modern standard, the Chart widget possesses an adaptive layout. This enables the Chart to hide its accessory elements if the container is not large enough to fit them. To configure the adaptive layout, use the adaptiveLayout object. Set its height and width fields to specify the minimum container size at which the layout retains all its elements.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        adaptiveLayout: {
            height: 300,
            width: 400
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-adaptive-layout [height]="300" [width]="400"></dxo-adaptive-layout>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

View Demo on JSFiddle

NOTE

The layout does not automatically adapt to changes made in the widget's container at runtime. Therefore, if you enable a user to resize the container, call the render() method after each resizing to render the Chart in the new size.

jQuery
JavaScript
$("#chartContainer").dxChart("render");
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxChartModule, DxChartComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
    // Prior to Angular 8
    // @ViewChild(DxChartComponent) chart: DxChartComponent;
    renderChart () {
        this.chart.instance.render();
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
See Also