Angular Sankey Diagram – Elegant and Interactive Visualization

<ejs-sankey
      id="sankey"
      title="Device Usage"
      [nodeStyle]="nodeStyle"
      [linkStyle]="linkStyle"
      [legendSettings]="legendSettings">

      <e-sankey-nodes>
          <e-sankey-node id="Female" :label="{ text: 'Female (58%)' }" />
          <e-sankey-node id="Male" :label="{ text: 'Male (42%)' }" />
          <e-sankey-node id="Tablet" :label="{ text: 'Tablet (12%)' }" />
          <e-sankey-node id="Mobile" :label="{ text: 'Mobile (40%)' }" />
          <e-sankey-node id="Desktop" :label="{ text: 'Desktop (48%)' }" />
          <e-sankey-node id="< 18" :label="{ text: '< 18 years (8%)' }" />
          <e-sankey-node id="18-26" :label="{ text: '18-26 years (35%)' }" />
          <e-sankey-node id="27-40" :label="{ text: '27-40 years (38%)' }" />
          <e-sankey-node id="> 40" :label="{ text: '> 40 years (19%)' }" />
      </e-sankey-nodes>

      <e-sankey-links>
          <e-sankey-link source-id="Female" target-id="Tablet" :value="12" />
          <e-sankey-link source-id="Female" target-id="Mobile" :value="14" />
          <e-sankey-link source-id="Female" target-id="Desktop" :value="32" />
          <e-sankey-link source-id="Male" target-id="Mobile" :value="26" />
          <e-sankey-link source-id="Male" target-id="Desktop" :value="16" />
          <e-sankey-link source-id="Tablet" target-id="< 18" :value="4" />
          <e-sankey-link source-id="Tablet" target-id="> 40" :value="8" />
          <e-sankey-link source-id="Mobile" target-id="< 18" :value="4" />
          <e-sankey-link source-id="Mobile" target-id="18-26" :value="24" />
          <e-sankey-link source-id="Mobile" target-id="27-40" :value="10" />
          <e-sankey-link source-id="Mobile" target-id="> 40" :value="2" />
          <e-sankey-link source-id="Desktop" target-id="18-26" :value="11" />
          <e-sankey-link source-id="Desktop" target-id="27-40" :value="28" />
          <e-sankey-link source-id="Desktop" target-id="> 40" :value="9" />
      </e-sankey-links>
      
</ejs-sankey>

//app.component.ts
import { Component } from '@angular/core';
export class AppComponent {
  public legendSettings: Object = {
      visible: true,
      position: 'Bottom'
  }; 
  public linkStyle: Object = {
      colorType: 'Source'
  };
  public nodeStyle: Object = { 
      width: 30, 
      padding: 10 
  };
}

//app.module.ts
import { SankeyAllModule } from '@syncfusion/ej2-ng-charts';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    SankeyAllModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }