Orientation and RTL in ASP.NET Core Sankey Chart component
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:
<ejs-sankey id="sankey-container" width="90%" height="450px" orientation="Horizontal">
<e-sankey-nodes>
@foreach (var node in ViewBag.SankeyNodes)
{
<e-sankey-node id="@node.Id"></e-sankey-node>
}
</e-sankey-nodes>
<e-sankey-links>
@foreach (var link in ViewBag.SankeyLinks)
{
<e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
}
</e-sankey-links>
<e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
<e-sankey-legendsettings visible="true"></e-sankey-legendsettings>
</ejs-sankey>public ActionResult Index()
{
List<SankeyNode> nodes = new List<SankeyNode>
{
new SankeyNode { Id = "Agricultural Waste" },
new SankeyNode { Id = "Biomass Residues" },
new SankeyNode { Id = "Bio-conversion" },
new SankeyNode { Id = "Liquid Biofuel" },
new SankeyNode { Id = "Electricity" },
new SankeyNode { Id = "Heat" }
};
List<SankeyLink> links = new List<SankeyLink>
{
new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
new SankeyLink { SourceId = "Biomass Residues", TargetId = "Bio-conversion", Value = 24.152 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Liquid Biofuel", Value = 10.597 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Electricity", Value = 36.862 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Heat", Value = 60.845 }
};
ViewBag.SankeyNodes = nodes;
ViewBag.SankeyLinks = links;
return View();
}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:
<ejs-sankey id="sankey-container" width="90%" height="450px" orientation="Vertical">
<e-sankey-nodes>
@foreach (var node in ViewBag.SankeyNodes)
{
<e-sankey-node id="@node.Id"></e-sankey-node>
}
</e-sankey-nodes>
<e-sankey-links>
@foreach (var link in ViewBag.SankeyLinks)
{
<e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
}
</e-sankey-links>
<e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
<e-sankey-legendsettings visible="true"></e-sankey-legendsettings>
</ejs-sankey>public ActionResult Index()
{
List<SankeyNode> nodes = new List<SankeyNode>
{
new SankeyNode { Id = "Agricultural Waste" },
new SankeyNode { Id = "Biomass Residues" },
new SankeyNode { Id = "Bio-conversion" },
new SankeyNode { Id = "Liquid Biofuel" },
new SankeyNode { Id = "Electricity" },
new SankeyNode { Id = "Heat" }
};
List<SankeyLink> links = new List<SankeyLink>
{
new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
new SankeyLink { SourceId = "Biomass Residues", TargetId = "Bio-conversion", Value = 24.152 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Liquid Biofuel", Value = 10.597 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Electricity", Value = 36.862 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Heat", Value = 60.845 }
};
ViewBag.SankeyNodes = nodes;
ViewBag.SankeyLinks = links;
return View();
}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:
<ejs-sankey id="sankey-container" width="90%" height="450px" enableRtl="true">
<e-sankey-nodes>
@foreach (var node in ViewBag.SankeyNodes)
{
<e-sankey-node id="@node.Id"></e-sankey-node>
}
</e-sankey-nodes>
<e-sankey-links>
@foreach (var link in ViewBag.SankeyLinks)
{
<e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
}
</e-sankey-links>
<e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
<e-sankey-legendsettings visible="true"></e-sankey-legendsettings>
</ejs-sankey>public ActionResult Index()
{
List<SankeyNode> nodes = new List<SankeyNode>
{
new SankeyNode { Id = "Agricultural Waste" },
new SankeyNode { Id = "Biomass Residues" },
new SankeyNode { Id = "Bio-conversion" },
new SankeyNode { Id = "Liquid Biofuel" },
new SankeyNode { Id = "Electricity" },
new SankeyNode { Id = "Heat" }
};
List<SankeyLink> links = new List<SankeyLink>
{
new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
new SankeyLink { SourceId = "Biomass Residues", TargetId = "Bio-conversion", Value = 24.152 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Liquid Biofuel", Value = 10.597 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Electricity", Value = 36.862 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Heat", Value = 60.845 }
};
ViewBag.SankeyNodes = nodes;
ViewBag.SankeyLinks = links;
return View();
}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:
<ejs-sankey id="sankey-container" width="90%" height="450px" orientation="Horizontal" enableRtl="true">
<e-sankey-nodes>
@foreach (var node in ViewBag.SankeyNodes)
{
<e-sankey-node id="@node.Id"></e-sankey-node>
}
</e-sankey-nodes>
<e-sankey-links>
@foreach (var link in ViewBag.SankeyLinks)
{
<e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
}
</e-sankey-links>
<e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
<e-sankey-legendsettings visible="true"></e-sankey-legendsettings>
</ejs-sankey>public ActionResult Index()
{
List<SankeyNode> nodes = new List<SankeyNode>
{
new SankeyNode { Id = "Agricultural Waste" },
new SankeyNode { Id = "Biomass Residues" },
new SankeyNode { Id = "Bio-conversion" },
new SankeyNode { Id = "Liquid Biofuel" },
new SankeyNode { Id = "Electricity" },
new SankeyNode { Id = "Heat" }
};
List<SankeyLink> links = new List<SankeyLink>
{
new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
new SankeyLink { SourceId = "Biomass Residues", TargetId = "Bio-conversion", Value = 24.152 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Liquid Biofuel", Value = 10.597 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Electricity", Value = 36.862 },
new SankeyLink { SourceId = "Bio-conversion", TargetId = "Heat", Value = 60.845 }
};
ViewBag.SankeyNodes = nodes;
ViewBag.SankeyLinks = links;
return View();
}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 your specific visualization needs
- Ensure all labels and text content support the target language and character encoding