Title and Subtitle in ASP.NET Core Sankey Chart component

The Sankey Chart supports adding descriptive titles and subtitles to provide context and information about your data visualization. These text elements help users quickly understand the purpose and content of the diagram. You can fully customize the text, styling, alignment, and appearance using dedicated properties.

This guide covers title and subtitle configuration, styling options, and best practices for effective diagram labeling.

Title and Subtitle Properties

Property Type Description
title string The main title text displayed at the top of the chart.
subTitle string The subtitle text displayed below the main title.
titleStyle object Styling options for the title text.
subTitleStyle object Styling options for the subtitle text.

Title/Subtitle Style Properties

Both TitleStyle and SubTitleStyle support the following properties:

Property Type Default Description
size string null Font size for the text.
fontWeight string null Font weight (e.g., ‘400’, ‘700’).
fontFamily string null Font family name.
color string null Text color.
fontStyle string ‘normal’ Font style (‘normal’ or ‘italic’).
opacity number 1 Text opacity (0 to 1).
textAlignment string ‘Center’ Text alignment (‘Left’, ‘Center’, ‘Right’).

Basic Title and Subtitle

Add a main title and descriptive subtitle to your Sankey Chart to provide context about the data visualization:

<ejs-sankey id="sankey-container" width="90%" height="450px"
            title="Energy Flow Diagram" subTitle="Agricultural Energy Conversion">
    <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();
}

Customized Title and Subtitle Styling

Apply custom styling to both the title and subtitle including font properties, colors, alignment, and opacity to match your design requirements:

<ejs-sankey id="sankey-container" width="90%" height="450px"
            title="Energy Flow Diagram" subTitle="Agricultural Energy Conversion">
    <e-sankey-titlestyle
        fontFamily="@ViewBag.TitleFontFamily"
        fontStyle="@ViewBag.TitleFontStyle"
        fontWeight="@ViewBag.TitleFontWeight"
        size="@ViewBag.TitleSize"
        color="@ViewBag.TitleColor">
    </e-sankey-titlestyle>
    <e-sankey-subtitlestyle
        fontFamily="@ViewBag.SubTitleFontFamily"
        fontStyle="@ViewBag.SubTitleFontStyle"
        fontWeight="@ViewBag.SubTitleFontWeight"
        size="@ViewBag.SubTitleSize"
        color="@ViewBag.SubTitleColor">
    </e-sankey-subtitlestyle>
    <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;
    ViewBag.TitleFontFamily = "Arial";
    ViewBag.TitleFontStyle = "italic";
    ViewBag.TitleFontWeight = "bold";
    ViewBag.TitleSize = "18px";
    ViewBag.TitleColor = "#1F77B4";
    ViewBag.SubTitleFontFamily = "Arial";
    ViewBag.SubTitleFontStyle = "normal";
    ViewBag.SubTitleFontWeight = "normal";
    ViewBag.SubTitleSize = "14px";
    ViewBag.SubTitleColor = "#FF7F0E";

    return View();
}

Title Only (Without Subtitle)

Add only a title to the Sankey Chart when a subtitle is not needed. This provides a clean, minimal header for your visualization:

<ejs-sankey id="sankey-container" width="90%" height="450px"
            title="Energy Flow Diagram">
    <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();
}

Title with Different Alignments

Control the alignment of title and subtitle text:

<ejs-sankey id="sankey-container" width="90%" height="450px" title="Energy Flow Diagram" subTitle="Agricultural Energy Conversion">
    <e-sankey-titlestyle textAlignment="Near"></e-sankey-titlestyle>
    <e-sankey-subtitlestyle textAlignment="Center"></e-sankey-subtitlestyle>
    <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();
}

Title Best Practices

  • Descriptive: Use clear, descriptive titles that explain what the chart shows
  • Concise: Keep titles brief and to the point
  • Hierarchy: Make the title larger and bolder than the subtitle for visual hierarchy
  • Readability: Ensure sufficient contrast between text color and background
  • Font Choice: Use readable fonts like Segoe UI, Arial, or Verdana