Appearance in Angular Sankey component

25 Mar 202621 minutes to read

The Sankey component provides comprehensive customization options to control visual appearance, dimensions, responsiveness, colors, borders, and themes. These appearance settings enable you to create diagrams that match your application’s design system and user experience requirements.

Dimensions

Control the size of the Sankey component using the width and height properties. You can specify dimensions in pixels (px) or percentages (%) to create fixed or responsive layouts.

Width and Height Properties

Property	Type	Default	Description
width	string	null	Width of the diagram as a CSS value (e.g., ‘700px’ or ‘100%’).
height	string	null	Height of the diagram as a CSS value (e.g., ‘420px’ or ‘100%’).

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [
        SankeyAllModule
    ],
    standalone: true,
    selector: 'app-container',
    template: `
    <div className="control-pane">
      <div className="control-section" id="sankey-container">

        <ejs-sankey
            width="800px"
            height="600px"
            [margin]="margin">

          <e-sankey-nodes>
            <e-sankey-node id="Agricultural Waste"></e-sankey-node>
            <e-sankey-node id="Biomass Residues"></e-sankey-node>
            <e-sankey-node id="Bio-conversion"></e-sankey-node>
            <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
            <e-sankey-node id="Electricity"></e-sankey-node>
            <e-sankey-node id="Heat"></e-sankey-node>
          </e-sankey-nodes>

          <e-sankey-links>
            <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
            <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
          </e-sankey-links>

        </ejs-sankey>

      </div>
    </div>
    `
})
export class AppComponent implements OnInit {
    public margin?: Object;

