Angular Sankey - Adaptive Layout
The Sankey UI component has an adaptive layout that enables the UI component 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.
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 UI component'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.
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
- ],
- // ...
- })
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.