starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

[PR #2220] Add Sankey Chart Component to Radzen Blazor #3143

New Issue
Closed
opened 2026-01-29 18:22:06 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 18:22:06 +00:00
Owner
Copy Link

Original Pull Request: https://github.com/radzenhq/radzen-blazor/pull/2220

State: closed
Merged: Yes

Summary

This PR adds a new Sankey chart component to the Radzen Blazor library. Sankey diagrams are flow diagrams that visualize the transfer of quantities between nodes, making them perfect for showing resource flows, budget allocations, and process
relationships.

What's Included

Core Component

  • RadzenSankeyChart - Main component with full Radzen design system integration
  • SankeyChartModels.cs - Data models for nodes and links
  • SankeyLayout.cs - Layout algorithm for node positioning and link path generation

Features

  • Theme Support: Fully integrated with Radzen themes (dark/light mode compatible)
  • Color Schemes: Support for Pastel, Palette, Monochrome, and Divergent color schemes
  • Node Alignment: Configurable alignment (Justify, Left, Right, Center)
  • Responsive Design: Proper margins and scaling
  • Smooth Animations: Bezier curve links with hover effects
  • Automatic Layout: Smart node positioning with collision detection

Configuration Options

  • Nodes - Collection of nodes with Id, Label, and optional Fill color
  • Links - Collection of links defining Source, Target, and Value
  • NodeWidth - Width of node rectangles (default: 24)
  • NodePadding - Vertical spacing between nodes (default: 8)
  • NodeAlignment - Horizontal alignment strategy
  • ColorScheme - Automatic coloring scheme
  • Width/Height - Chart dimensions
  • Margins - Customizable margins (Left: 60, Right: 60, Top: 10, Bottom: 10)

Demo Pages

  • Interactive demo with live configuration
  • Multiple examples (basic flow, energy flow, budget flow)
  • Comprehensive documentation with code examples

Screenshots

image image

Testing

  • Tested with all Radzen themes
  • Verified responsive behavior
  • Tested with various data sizes and configurations
  • Cross-browser compatibility verified

Breaking Changes

None - This is a new component addition.

**Original Pull Request:** https://github.com/radzenhq/radzen-blazor/pull/2220 **State:** closed **Merged:** Yes --- ## Summary This PR adds a new Sankey chart component to the Radzen Blazor library. Sankey diagrams are flow diagrams that visualize the transfer of quantities between nodes, making them perfect for showing resource flows, budget allocations, and process relationships. ## What's Included ### Core Component - `RadzenSankeyChart` - Main component with full Radzen design system integration - `SankeyChartModels.cs` - Data models for nodes and links - `SankeyLayout.cs` - Layout algorithm for node positioning and link path generation ### Features - **Theme Support**: Fully integrated with Radzen themes (dark/light mode compatible) - **Color Schemes**: Support for Pastel, Palette, Monochrome, and Divergent color schemes - **Node Alignment**: Configurable alignment (Justify, Left, Right, Center) - **Responsive Design**: Proper margins and scaling - **Smooth Animations**: Bezier curve links with hover effects - **Automatic Layout**: Smart node positioning with collision detection ### Configuration Options - `Nodes` - Collection of nodes with Id, Label, and optional Fill color - `Links` - Collection of links defining Source, Target, and Value - `NodeWidth` - Width of node rectangles (default: 24) - `NodePadding` - Vertical spacing between nodes (default: 8) - `NodeAlignment` - Horizontal alignment strategy - `ColorScheme` - Automatic coloring scheme - `Width/Height` - Chart dimensions - `Margins` - Customizable margins (Left: 60, Right: 60, Top: 10, Bottom: 10) ### Demo Pages - Interactive demo with live configuration - Multiple examples (basic flow, energy flow, budget flow) - Comprehensive documentation with code examples ## Screenshots <img width="1931" height="788" alt="image" src="https://github.com/user-attachments/assets/e0349ed3-9581-4af3-9531-c4ce373d45a6" /> <img width="1743" height="1094" alt="image" src="https://github.com/user-attachments/assets/cd259a19-87c0-42fc-99fa-687f24aacefa" /> ## Testing - Tested with all Radzen themes - Verified responsive behavior - Tested with various data sizes and configurations - Cross-browser compatibility verified ## Breaking Changes None - This is a new component addition.
claunia added the pull-request label 2026-01-29 18:22:06 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#3143
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?