DevExtreme React - 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
$(function() { $("#sankeyContainer").dxSankey({ // ... adaptiveLayout: { height: 300, width: 400 } }); });
Angular
<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 ], // ... })
Vue
<template> <DxSankey ... > <DxAdaptiveLayout :height="300" :width="400" /> </DxSankey> </template> <script> import DxSankey, { DxAdaptiveLayout } from 'devextreme-vue/sankey'; export default { components: { DxSankey, DxAdaptiveLayout } } </script>
React
import React from 'react'; import Sankey, { AdaptiveLayout } from 'devextreme-react/sankey'; class App extends React.Component { render() { return ( <Sankey ... > <AdaptiveLayout height={300} width={400} /> </Sankey> ) } } export default App;
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
$("#sankeyContainer").dxSankey("render");
Angular
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 ], // ... })
Vue
<template> <DxSankey ref="sankey" /> </template> <script> import DxSankey from 'devextreme-vue/sankey'; export default { components: { DxSankey }, methods: { renderSankey() { this.$refs.sankey.instance.render(); } } } </script>
React
import React from 'react'; import Sankey from 'devextreme-react/sankey'; class App extends React.Component { constructor(props) { super(props); this.sankeyRef = React.createRef(); } render() { return ( <Sankey ref={this.sankeyRef} /> ) } get sankey() { return this.sankeyRef.current.instance; } renderSankey() { this.sankey.render(); } } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.