Vue 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.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        adaptiveLayout: {
            height: 300,
            width: 400
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-sankey-adaptive-layout [height]="300" [width]="400"></dxo-sankey-adaptive-layout>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.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
App.tsx
import React from 'react';
import Sankey, { AdaptiveLayout } from 'devextreme-react/sankey';

function App() {
    return (
        <Sankey ... >
            <AdaptiveLayout
                height={300}
                width={400}
            />
        </Sankey>
    );
}

export default App;
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.

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
    ],
    // ...
})
Vue
App.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
App.tsx
import React, { useCallback, useRef } from 'react';
import Sankey, { type SankeyRef } from 'devextreme-react/sankey';

function App() {
    const sankeyRef = useRef<SankeyRef>(null);

    const renderSankey = useCallback(() => {
        const sankey = sankeyRef.current?.instance();
        sankey?.render();
    }, []);

    return (
        <Sankey ref={sankeyRef} />
    );
}

export default App;