Customization in ASP.NET Core Sankey Chart component

The Sankey Chart provides extensive customization options to create visualizations that match your specific design requirements and data presentation needs. From styling and theming to advanced visual techniques, the component enables complete control over appearance and behavior.

This guide covers comprehensive customization techniques including styling, theming, color mapping, and visual customization strategies.

Styling Overview

The Sankey Chart supports multiple levels of styling customization:

  • Global Styling: Apply consistent styles to all elements
  • Element-Level Styling: Customize specific nodes, links, or labels
  • Data-Driven Styling: Apply styles based on data values or conditions
  • Theme-Based Styling: Use predefined themes or create custom themes

Global Node Styling

Apply consistent styling to all nodes using the NodeStyle property:

<ejs-sankey id="sankey-container" width="90%" height="450px">
    <e-sankey-nodesettings
        fill="@ViewBag.NodeFill"
        opacity="@ViewBag.NodeOpacity"
        width="@ViewBag.NodeBorderWidth">
    </e-sankey-nodesettings>
    <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 = "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 = 124.729 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Liquid Biofuel", Value = 0.597 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Electricity",    Value = 26.862 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Heat",           Value = 280.845 }
    };

    ViewBag.SankeyNodes = nodes;
    ViewBag.SankeyLinks = links;
    ViewBag.NodeFill = "#4472C4";
    ViewBag.NodeOpacity = 0.8;
    ViewBag.NodeBorderWidth = 2;

    return View();
}

Configure link appearance using the LinkStyle property:

<ejs-sankey id="sankey-container" width="90%" height="450px">
    <e-sankey-linksettings opacity="0.5" curvature="0.4"></e-sankey-linksettings>
    <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();
}

Individual Element Customization

Custom Node Appearance

Customize individual nodes by setting properties on each node object:

<ejs-sankey id="sankey-container" width="90%" height="450px">
    <e-sankey-nodes>
        @foreach (var node in ViewBag.SankeyNodes)
        {
            <e-sankey-node id="@node.Id" color="@node.Color"></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", Color = "#FF6B6B" },
        new SankeyNode { Id = "Bio-conversion", Color = "#4ECDC4" },
        new SankeyNode { Id = "Liquid Biofuel", Color = "#45B7D1" },
        new SankeyNode { Id = "Electricity", Color = "#FFA07A" },
        new SankeyNode { Id = "Heat", Color = "#98D8C8" }
    };

    List<SankeyLink> links = new List<SankeyLink>
    {
        new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 124.729 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Liquid Biofuel", Value = 0.597 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Electricity",    Value = 26.862 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Heat",           Value = 280.845 }
    };

    ViewBag.SankeyNodes = nodes;
    ViewBag.SankeyLinks = links;

    return View();
}

Custom Node Labels

Customize individual node labels with specific text, styling, and positioning:

<ejs-sankey id="sankey-container" width="90%" height="450px">
    <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>
    <e-sankey-labelsettings visible="true" fontFamily="Segoe UI" fontWeight="Bold" size="14px" color="#1a1a1a"></e-sankey-labelsettings>
</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();
}

Color Customization

Predefined Color Palettes

Apply predefined color palettes to automatically color nodes:

const nodes = [
  { id: 'Source1', label: { text: 'Source 1' }, color: '#3DA6D4' },
  { id: 'Source2', label: { text: 'Source 2' }, color: '#FFA500' },
  { id: 'Target', label: { text: 'Target' }, color: '#28A745' }
];

Color Mapping

Map colors to specific categories or value ranges:

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

Theme Customization

Apply Theme

const theme = 'Material'; // or 'Fabric', 'Bootstrap', 'HighContrast'

return (
  <SankeyChartComponent 
    theme={theme}
    {...otherProps}
  >
  </SankeyChartComponent>
);

Custom Theme Colors

<ejs-sankey id="sankey-container" width="90%" height="450px">
    <e-sankey-nodesettings fill="@ViewBag.NodeFill"></e-sankey-nodesettings>

    <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.NodeFill = "#5A5A5A";

    return View();
}

Tooltip Customization

Template-Based Tooltips

Create custom tooltip templates for rich content:

