Merge pull request #6828 from syncfusion-content/983838-SanKeyUG

983838: Updated the UG content and example changes in the SanKey chart.

Author: Gowrimathi

blazor/sankey/customization.md

@@ -1,19 +1,19 @@
 ---
 layout: post
 title: Customization for Blazor Sankey Diagram | Syncfusion
-description: Explore various customization options available for enhancing the Blazor Sankey Diagram with background style, layout, and orientation configuration.
+description: Explore various customization options available for enhancing the Syncfusion Blazor Sankey Diagram with background style, layout, and orientation configuration.
 platform: Blazor
 control: Sankey
 documentation: ug
 ---
 
 # Blazor Sankey Diagram: Customization
 
-The Blazor Sankey Diagram offers extensive customization options to tailor its appearance and behavior to your specific needs.  This guide covers customizing the background, dimensions, orientation, and right-to-left (RTL) support.
+The Blazor Sankey Diagram includes extensive options to tailor appearance and behavior. This guide covers background styling, dimensions, right-to-left (RTL) layout, and orientation.
 
 ## Setting Background
 
-You can customize the background of the Sankey Diagram using the `BackgroundColor` and `BackgroundImage` properties. The `BackgroundColor` property allows you to set a solid background color for the chart.  You can use any valid CSS color string, including hex codes, named colors, and RGB/RGBA values. The `BackgroundImage` property lets you set a background image for the sankey diagram. Specify the URL or path to the image file.
+Customize the diagram background using `BackgroundColor` and `BackgroundImage`. `BackgroundColor` accepts any valid CSS color (hex, named color, rgb/rgba). `BackgroundImage` applies an image by specifying its URL or file path.
 
 {% tabs %}
 {% highlight razor %}
@@ -27,6 +27,7 @@ You can customize the background of the Sankey Diagram using the `BackgroundColo
     <SankeyLabelSettings Color="#FFFFFF" FontWeight="400" ></SankeyLabelSettings>
     <SankeyLegendSettings Visible="false"></SankeyLegendSettings>
 </SfSankey>
+
 @code {
     string _backgroundColor = "#0b1320";
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
@@ -110,7 +111,7 @@ You can customize the background of the Sankey Diagram using the `BackgroundColo
 
 ## Dimensions (Width and Height)
 
-Control the sankey diagram's dimensions using the `Width` and `Height` properties. You can specify values in pixels or percentages.
+Control diagram size using `Width` and `Height`. Values can be specified in pixels or percentages.
 
 {% tabs %}
 {% highlight razor %}
@@ -120,6 +121,7 @@ Control the sankey diagram's dimensions using the `Width` and `Height` propertie
 
 <SfSankey Width="@_width" Height="@_height" Nodes=@Nodes Links=@Links>
 </SfSankey>
+
 @code {
     string _width = "800px";
     string _height = "450px";
@@ -190,15 +192,15 @@ Control the sankey diagram's dimensions using the `Width` and `Height` propertie
 
 ## Right-to-Left (RTL) Support
 
-The Blazor Sankey diagram offers built-in support for Right-to-Left (RTL) languages. To enable RTL support, simply set the `EnableRTL` property to `true`. This will flip the entire layout of the Sankey diagram, including nodes, links, and any associated labels or legends.
+Enable RTL by setting `EnableRTL` to `true`. The entire layout—including nodes, links, labels, and legend—adapts to right‑to‑left flow.
 
-**When you enable RTL support**
+**Effects of enabling RTL**
 
-1. **Node Order**: The order of nodes will be reversed, with the first node appearing on the right side of the diagram.
-2. **Link Direction**: Links between nodes will flow from right to left.
-3. **Labels**: Node and link labels will be aligned to support RTL reading.
-4. **Tooltips**: If enabled, tooltips will be positioned appropriately for RTL layout.
-5. **Legend**: If a legend is present, its layout and order will also be reversed.
+1. Node order is reversed, placing the first node on the right.
+2. Link direction flows right‑to‑left.
+3. Labels align for RTL reading.
+4. Tooltips, if enabled, position appropriately for RTL.
+5. Legend layout and order are mirrored.
 
 {% tabs %}
 {% highlight razor %}
@@ -208,6 +210,7 @@ The Blazor Sankey diagram offers built-in support for Right-to-Left (RTL) langua
 
 <SfSankey Nodes=@Nodes Links=@Links EnableRTL="true">
 </SfSankey>
+
 @code {
     string _width = "800px";
     string _height = "450px";
@@ -277,37 +280,24 @@ The Blazor Sankey diagram offers built-in support for Right-to-Left (RTL) langua
 
 ## Orientation
 
-The `Orientation` property controls the flow direction of the Sankey Diagram. You can set it to `Horizontal` or `Vertical`. The default `Auto` setting automatically chooses the best orientation based on the sankey diagram's aspect ratio. Setting the orientation to vertical can be particularly useful for certain types of data or when you want to emphasize the top-down flow of information.
-
-**When you switch the Sankey Diagram to vertical orientation, several aspects of the Sankey Diagram change:**
-
-1. **Node Placement**: Nodes are arranged vertically from top to bottom, instead of left to right.
+Control the flow direction using the `Orientation` property. Values include `Horizontal`, `Vertical`, and `Auto` (default). Vertical orientation can be effective for tall layouts or to emphasize top‑down relationships.
 
-2. **Link Direction**: Links flow downward, connecting nodes from top to bottom.
+**Changes in vertical orientation**
 
-3. **Label Positioning**: 
-   - Node labels are typically positioned to the right of each node.
-   - Link labels, if enabled, are oriented to align with the vertical flow.
-
-4. **Space Utilization**: 
-   - Vertical orientation often allows for better use of space when dealing with many nodes or long node labels.
-   - It can be particularly effective for tall, narrow layouts.
-
-5. **Data Interpretation**: 
-   - The top-down flow can imply a hierarchical or sequential relationship between nodes.
-   - It may be more intuitive for certain types of data, such as organizational charts or process flows.
-
-6. **Responsiveness**: 
-   - Vertical layouts can sometimes be more responsive on mobile devices or narrow screen widths.
-
-7. **Scrolling Behavior**: 
-   - For large diagrams, users will scroll vertically instead of horizontally, which can be more natural on most devices.
+1. Nodes are arranged from top to bottom.
+2. Links flow downward between nodes.
+3. Labels align with the vertical flow (node labels typically to the right).
+4. Space can be used more efficiently for many nodes or longer labels.
+5. A top‑down arrangement can imply hierarchical or sequential relationships.
+6. Vertical layouts can be more responsive on narrow screens.
+7. Large diagrams scroll vertically instead of horizontally.
 
 {% tabs %}
 {% highlight razor %}
 
 <SfSankey Width="@_width" Height="@_height" Nodes=@Nodes Links=@Links Orientation="SankeyOrientation.Vertical">
 </SfSankey>
+
 @code {
     string _width = "650px";
     string _height = "650px";
@@ -378,10 +368,10 @@ The `Orientation` property controls the flow direction of the Sankey Diagram. Yo
 
 ## Key Points
 
-* Combining background customizations can create visually appealing charts.
-* Using percentage values for `Width` and `Height` makes the chart responsive to different screen sizes.
-* `EnableRTL` is crucial for supporting right-to-left languages.
-* `Orientation` determines the layout direction of the sankey diagram, either horizontal or vertical.
+* Background color and image can be combined for richer visuals.
+* Percentage values for `Width` and `Height` support responsive layouts.
+* `EnableRTL` provides right‑to‑left language support.
+* `Orientation` determines horizontal or vertical layout.
 
 ## See also
 

blazor/sankey/data-binding.md

@@ -1,43 +1,43 @@
 ---
 layout: post
 title: Data Binding for Blazor Sankey Diagram | Syncfusion
-description: Checkout and learn about data binding with Blazor Sankey Diagram and how to implement it effectively.
+description: Learn how to bind nodes and links to the Syncfusion Blazor Sankey Diagram, including data models, REST API binding and JSON response format.
 platform: Blazor
 control: Sankey
 documentation: ug
 ---
 
 # Data Binding in the Blazor Sankey Diagram
 
-The Blazor Sankey Diagram is designed to visualize relationships and flows between categories using nodes and links. Data binding allows you to easily provide the necessary information for the sankey diagram to render effectively. Below, we explore how to bind data to the sankey diagram in Blazor.
+The Blazor Sankey Diagram visualizes relationships and flows between categories using nodes and links. Data binding supplies the node and link information required to render the diagram effectively.
 
 ## Overview of Data Binding
 
 The Sankey Diagram accepts data for:
 
-1. **Nodes**: Represent entities or categories in the flow.
-2. **Links**: Represent the connections and their magnitude between the nodes.
+1. **Nodes**: Entities or categories in the flow.
+2. **Links**: Connections between nodes, including the magnitude of each flow.
 
-The data can be bound using collections of objects that define the properties of nodes and links. The component dynamically generates the diagram based on this data.
+Bind data using collections of objects that define node and link properties. The component generates the diagram based on this data.
 
 ## Understanding Data Models
-The Blazor Sankey Diagram uses predefined data models for nodes and links. These models are already available in the `Syncfusion.Blazor.Sankey` namespace. Here's an overview of their key properties:
+The Blazor Sankey Diagram uses predefined data models for nodes and links available in the `Syncfusion.Blazor.Sankey` namespace. Key properties include:
 
 ### SankeyDataNode
-- `Id`: A string property that serves as a unique identifier for the node.
-- `Label`: An object of type `SankeyDataLabel` that can be used to customize the node's label.
+- `Id`: Unique identifier for the node.
+- `Label`: An instance of `SankeyDataLabel` to customize the node label.
 
 ### SankeyDataLink
-- `SourceId`: A string property identifying the source node of the link.
-- `TargetId`: A string property identifying the target node of the link.
-- `Value`: A double property representing the weight or magnitude of the connection.
+- `SourceId`: Identifier of the source node.
+- `TargetId`: Identifier of the target node.
+- `Value`: Weight or magnitude of the connection.
 
-There's no need to define these classes yourself as they are provided by the Syncfusion<sup style="font-size:70%">&reg;</sup> library.
+These types are provided by the Syncfusion<sup style="font-size:70%">&reg;</sup> library; custom class definitions are not required.
 
 ## Binding Data to the Sankey Diagram
-To use the Sankey Diagram, you need to create collections of `SankeyDataNode` and `SankeyDataLink` objects and bind them to the component. Here's how you can do this.
+Create collections of `SankeyDataNode` and `SankeyDataLink` and assign them to the component.
 
-Below is an example of how to bind data to the Sankey Diagram in a Blazor application:
+Below is an example of binding data to the Sankey Diagram in a Blazor application:
 
 {% tabs %}
 {% highlight razor %}
@@ -61,7 +61,7 @@ Below is an example of how to bind data to the Sankey Diagram in a Blazor applic
             new SankeyDataNode() { Id = "Green Coffee" },
             new SankeyDataNode() { Id = "North America" },
             new SankeyDataNode() { Id = "Europe" },
-            new SankeyDataNode() { Id = "Asia Pacific" },
+            new SankeyDataNode() { Id = "Asia Pacific" }
         };
         Links = new List<SankeyDataLink>()
         {
@@ -81,7 +81,7 @@ Below is an example of how to bind data to the Sankey Diagram in a Blazor applic
             new SankeyDataLink() { SourceId = "Instant Coffee", TargetId = "Asia Pacific", Value = 15 },
             new SankeyDataLink() { SourceId = "Green Coffee", TargetId = "North America", Value = 10 },
             new SankeyDataLink() { SourceId = "Green Coffee", TargetId = "Europe", Value = 8 },
-            new SankeyDataLink() { SourceId = "Green Coffee", TargetId = "Asia Pacific", Value = 7 },
+            new SankeyDataLink() { SourceId = "Green Coffee", TargetId = "Asia Pacific", Value = 7 }
         };
         base.OnInitialized();
     }
@@ -94,16 +94,16 @@ Below is an example of how to bind data to the Sankey Diagram in a Blazor applic
 
 ### Key Points
 
-- The `Nodes` parameter expects a collection of `SankeyDataNode` objects.
-- The `Links` parameter expects a collection of `SankeyDataLink` objects.
-- Ensure that `SourceId` and `TargetId` in `SankeyDataLink` match the `Id` values in `SankeyDataNode`.
+- `Nodes` expects a collection of `SankeyDataNode` objects.
+- `Links` expects a collection of `SankeyDataLink` objects.
+- `SourceId` and `TargetId` values in `SankeyDataLink` must match the corresponding `Id` values in `SankeyDataNode`.
 
 ## Advanced Binding Scenarios
 
-You can bind data from various sources such as:
-- REST APIs: Fetch data dynamically using HTTP requests.
-- Databases: Load data using Entity Framework or similar ORM tools.
-- JSON Files: Deserialize JSON data into the node and link models.
+Data can be sourced from:
+- REST APIs: Fetch data dynamically via HTTP requests.
+- Databases: Load data using Entity Framework or another ORM.
+- JSON files: Deserialize JSON into node and link models.
 
 ### Example: Binding Data from a REST API
 
@@ -138,7 +138,7 @@ You can bind data from various sources such as:
 
 
 ### Updated REST API Example
-Ensure that your API endpoint provides a JSON response in the following format:
+The API endpoint should return a JSON response in the following format:
 
 {% tabs %}
 {% highlight json %}
@@ -164,4 +164,4 @@ Ensure that your API endpoint provides a JSON response in the following format:
 
 * [Nodes](./nodes)
 * [Links](./links)
-* [Labels](./labels)
+* [Labels](./labels)