All docs
V19.1
20.2
20.1
19.2
19.1
18.2
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.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Adaptive Layout

The Sankey widget has an adaptive layout that enables the widget to hide optional elements if they do not fit in the container. 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() {
    $("#sankeyContainer").dxSankey({
        // ...
        adaptiveLayout: {
            height: 300,
            width: 400
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-adaptive-layout [height]="300" [width]="400"></dxo-adaptive-layout>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
NOTE

The layout does not automatically adapt if the widget's container is resized at runtime. If you enable a user to resize the container, call the render() method each time it is resized to rerender the Sankey.

jQuery
JavaScript
$("#sankeyContainer").dxSankey("render");
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxSankeyModule, DxSankeyComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxSankeyComponent, { static: false }) sankey: DxSankeyComponent;
    // Prior to Angular 8
    // @ViewChild(DxSankeyComponent) sankey: DxSankeyComponent;
    renderSankey() {
        this.sankey.instance.render();
    }
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})