    ngOnInit(): void {
        this.margin = {
            left: 40,
            right: 40,
            top: 40,
            bottom: 40
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Responsive Sizing

Use percentage-based dimensions for responsive layouts that adapt to container sizes. This is recommended for applications that need to work across different device sizes and screen orientations.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import { Browser } from '@syncfusion/ej2/base';

@Component({
    imports: [
        SankeyAllModule
    ],
    standalone: true,
    selector: 'app-container',
    template: `
    <div className="control-pane">
      <div className="control-section" id="sankey-container">

        <ejs-sankey
          width="90%"
          [height]="sankeyHeight"
          [margin]="sankeyMargin">

          <e-sankey-nodes>
            <e-sankey-node id="Agricultural Waste"></e-sankey-node>
            <e-sankey-node id="Biomass Residues"></e-sankey-node>
            <e-sankey-node id="Bio-conversion"></e-sankey-node>
            <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
            <e-sankey-node id="Electricity"></e-sankey-node>
            <e-sankey-node id="Heat"></e-sankey-node>
          </e-sankey-nodes>

          <e-sankey-links>
            <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
            <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
          </e-sankey-links>

        </ejs-sankey>

      </div>
    </div>
    `
})
export class AppComponent implements OnInit {
    public sankeyHeight: string = '450px';
    public sankeyMargin?: Object;

    ngOnInit(): void {
        this.sankeyHeight = Browser.isDevice ? '600px' : '450px';

        this.sankeyMargin = {
            left: Browser.isDevice ? 10 : 40,
            right: Browser.isDevice ? 10 : 40,
            top: 20,
            bottom: 20
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Background Customization

Customize the background and border of the Sankey diagram to match your application’s theme.

Background Properties

Property	Type	Default	Description
background	string	null	Background color of the chart (CSS color value).
backgroundImage	string	null	Background image URL.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import {
  SankeyTooltipService,
  SankeyLegendService,
  SankeyExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [
    SankeyAllModule
  ],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  standalone: true,
  selector: 'app-container',
  template: `
    <div className="control-pane">
      <div className="control-section" id="sankey-container">
        <ejs-sankey width="90%" height="450px" [background]="background">
          
          <e-sankey-nodes>
            <e-sankey-node id="Agricultural Waste"></e-sankey-node>
            <e-sankey-node id="Biomass Residues"></e-sankey-node>
            <e-sankey-node id="Bio-conversion"></e-sankey-node>
            <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
            <e-sankey-node id="Electricity"></e-sankey-node>
            <e-sankey-node id="Heat"></e-sankey-node>
          </e-sankey-nodes>

          <e-sankey-links>
            <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
            <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
          </e-sankey-links>

        </ejs-sankey>
      </div>
    </div>
  `
})
export class AppComponent implements OnInit {
  public background?: Object;

  ngOnInit(): void {
    this.background = '#f0f0f0';
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Border Customization

Border Properties

Customize the border of the Sankey Chart container.

Property	Type	Default	Description
border.color	string	’’	Border color. Accepts values in hex or RGBA as valid CSS color strings.
border.width	number	1	Border width in pixels.
border.dashArray	string	’’	Sets the length of dashes in the stroke of border.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import { SankeyTooltipService, SankeyLegendService, SankeyExportService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [
        SankeyAllModule
    ],
    providers: [SankeyTooltipService, SankeyLegendService, SankeyExportService],
    standalone: true,
    selector: 'app-container',
    template: `
    <div className="control-pane">
      <div className="control-section" id="sankey-container">

        <ejs-sankey width="90%" height="450px" [border]="border">

          <e-sankey-nodes>
            <e-sankey-node id="Agricultural Waste"></e-sankey-node>
            <e-sankey-node id="Biomass Residues"></e-sankey-node>
            <e-sankey-node id="Bio-conversion"></e-sankey-node>
            <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
            <e-sankey-node id="Electricity"></e-sankey-node>
            <e-sankey-node id="Heat"></e-sankey-node>
          </e-sankey-nodes>

          <e-sankey-links>
            <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
            <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
          </e-sankey-links>

        </ejs-sankey>

      </div>
    </div>`
})
export class AppComponent implements OnInit {
    public border?: Object;

    ngOnInit(): void {
        this.border = {
            color: '#333',
            width: 2
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Margin Customization

Control the spacing around the chart content using margins.

Margin Properties

Property	Type	Default	Description
margin.left	number	10	Left margin in pixels.
margin.right	number	10	Right margin in pixels.
margin.top	number	10	Top margin in pixels.
margin.bottom	number	10	Bottom margin in pixels.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [
        SankeyAllModule
    ],
    standalone: true,
    selector: 'app-container',
    template: `
    <div className="control-pane">
      <div className="control-section" id="sankey-container">

        <ejs-sankey
            width="90%"
            height="450px"
            [margin]="margin">

          <e-sankey-nodes>
            <e-sankey-node id="Agricultural Waste"></e-sankey-node>
            <e-sankey-node id="Biomass Residues"></e-sankey-node>
            <e-sankey-node id="Bio-conversion"></e-sankey-node>
            <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
            <e-sankey-node id="Electricity"></e-sankey-node>
            <e-sankey-node id="Heat"></e-sankey-node>
          </e-sankey-nodes>

          <e-sankey-links>
            <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
            <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
          </e-sankey-links>

        </ejs-sankey>

      </div>
    </div>
    `
})
export class AppComponent implements OnInit {
    public margin?: Object;

    ngOnInit(): void {
        this.margin = {
            left: 50,
            right: 50,
            top: 50,
            bottom: 50
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Theme

The Sankey component provides multiple built-in themes to customize the visual appearance. Apply a theme using the theme property.

Theme Configuration

app.component.ts

import { Component } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [
        SankeyAllModule
    ],
    standalone: true,
    selector: 'app-container',
    template: `
    <div class="control-pane">
      <div class="control-section" id="sankey-container">

        <ejs-sankey
          width="90%"
          height="450px"
          theme="Tailwind">

          <e-sankey-nodes>
            <e-sankey-node id="Agricultural Waste"></e-sankey-node>
            <e-sankey-node id="Biomass Residues"></e-sankey-node>
            <e-sankey-node id="Bio-conversion"></e-sankey-node>
            <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
            <e-sankey-node id="Electricity"></e-sankey-node>
            <e-sankey-node id="Heat"></e-sankey-node>
          </e-sankey-nodes>

          <e-sankey-links>
            <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
            <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
            <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
          </e-sankey-links>

        </ejs-sankey>

      </div>
    </div>
    `
})
export class AppComponent{}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));