<ejs-sankey id="sankey-container" width="90%" height="450px">
    <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" nodeTemplate='@("#sankeyTooltipTemplate")'>
    </e-sankey-tooltipsettings>
</ejs-sankey>

<script id="sankeyTooltipTemplate" type="text/x-template">
    <div style="padding:10px; border-radius:6px"><b>${sourceNodeName} → ${targetNodeName}</b><br />Value: ${value}
    </div>
</script>
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();
}

Advanced Customization Patterns

Conditional Styling Based on Data

Apply different styles based on data conditions or value ranges:

const onNodeRendering = (args) => {
  const value = args.node.value || 0;
  
  if (value > 200) {
    args.node.color = '#00A651'; // High flow - green
  } else if (value > 100) {
    args.node.color = '#FFB81C'; // Medium flow - orange
  } else {
    args.node.color = '#E81B23'; // Low flow - red
  }
};

Category-Based Styling

Assign colors and styles based on node categories:

const categoryColors = {
  'Energy': '#FF6B6B',
  'Transport': '#4ECDC4',
  'Industry': '#95E1D3',
  'Residential': '#FFD93D'
};

const onNodeRendering = (args) => {
  const category = extractCategory(args.node.id);
  args.node.color = categoryColors[category] || '#999';
};

Interactive Styling

Apply different styles for hover and focus states:

const onNodeEnter = (args) => {
  // Highlight node on hover
  args.node.highlightOpacity = 1;
};

const onNodeLeave = (args) => {
  // Reset to normal state
  args.node.highlightOpacity = 0.3;
};

Performance Optimization

Large Dataset Customization

For charts with many nodes and links, optimize rendering performance:

  1. Use Global Styles: Apply global NodeStyle and LinkStyle instead of individual customization
  2. Minimize Calculations: Reduce complex calculations in rendering events
  3. Conditional Rendering: Only customize visible elements in viewport
  4. Cache Results: Cache computed styles and colors

Customization Best Practices

Key Considerations

  1. Consistency
    • Maintain consistent color schemes across nodes and links
    • Use meaningful colors that represent data categories
    • Apply visual hierarchy through size and opacity
  2. Performance
    • Avoid complex calculations in rendering events
    • Use global styles when possible
    • Optimize for large datasets
  3. Accessibility
    • Don’t rely solely on color for information
    • Ensure sufficient contrast ratios
    • Provide alternative representations
  4. User Experience
    • Use intuitive color mapping
    • Provide clear visual feedback for interactions
    • Maintain visual consistency with your application
  5. Maintainability
    • Document custom styling logic
    • Use reusable style functions
    • Separate styling from business logic

Example: Comprehensive Customization

<ejs-sankey id="sankey-container" width="90%" height="450px" title="Comprehensive Sankey Customization">
    <e-sankey-margin left="40" right="40" top="40" bottom="40"></e-sankey-margin>
    <e-sankey-nodesettings opacity="0.85"></e-sankey-nodesettings>
    <e-sankey-linksettings opacity="0.6" curvature="0.5"></e-sankey-linksettings>
    <e-sankey-labelsettings visible="true" fontWeight="Bold"></e-sankey-labelsettings>
    <e-sankey-tooltipsettings
        enable="true"
        nodeFormat="${name}: ${value}"
        linkFormat="${start.name}: ${start.out} → ${target.name}: ${target.in}">
    </e-sankey-tooltipsettings>
    <e-sankey-legendsettings visible="true" position="Bottom"></e-sankey-legendsettings>
    <e-sankey-nodes>
        @foreach (var node in ViewBag.SankeyNodes)
        {
            <e-sankey-node id="@node.Id" color="@node.Color"></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>
</ejs-sankey>
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Agricultural Waste", Color = "#FF6B6B" },
        new SankeyNode { Id = "Biomass Residues" },
        new SankeyNode { Id = "Bio-conversion", Color = "#4ECDC4" },
        new SankeyNode { Id = "Liquid Biofuel", Color = "#45B7D1" },
        new SankeyNode { Id = "Electricity", Color = "#FFA07A" },
        new SankeyNode { Id = "Heat", Color = "#98D8C8" }
    };

    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();
}