Angular Sankey - Update Data

DevExtreme DataSource

NOTE

This technique requires the key specified in the store.

To get the DataSource instance, call the Sankey's getDataSource() method:

app.component.ts

app.module.ts


import { Component, ViewChild } from '@angular/core';
import { DxSankeyComponent } from 'devextreme-angular';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild(DxSankeyComponent, { static: false }) sankey: DxSankeyComponent;
    // Prior to Angular 8
    // @ViewChild(DxSankeyComponent) sankey: DxSankeyComponent;
    getDataSource() {
        return this.sankey.instance.getDataSource();
    }
}


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
 
import { DxSankeyModule } from 'devextreme-angular';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSankeyModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Sankey will be updated automatically.

JavaScript


getDataSource().store().push([
    { type: "update", key: "Oranges", data: { count: 10 } },
    { type: "remove", key: "Apples" }
]);

JavaScript Array

Enclose the dataSource property in square brackets to bind it to an array using one-way binding. Now, whenever an item is added or removed from the array, the Sankey is updated accordingly.

HTML

TypeScript


<dx-sankey
    [dataSource]="sankeyData">
</dx-sankey>


import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    sankeyData: Array<{ source: string, target: string, weight: number }> = [
        { source: "Brazil", target: "Spain", weight: 4 },
        { source: "Brazil", target: "Portugal", weight: 5 },
        { source: "Brazil", target: "England", weight: 2 },
        { source: "Canada", target: "Portugal", weight: 2 },
        { source: "Canada", target: "England", weight: 1 },
        { source: "Mexico", target: "Portugal", weight: 9 },
        { source: "Mexico", target: "Spain", weight: 5 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})

Was this topic helpful?

Thank you!

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!

Angular Sankey - Update Data

DevExtreme DataSource

See Also

JavaScript Array