Orientation and RTL in Angular Sankey component

18 Nov 201813 minutes to read

The Sankey Chart supports flexible layout options including horizontal and vertical orientations, as well as right-to-left (RTL) rendering for international applications. These features enable you to create localized and directionally appropriate visualizations.

This guide covers orientation options and RTL configuration for different languages and reading directions.

Orientation

Control the layout direction of the Sankey Chart using the orientation property. The orientation determines how nodes are arranged and how links flow through the diagram.

Orientation Options

Option	Description
‘Horizontal’	Nodes flow from left to right. Links flow horizontally between nodes. (Default)
‘Vertical’	Nodes flow from top to bottom. Links flow vertically between nodes.

Horizontal Orientation

The default orientation displays nodes horizontally across the chart, with flows moving from left to right. This is the standard layout for most Sankey diagrams:

app.component.ts

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

@Component({
  standalone: true,
  selector: 'app-container',
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  template: `
<div class="control-pane">
      <div class="control-section"  id="sankey-container">
    <ejs-sankey
      width="90%"
      height="450px"
      orientation="Horizontal"
      [tooltip]="tooltip"
      [legendSettings]="legendSettings"
    >
      <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 {
  public tooltip = {
    enable: true
  };

  public legendSettings = {
    visible: true
  };
}

main.ts

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

Vertical Orientation

Display nodes vertically with flows moving from top to bottom. This layout is useful for depicting hierarchical relationships or processes that flow downward:

app.component.ts

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

@Component({
  standalone: true,
  selector: 'app-container',
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  template: `
 <div class="control-pane">
      <div class="control-section"  id="sankey-container">
    <ejs-sankey
      width="90%"
      height="450px"
      orientation="Vertical"
      [tooltip]="tooltip"
      [legendSettings]="legendSettings"
    >
      <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 {
  public tooltip = {
    enable: true
  };

  public legendSettings = {
    visible: true
  };
}

main.ts

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

Right-to-Left (RTL) Support

Enable RTL rendering for languages that read from right to left (such as Arabic, Hebrew, and Persian) using the enableRtl property. RTL mode reverses the horizontal flow direction and mirrors the layout:

app.component.ts

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

@Component({
  standalone: true,
  selector: 'app-container',
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  template: `
  <div class="control-pane">
      <div class="control-section"  id="sankey-container">
        <ejs-sankey
          width="90%"
          height="450px"
          enableRtl="true"
          [tooltip]="tooltip"
          [legendSettings]="legendSettings"
        >
          <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>
  `,
  styles: [`
    .control-pane {
      padding: 20px;
      direction: rtl;
      text-align: right;
    }
    .control-section {
      max-width: 1400px;
      margin: 0 auto;
    }
  `]
})
export class AppComponent {
  public tooltip = {
    enable: true
  };

  public legendSettings = {
    visible: true
  };
}

main.ts

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

RTL with Horizontal Orientation

Combining RTL mode with horizontal orientation creates a right‑to‑left flow layout. Nodes flow from right to left, and labels are right‑aligned, making it suitable for RTL languages.

app.component.ts

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

@Component({
  standalone: true,
  selector: 'app-container',
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  template: `
 <div class="control-pane">
      <div class="control-section"  id="sankey-container">
        <ejs-sankey
          width="90%"
          height="450px"
          orientation="Horizontal"
          enableRtl="true"
          [tooltip]="tooltip"
          [legendSettings]="legendSettings"
        >
          <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>
  `,
  styles: [`
    .control-pane {
      padding: 20px;
      direction: rtl;
      text-align: right;
    }
    .control-section {
      max-width: 1400px;
      margin: 0 auto;
    }
  `]
})
export class AppComponent {
  public tooltip = {
    enable: true
  };

  public legendSettings = {
    visible: true
  };
}

main.ts

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

RTL Effects on Layout

When RTL is enabled:

• Nodes flow from right to left in horizontal orientation
• Legend positions are mirrored
• Labels and text are right‑aligned
• Tooltips and menus adjust to RTL layout
• All UI elements adapt to right‑to‑left reading order

Best Practices

• Use RTL when targeting languages like Arabic, Hebrew, Persian, or Urdu
• Test layouts in both LTR and RTL modes to ensure proper spacing and readability
• Combine orientation and RTL settings based on visualization needs
• Ensure all labels and text support the target language and character encoding