From b90220774cfd0528fd88d3047099cddb93a93c1b Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Tue, 7 Oct 2025 17:51:28 +0530 Subject: [PATCH 1/2] 983838: Updated the UG content and example changes in the SanKey chart control. --- blazor/sankey/customization.md | 66 ++++++++++++++------------------- blazor/sankey/data-binding.md | 50 ++++++++++++------------- blazor/sankey/events.md | 68 +++++++++++++++++----------------- blazor/sankey/labels.md | 34 ++++++++--------- blazor/sankey/legend.md | 57 ++++++++++++++-------------- blazor/sankey/links.md | 49 ++++++++++++------------ blazor/sankey/nodes.md | 53 +++++++++++++------------- blazor/sankey/print-export.md | 24 ++++++------ blazor/sankey/title.md | 28 ++++++-------- blazor/sankey/tooltip.md | 62 ++++++++++++++++--------------- 10 files changed, 244 insertions(+), 247 deletions(-) diff --git a/blazor/sankey/customization.md b/blazor/sankey/customization.md index a7700128ab..40deab20fa 100644 --- a/blazor/sankey/customization.md +++ b/blazor/sankey/customization.md @@ -1,7 +1,7 @@ --- 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 @@ -9,11 +9,11 @@ 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 + @code { string _backgroundColor = "#0b1320"; public List Nodes = new List(); @@ -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 + @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 + @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 %} + @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 diff --git a/blazor/sankey/data-binding.md b/blazor/sankey/data-binding.md index 7cfc004307..6524a63479 100644 --- a/blazor/sankey/data-binding.md +++ b/blazor/sankey/data-binding.md @@ -1,7 +1,7 @@ --- 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 @@ -9,35 +9,35 @@ 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® library. +These types are provided by the Syncfusion® 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() { @@ -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) \ No newline at end of file +* [Labels](./labels) diff --git a/blazor/sankey/events.md b/blazor/sankey/events.md index 57f1eef744..3f93eb2cbb 100644 --- a/blazor/sankey/events.md +++ b/blazor/sankey/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events for Blazor Sankey Component | Syncfusion -description: Learn about the events supported by the Blazor Sankey component and how to use them for interactivity and customization. +description: Learn about the events supported by the Syncfusion Blazor Sankey component and how to use them for interactivity and customization. platform: Blazor control: Sankey documentation: ug @@ -11,43 +11,43 @@ documentation: ug ## Overview -The Syncfusion® Blazor Sankey Diagram component supports a comprehensive set of events, allowing developers to craft responsive and interactive features. These events are designed to handle user interactions and essential diagram lifecycle phases, thereby enhancing the functionality and user experience of your Blazor applications. +The Syncfusion® Blazor Sankey Diagram component provides a comprehensive set of events to handle user interactions and key lifecycle moments. These events enable responsive behaviors, targeted customization, and coordinated updates across application features. ## Events The Sankey Diagram component includes the following events: -1. **NodeRendering**: This event is fired before nodes are drawn on the diagram, allowing for dynamic customization of node appearance based on data or application state. Use this to apply unique visual adjustments and enhance node representation. +1. **NodeRendering**: Fires before nodes are drawn, enabling dynamic customization of node appearance based on data or state. Apply visual adjustments to emphasize categories or thresholds. -2. **LegendItemRendering**: Fired before legend items are rendered, this event enables modifications such as changing colors or altering text to align with branding needs. It helps ensure the legend matches the application's theme and improves readability. +2. **LegendItemRendering**: Fires before legend items render, allowing changes to text and colors for branding and readability. Align legend content with application themes. -3. **LabelRendering**: Triggered before labels appear on the diagram, this event allows for modification of label content or formatting. Use it to ensure labels effectively convey essential information in a clear and concise manner. +3. **LabelRendering**: Triggers before labels appear, supporting modification of label text or formatting. Ensure labels convey essential information clearly. -4. **LinkRendering**: This event fires when links are being rendered, offering opportunities to customize link appearance based on specific properties or conditions. Adjust link visuals to enhance clarity and emphasize relationships between nodes. +4. **LinkRendering**: Fires during link rendering, allowing conditional styling based on link properties. Modify colors or stroke styles to highlight relationships. -5. **LegendItemHover**: Occurs when a user hovers over a legend item, enabling responsive actions such as triggering UI updates or displaying contextual data. Use this to create interactive and informative legend behaviors. +5. **LegendItemHover**: Occurs when hovering over a legend item, enabling contextual UI responses or highlighting. Use to reinforce legend-to-visual mapping. -6. **SizeChanged**: Fired when the dimensions of the Sankey Diagram change, this event allows for dynamic layout adjustments. Ensure that connected components and visual elements remain coherent and visually appealing. +6. **SizeChanged**: Fires when the component size changes, enabling layout recalculations or responsive adjustments. -7. **TooltipRendering**: Triggered before tooltips for nodes and links are rendered, this event lets you customize tooltip content and style. Leverage it to provide clear, context-specific information that enhances user understanding. +7. **TooltipRendering**: Triggers before tooltips render for nodes and links, allowing customization of content and style. Event arguments may reference either a node or a link. -8. **PrintCompleted**: This event fires after a print operation completes, allowing you to update UI indicators or log the event for tracking and analytics. Use it to ensure follow-up actions are seamlessly handled post-print. +8. **PrintCompleted**: Fires after printing completes, allowing status updates, logging, or follow-up actions. -9. **ExportCompleted**: Occurs after an export operation finishes, similar to print completion events. Use this event to trigger follow-up tasks like notifications, data processing, or analytics logging. +9. **ExportCompleted**: Occurs after export completes, useful for notifications, analytics, or post-processing. -10. **Created**: Fired after the Sankey Diagram is fully initialized and rendered, this event is useful for initializing related components or logging the creation process for monitoring and debugging purposes. +10. **Created**: Fires after the Sankey Diagram is initialized and rendered, suitable for one-time setup of related components. -11. **NodeClick**: This event occurs when a user clicks on a node, enabling actions such as updating UI elements, starting data transactions, or recording analytics. Use it to respond effectively to user interactions with nodes. +11. **NodeClick**: Occurs on node click, enabling UI updates, navigation, or analytics triggers. -12. **NodeEnter**: Triggered when the mouse pointer enters a node region, this event allows for dynamic highlights or displaying additional information. It enhances interactivity and provides immediate feedback to user actions. +12. **NodeEnter**: Triggers when the pointer enters a node region, supporting highlight or context display behaviors. -13. **NodeLeave**: Occurs when the mouse pointer leaves a node region, supporting cleanup actions like removing highlights or hiding overlays. Use it to maintain a clean and clutter-free user interface. +13. **NodeLeave**: Occurs when the pointer leaves a node, enabling cleanup such as removing highlights or overlays. -14. **LinkClick**: Fires when a user clicks on a link within the component. Handle user clicks on links, enabling features like detailed data viewing or reshaping interactions in connected components. +14. **LinkClick**: Fires on link click, enabling drill-downs, detail views, or coordinated interactions. -15. **LinkEnter**: This event is triggered when the mouse pointer hovers over a link. Implement interactive behaviors when hovering over links, such as emphasizing connections or showing detailed link information. +15. **LinkEnter**: Triggers on link hover, supporting emphasis and display of additional link details. -16. **LinkLeave**: It occurs when the mouse pointer exits a link. Cleanup actions can be attached to this event when the pointer moves off a link, such as resetting visual styles or removing interactive elements. +16. **LinkLeave**: Occurs when the pointer exits a link, enabling visual reset or cleanup. Below is an example demonstrating how to implement some of the key events in the Sankey component: @@ -113,36 +113,37 @@ Below is an example demonstrating how to implement some of the key events in the } } } + {% endhighlight %} {% endtabs %} ## Key Points -- Events are linked to the Sankey component via attributes that correspond with event names. -- Each event delivers distinct event arguments, offering detailed information relevant to the event. -- These events facilitate customizing appearance, enhancing behavior, and executing additional actions based on user interactions. +- Events are attached to the Sankey component using attributes that map to event names. +- Each event provides specific event arguments with details relevant to the trigger context. +- Events enable appearance customization, behavioral enhancements, and coordinated actions based on interactions. ## Customizing with Events ### LegendItemRendering -This event allows you to adjust the appearance of legend items prior to rendering. You can tailor the visual style, such as colors and labels, to align with the application's design language or thematic consistency. Customization here can enhance visual coherence and aid user interpretation. +Adjust legend item appearance prior to rendering. Modify colors and labels to match design guidelines and improve readability. ### NodeClick -Utilize this event to trigger actions in response to user interactions with nodes, offering opportunities to display detailed information, update related UI components, or log interactions for analytic purposes. This event drives engagement by making visual data exploration more interactive and informative. +Trigger application logic on node interaction, such as updating related UI, revealing details, or recording telemetry. ### LinkRendering -Adjust the appearance of links for a more customized visualization, based on dynamic conditions such as link weight or status. By modifying visual properties like color or thickness, you can convey additional information through the visual representation of links, aiding user comprehension of complex networks. +Customize link visuals based on data-driven conditions. Use color or stroke changes to convey weight, status, or categories. ### TooltipRendering -Modify both the content and appearance of tooltips to deliver tailored real-time information relevant to the user's context. Tooltips can be adapted to reflect current node or link data, thereby enhancing user interaction and understanding through efficient data presentation. +Tailor tooltip content and styling for nodes and links to deliver concise, context-specific information at hover or focus. ## Advanced Event Usage -For more complex interactions, multiple events can be combined effectively. Here's an example utilizing several events: +For complex interactions, combine multiple events effectively. Here's an example utilizing several events: {% tabs %} {% highlight razor %} @@ -205,21 +206,22 @@ For more complex interactions, multiple events can be combined effectively. Here // Nodes and Links initialization (initialization code is omitted for brevity) } + {% endhighlight %} {% endtabs %} ## Key Considerations -- Employ events to construct interactive and dynamic Sankey diagrams. -- Leverage multiple events to develop complex user experiences. -- Refresh the UI using `StateHasChanged()` when altering component state within event handlers. -- Be mindful of performance trade-offs when dealing with frequent events, such as hover or mouse movement. -- Utilize the `Created` event for any initial setup tasks post full rendering of the Sankey Diagram. +- Use events to build interactive and responsive Sankey diagrams. +- Combine events to orchestrate complex user experiences. +- Invoke `StateHasChanged()` when updating component state in event handlers. +- Consider performance for high-frequency events such as hover. +- Use the `Created` event for initial setup tasks after the diagram is fully rendered. -By leveraging the robust set of events provided by the Blazor Sankey component, developers can produce rich and interactive visualizations that are both responsive to user actions and enhanced in functionality within Blazor applications. +By leveraging the events provided by the Blazor Sankey component, applications can deliver interactive visualizations that respond to input and support advanced customization. ## See also * [Nodes](./nodes) * [Links](./links) -* [Labels](./labels) \ No newline at end of file +* [Labels](./labels) diff --git a/blazor/sankey/labels.md b/blazor/sankey/labels.md index 69f0fa670d..d6184f1268 100644 --- a/blazor/sankey/labels.md +++ b/blazor/sankey/labels.md @@ -11,11 +11,11 @@ documentation: ug ## Overview -Labels in a Sankey Diagram are crucial for providing textual information for nodes, thereby enhancing the readability and comprehension of data flows. In the Blazor Sankey Diagram, labels can be configured and customized to meet various design and informational needs, making your diagrams more effective in conveying underlying data structures. +Labels provide textual context for nodes in a Sankey Diagram, improving readability and understanding of data flows. The Blazor Sankey Diagram supports flexible label configuration and styling to meet design and information needs. ## Basic Label Configuration -Labels are included within the node configuration and can be tailored using `SankeyLabelSettings`. Below is an example of how to set up labels in the Sankey Diagram: +Labels are defined within node settings and further customized using `SankeyLabelSettings`. {% tabs %} {% highlight razor %} @@ -91,21 +91,21 @@ Labels are included within the node configuration and can be tailored using `San {% endhighlight %} {% endtabs %} -In this example, labels are defined for each node with specific `SankeyLabelSettings` to determine their visual style. The settings include font color, weight, size, and style, ensuring labels contribute to both functional clarity and aesthetic quality. +This configuration defines labels for each node and applies `SankeyLabelSettings` for color, weight, size, and style. ![Blazor Sankey Labels](images/labels/sankey-labels.png) ## Customizing Label Appearance -Customizing the appearance of labels in the Blazor Sankey Diagram provides an opportunity to enhance the visual clarity and impact of your data visualization. By utilizing various properties within the SankeyLabelSettings, you can tailor labels to align with your application's design aesthetics and functional requirements. These customizations contribute to a more refined and informative diagram, making it easier for users to interpret complex data relationships. +Customize labels using `SankeyLabelSettings` to improve clarity and alignment with application design. -- **Visible**: Controls whether labels are shown; set to `false` to hide them if diagram space is limited. -- **FontSize**: Adjusts the font size, accommodating different display sizes or emphasis levels. -- **Color**: Sets the text color, important for visibility and theme coherence. -- **FontFamily**: Defines the text font family, which can match the application's overall typography for design consistency. -- **FontWeight**: Specifies the thickness of the text, like "400" for normal or "700" for bold, enhancing emphasis where needed. -- **Padding**: Determines space around the text, allowing for better alignment and placement within nodes. -- **FontStyle**: Enables styles such as "italic" for creative or hierarchical text presentation. +- **Visible**: Shows or hides labels. +- **FontSize**: Controls label size. +- **Color**: Sets text color for contrast and theme consistency. +- **FontFamily**: Applies a specific font family to match typography. +- **FontWeight**: Sets text weight (for example, 400 for normal, 700 for bold). +- **Padding**: Adds space around text for better placement. +- **FontStyle**: Enables styles such as italic. {% tabs %} {% highlight razor %} @@ -124,13 +124,13 @@ Customizing the appearance of labels in the Blazor Sankey Diagram provides an op ## Key Considerations -- Use concise yet descriptive label text to ensure clarity without cluttering the diagram. -- Employ various font sizes and weights to create a visual hierarchy that highlights significant data points. -- Ensure label color contrasts sufficiently with the node color to maintain readability. -- Adjust padding to perfect label placement within nodes, preventing overlap or misalignment. -- Use the `Visible` property strategically to manage label density based on diagram complexity. +- Keep label text concise and descriptive to avoid clutter. +- Vary font sizes and weights to establish visual hierarchy. +- Ensure sufficient color contrast between text and node background. +- Adjust padding to prevent overlap and ensure precise placement. +- Use the Visible property to manage label density in complex diagrams. -By skillfully configuring and customizing labels within the Blazor Sankey Diagram, developers can generate informative and user-friendly flow diagrams. Effective label usage underscores the significance of nodes and enhances users' ability to interpret data visualizations easily. +Effective label configuration enhances clarity and supports rapid interpretation of complex flows in Sankey diagrams. ## See also diff --git a/blazor/sankey/legend.md b/blazor/sankey/legend.md index a761da91a5..ebacc4a3fc 100644 --- a/blazor/sankey/legend.md +++ b/blazor/sankey/legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legends for Blazor Sankey Diagram | Syncfusion -description: Learn how to configure and customize legends in the Blazor Sankey Diagram to enhance data interpretation and user interaction. +description: Learn how to configure and customize legends in the Syncfusion Blazor Sankey Diagram to enhance data interpretation and user interaction. platform: Blazor control: Sankey documentation: ug @@ -11,13 +11,13 @@ documentation: ug ## Overview -Legends in a Sankey diagram provide a visual key to interpret the different nodes or links in the diagram. This topic covers how to configure and customize legends in the Blazor Sankey diagram. +Legends provide a visual key for interpreting nodes or links in a Sankey diagram. This topic explains how to configure and customize legends in the Blazor Sankey Diagram. ## Basic Legend Configuration -Legends in a Sankey diagram provide a visual representation of the categories or elements involved in your data flow, making it easier for users to interpret and analyze the diagram. They help identify nodes, links, or other key elements by associating them with descriptive labels or colors. The `SankeyLegendSettings` in the Sankey diagram allows you to customize the legend's visibility, position, size, and other settings. By enabling and configuring the legend, you can offer users a clear and interactive way to understand the connections and relationships in the data. +Legends present the categories or elements in a data flow, associating items with descriptive labels and colors. The `SankeyLegendSettings` API controls legend visibility, position, size, and layout to create an organized and interpretable visualization. -Below is an example of how to configure legends for a Sankey diagram. The sample demonstrates how to add and position the legend, adjust its height, and bind data to the Sankey diagram. This configuration can be used to create a well-organized and visually intuitive data visualization. +The following example demonstrates enabling a legend, positioning it, adjusting height, and binding data for the Sankey diagram. {% tabs %} {% highlight razor %} @@ -32,9 +32,11 @@ Below is an example of how to configure legends for a Sankey diagram. The sample Height="200px"> + @code { public List Nodes = new List(); public List Links = new List(); + protected override void OnInitialized() { Nodes = new List() @@ -96,28 +98,25 @@ Below is an example of how to configure legends for a Sankey diagram. The sample {% endhighlight %} {% endtabs %} - ![Blazor Sankey Basic Legend](images/legends/sankey-legends.png) ## Legend Customization and Configuration -The Sankey diagram component offers a robust set of features for legend customization and configuration, allowing users to create visually appealing and informative representations of their data. This comprehensive toolset encompasses a wide range of options, from basic visibility controls to advanced styling capabilities. +The Sankey Diagram supports a comprehensive set of legend options, ranging from visibility and sizing to layout and styling. Appearance settings enable precise control over legend elements, including item spacing, shape size, and ordering. A legend title can be added to provide additional context. -Appearance customization extends beyond basic properties, allowing for detailed adjustments to the legend's visual elements. Users can modify the dimensions of legend shapes, customize the padding between shapes and text, and even invert or reverse the order of legend items. The legend can be further enhanced with a title, adding context to the displayed information. - -- `Visible`: Determines whether the legend is displayed (default is true). +- `Visible`: Shows or hides the legend. - `Position`: Sets the position of the legend (Auto, Top, Left, Bottom, Right). -- `Width` and `Height`: Set the dimensions of the legend. -- `Padding`: Sets the padding around the legend collection. -- `ItemPadding`: Sets the padding between legend items. -- `ShapeWidth` and `ShapeHeight`: Set the dimensions of the legend shapes. -- `ShapePadding`: Sets the padding between the legend shape and text. -- `Background`: Sets the background color of the legend area. -- `Opacity`: Sets the opacity of the legend background. -- `EnableHighlight`: Enables highlighting of corresponding elements when hovering over legend items. +- `Width`, `Height`: Defines legend dimensions. +- `Padding`: Sets outer padding around the legend collection. +- `ItemPadding`: Sets spacing between legend items. +- `ShapeWidth`, `ShapeHeight`: Control legend shape size. +- `ShapePadding`: Sets spacing between legend shapes and text. +- `Background`: Sets legend background color. +- `Opacity`: Sets legend background transparency. +- `EnableHighlight`: Highlights corresponding elements on legend hover. - `Title`: Sets a title for the legend. -- `IsInversed`: Inverts the order of the shape and text in legend items. -- `Reverse`: Reverses the order of legend items. +- `IsInversed`: Inverts the order of shape and text in legend items. +- `Reverse`: Reverses the ordering of legend items. {% tabs %} {% highlight razor %} @@ -144,9 +143,11 @@ Appearance customization extends beyond basic properties, allowing for detailed + @code { public List Nodes = new List(); public List Links = new List(); + protected override void OnInitialized() { Nodes = new List() @@ -212,7 +213,7 @@ Appearance customization extends beyond basic properties, allowing for detailed ### Legend Text and Title Styles -The Sankey diagram provides advanced customization options for legend text and title styles through the `SankeyLegendTextStyle` and `SankeyLegendTitleStyle` APIs, enabling developers to configure properties such as font size, family, weight, color, and style. These APIs offer flexibility to align the legend's typography with the overall design aesthetic of the visualization, ensuring the legends complement the data representation and enhance the user experience. This level of control allows for seamless integration of legends into a wide range of visualization styles, from simple and clean to highly customized designs, as demonstrated in the following code snippet: +Legend typography can be tailored using `SankeyLegendTextStyle` and `SankeyLegendTitleStyle`. Configure font size, family, weight, color, and style to match the application’s visual language. {% tabs %} {% highlight razor %} @@ -239,20 +240,20 @@ The Sankey diagram provides advanced customization options for legend text and t ## Key Considerations -- Use clear and concise legend items to improve diagram readability. -- Choose an appropriate legend position that doesn't interfere with the main Sankey diagram. -- Customize legend appearance to match your application's design theme. -- Use the `EnableHighlight` property to enhance user interaction. -- Consider using `IsInversed` or `Reverse` properties to optimize legend item ordering for better comprehension. +- Keep legend items concise and unambiguous to support quick scanning. +- Choose positions that avoid overlap with the primary diagram content. +- Align legend styling with the application theme for consistency. +- Use `EnableHighlight` to assist targeted exploration of flows. +- Adjust `IsInversed` or `Reverse` to optimize reading order when needed. ## Legend Interaction -When `EnableHighlight` is set to true, hovering over a legend item will highlight the corresponding elements in the Sankey diagram. This feature helps users quickly identify specific data flows or node categories. +When `EnableHighlight` is true, hovering over a legend item highlights corresponding elements in the Sankey diagram, assisting quick identification of flows or categories. -By effectively configuring and customizing legends in the Blazor Sankey diagram, you can create more informative and user-friendly diagrams. Legends play a crucial role in helping users interpret complex Sankey diagrams, especially when dealing with multiple categories or data flows. +By configuring and styling legends effectively, Sankey diagrams become clearer and more discoverable, especially in scenarios with multiple categories or complex flows. ## See also * [Nodes](./nodes) * [Links](./links) -* [Labels](./labels) \ No newline at end of file +* [Labels](./labels) diff --git a/blazor/sankey/links.md b/blazor/sankey/links.md index 8068a38987..0474321d4b 100644 --- a/blazor/sankey/links.md +++ b/blazor/sankey/links.md @@ -11,17 +11,17 @@ documentation: ug ## Overview -Links in a Sankey diagram represent the connections and flow between nodes. They visually depict the relationships and quantities transferred between different entities or stages in a process. This topic covers how to define, customize, and work with links in the Blazor Sankey Diagram. +Links represent flow between nodes in a Sankey diagram. They visually depict relationships and the quantity transferred between entities or stages. This topic explains how to define, customize, and work with links in the Blazor Sankey Diagram. ## Basic Link Configuration -To add links to your Sankey Diagram, you need to define a collection of `SankeyDataLink` objects. Each link requires a source node, a target node, and a value representing the flow quantity. +Add links by defining a collection of `SankeyDataLink` objects. Each link requires a source node, a target node, and a numeric value that represents flow magnitude. -- Each link must have a `SourceId` and `TargetId` corresponding to existing node IDs. -- The `Value` property determines the thickness of the link and represents the quantity flowing between nodes. -- Links are automatically rendered based on the node positions and specified values. +- Each link must include `SourceId` and `TargetId` that match existing node IDs. +- The `Value` property determines link thickness and indicates the quantity flowing between nodes. +- Links are rendered automatically based on node positions and specified values. -Here's an example of how to configure links in the Sankey Diagram: +Here is an example of configuring links in the Sankey Diagram: {% tabs %} {% highlight razor %} @@ -35,10 +35,13 @@ Here's an example of how to configure links in the Sankey Diagram: + @code { string _backgroundColor = "#0b1320"; + public List Nodes = new List(); public List Links = new List(); + protected override void OnInitialized() { Nodes = new List() @@ -101,24 +104,24 @@ Here's an example of how to configure links in the Sankey Diagram: {% endtabs %} -In this example, we define multiple links connecting nodes across different categories such as source, energy types, and usage groups. +In this example, multiple links connect nodes across sources, energy carriers, and usage sectors. ![Blazor Sankey Link Customization](images/links/sankey-basic-link.png) ## Customizing Link Appearance -In a Sankey Diagram, links represent the flow of data between nodes, and their appearance plays a critical role in making the visualization clear and aesthetically pleasing. The `SankeyLinkSettings` in the Syncfusion® Blazor Sankey Diagram allows you to customize these links to match your design requirements or emphasize specific data points. +In a Sankey Diagram, links convey the flow of data between nodes. Their appearance is essential for clarity. Configure `SankeyLinkSettings` to align with design requirements or emphasize specific flows. -- **`Color`**: Specifies the color of the links, which can be provided in standard formats like HEX (`#RRGGBB`) or RGBA (`rgba(r, g, b, a)`). This setting allows you to visually distinguish different flows in the diagram. -- **`ColorType`**: Determines how the link color is applied, offering three options: - - **`SankeyColorType.Source`**: The link color matches the source node, highlighting the origin of the flow. - - **`SankeyColorType.Target`**: The link color matches the target node, emphasizing the destination. - - **`SankeyColorType.Blend`**: A gradient blend of source and target node colors, illustrating the connection between them dynamically. -- **`Opacity`**: Defines the overall transparency of the links, with values ranging from `0.0` (completely transparent) to `1.0` (fully opaque). The default value is `0.8`, ensuring a balance between visibility and unobtrusiveness. -- **`HighlightOpacity`**: Sets the opacity of links when hovered over, enabling a visual cue for interactivity. The default value is `0.8`, but it can be adjusted for more emphasis. -- **`InactiveOpacity`**: Specifies the opacity of inactive links (those not hovered over), providing a contrast that directs attention to the active flow. The default value is `0.2`. +- `Color`: Sets link color (HEX or RGBA) to distinguish flows. +- `ColorType`: Controls how color is applied: + - `SankeyColorType.Source`: Matches the source node color. + - `SankeyColorType.Target`: Matches the target node color. + - `SankeyColorType.Blend`: Blends source and target colors as a gradient. +- `Opacity`: Sets overall link transparency (0.0 – 1.0). The default value is **0.8**. +- `HighlightOpacity`: Opacity on hover for emphasis. The default value is **0.8**. +- `InactiveOpacity`: Opacity for non‑hovered links to de‑emphasize them. The default value is **0.2**. -Below is an example configuration that demonstrates how to apply these properties to customize the links in a Sankey Diagram. Adjusting these settings can help you create a visualization that aligns with your data storytelling needs. +Example configuration: {% tabs %} {% highlight razor %} @@ -136,16 +139,16 @@ Below is an example configuration that demonstrates how to apply these propertie ## Key Considerations -- Use meaningful values for links to accurately represent the flow between nodes. -- Adjust link colors and opacities to enhance visibility and distinguish between different types of flows. -- Consider using the `ColorType` property to create visually appealing color schemes that help users understand the data flow direction. -- Utilize the `HighlightOpacity` and `InactiveOpacity` properties to improve user interaction and focus on specific data flows. +- Provide accurate values to reflect real flow magnitudes. +- Adjust link colors and opacities to improve contrast and readability. +- Use `ColorType` to reinforce flow origin or destination, or to blend both. +- Leverage `HighlightOpacity` and `InactiveOpacity` to guide focus during interaction. -By effectively configuring and customizing links in the Blazor Sankey Diagram, you can create informative and visually appealing flow diagrams that clearly communicate the relationships and quantities in your data. The example provided demonstrates how to create a comprehensive visualization of device usage patterns across different demographic groups, showcasing the power and flexibility of the Sankey Diagram. +Effective link configuration results in informative, visually clear Sankey diagrams that communicate relationships and quantities with precision. ## See also * [Nodes](./nodes) * [Labels](./labels) * [Legend](./legend) -* [tooltip](./tooltip) \ No newline at end of file +* [tooltip](./tooltip) diff --git a/blazor/sankey/nodes.md b/blazor/sankey/nodes.md index ec82f6abc4..617a83c94b 100644 --- a/blazor/sankey/nodes.md +++ b/blazor/sankey/nodes.md @@ -1,7 +1,7 @@ --- layout: post title: Nodes for Blazor Sankey Diagram | Syncfusion -description: Explore how to define and configure nodes in the Blazor Sankey Diagram to create meaningful and visually appealing flow diagrams. +description: Learn how to define, configure and style nodes in the Syncfusion Blazor Sankey Diagram, including IDs, labels, and appearance settings. platform: Blazor control: Sankey documentation: ug @@ -11,17 +11,17 @@ documentation: ug ## Overview -Nodes are fundamental elements in a Sankey Diagram, representing entities or stages in a process flow. This topic covers how to define, customize, and work with nodes in the Blazor Sankey Diagram. +Nodes are fundamental elements in a Sankey Diagram, representing entities or stages in a process flow. This topic describes how to define, customize, and work with nodes in the Blazor Sankey Diagram. ## Basic Node Configuration -To add nodes to your Sankey Diagram, you need to define a collection of `SankeyDataNode` objects. Each node requires a unique ID and can have additional properties for customization. +To add nodes to a Sankey Diagram, define a collection of `SankeyDataNode` objects. Each node requires a unique identifier and optional properties for display and layout. -- Each node must have a unique `Id` property. -- The `Label` property is of type `SankeyDataLabel` and defines the text displayed for the node. -- Nodes are automatically positioned based on their connections defined in the `Links` collection. +- Each node must include a unique `Id` property. +- The `Label` property is of type `SankeyDataLabel` and specifies the text displayed for the node. +- Node positions are determined automatically based on connections defined in the `Links` collection. -Here's an example of how to configure nodes in the Sankey Diagram: +Here is an example of configuring nodes in the Sankey Diagram: {% tabs %} {% highlight razor %} @@ -35,10 +35,13 @@ Here's an example of how to configure nodes in the Sankey Diagram: + @code { string _backgroundColor = "#0b1320"; + public List Nodes = new List(); public List Links = new List(); + protected override void OnInitialized() { Nodes = new List() @@ -102,25 +105,25 @@ Here's an example of how to configure nodes in the Sankey Diagram: {% endtabs %} -In this example, we define multiple nodes representing different categories such as source, energy types, and usage groups. +In this example, nodes represent categories such as sources, energy types, and usage groups. ![Blazor Sankey Node Customization](images/nodes/sankey-node-basic.png) ## Customizing Node Appearance -The nodes in a Sankey Diagram represent the primary entities or data points, and their appearance can be tailored to enhance the clarity and style of your visualization. Using the `SankeyNodeSettings` in the Syncfusion® Blazor Sankey Diagram, you can configure properties like width, alignment, padding, and more to make the diagram visually distinct and avoid overlap between elements. +Nodes represent the primary entities in a Sankey Diagram, and their appearance can be tailored to improve clarity and style. Using `SankeyNodeSettings`, properties such as width, alignment, padding, and spacing can be configured to avoid overlap and enhance readability. -- **`Width`**: Specifies the width of the nodes. The default value is `20`, but it can be increased or decreased to adjust the visual prominence of nodes in the diagram. -- **`Alignment`**: Determines the alignment of nodes. Options include: - - **Left**: Aligns nodes to the left edge of the layout. - - **Top**: Aligns nodes to the top edge of the layout. - - **Stretch**: Stretches the nodes across the layout to fill available space. -- **`Offset`**: Sets an additional offset for nodes based on their alignment, allowing fine-grained control over node placement. -- **`Padding`**: Defines the spacing around nodes to prevent overlapping with other elements. -- **`Color`**: Lets you customize the fill color of the nodes (not shown in the example but configurable). -- **`Opacity`**: Adjusts the transparency level of the nodes (not shown in the example but configurable). +- `Width`: Sets the node width. The default value is `20`; increase or decrease to adjust emphasis. +- `Alignment`: Controls node alignment options: + - Left: Aligns nodes to the left edge of the layout. + - Top: Aligns nodes to the top edge of the layout. + - Stretch: Stretches nodes to fill available space. +- `Offset`: Applies an additional offset relative to the alignment to fine‑tune placement. +- `Padding`: Defines spacing around nodes to prevent overlap with other elements. +- `Color`: Customizes the fill color of nodes (configurable). +- `Opacity`: Adjusts node transparency (configurable). -Below is an example demonstrating the customization of node appearance: +Example: {% tabs %} {% highlight razor %} @@ -136,16 +139,16 @@ Below is an example demonstrating the customization of node appearance: ## Key Considerations -- Use meaningful IDs and labels for nodes to improve diagram readability. -- Adjust node width, padding, and alignment to create clear and visually appealing Sankey diagrams. -- Consider the relationships between nodes when defining links to accurately represent data flow. -- Utilize the `SankeyLinkSettings` and `SankeyLabelSettings` to further customize the appearance of links and labels in the diagram. +- Use meaningful IDs and labels to improve diagram readability. +- Adjust node width, padding, and alignment to maintain visual hierarchy and spacing. +- Define links to accurately represent relationships and flow between nodes. +- Leverage `SankeyLinkSettings` and `SankeyLabelSettings` to style links and labels consistently. -By mastering node configuration in the Blazor Sankey Diagram, you can create rich, informative flow diagrams that effectively communicate complex processes or relationships in your data. The example provided demonstrates how to create a comprehensive visualization of device usage patterns across different demographic groups. +Mastering node configuration enables creation of rich, informative flow diagrams that communicate complex processes and relationships effectively. The example demonstrates a comprehensive visualization of energy usage patterns across sectors. ## See also * [Links](./links) * [Labels](./labels) * [Legend](./legend) -* [tooltip](./tooltip) \ No newline at end of file +* [tooltip](./tooltip) diff --git a/blazor/sankey/print-export.md b/blazor/sankey/print-export.md index 15d8a209e5..437719afcb 100644 --- a/blazor/sankey/print-export.md +++ b/blazor/sankey/print-export.md @@ -1,7 +1,7 @@ --- layout: post title: Print and Export for Blazor Sankey Diagram | Syncfusion -description: Learn how to configure print and export functionalities in the Blazor Sankey Diagram to generate high-quality outputs. +description: Learn how to configure print and export functionalities in the Syncfusion Blazor Sankey Diagram to generate high-quality outputs. platform: Blazor control: Sankey documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Blazor Sankey Diagram: Printing and Exporting -This guide explains how to print and export the Blazor Sankey Diagram using its built-in functionalities. These features allow you to generate high-quality output for presentations, reports, or further analysis. +This guide explains how to print and export the Blazor Sankey Diagram using built-in methods. These features enable high-quality output generation for presentations, reports, or further analysis. ## Printing the Sankey Diagram -The Sankey Diagram offers a convenient way to print its contents directly from the browser. The `PrintAsync` method triggers the browser's print dialog, allowing users to select printing options and target printers. Note that the availability and appearance of print options depend on the user's browser and operating system. +The Sankey Diagram provides a convenient way to print its contents from the browser. The `PrintAsync` method invokes the browser’s print dialog, allowing users to select print settings and send the diagram to a printer. The appearance and availability of print options are determined by the user's browser and operating system. {% tabs %} {% highlight razor %} @@ -34,6 +34,7 @@ The Sankey Diagram offers a convenient way to print its contents directly from t + @code { SfSankey sankey; string _backgroundColor = "#0b1320"; @@ -44,6 +45,7 @@ The Sankey Diagram offers a convenient way to print its contents directly from t { await sankey.PrintAsync(); } + protected override void OnInitialized() { Nodes = new List() @@ -109,7 +111,7 @@ The Sankey Diagram offers a convenient way to print its contents directly from t ## Exporting the Sankey Diagram -The Sankey Diagram can be exported to various image formats, including PNG, JPEG, SVG, and PDF. The `ExportAsync` method handles the export process. You provide the desired file name and format as arguments. The exported image will reflect the current state of the chart, including any customizations or user interactions. +The diagram can be exported to multiple formats, including PNG, JPEG, SVG, and PDF. The `ExportAsync` method handles this process, accepting a file format and name. The exported image reflects the current state of the chart, including all customizations and user interactions. {% tabs %} {% highlight razor %} @@ -130,6 +132,7 @@ The Sankey Diagram can be exported to various image formats, including PNG, JPEG + @code { SfSankey sankey; string _backgroundColor = "#0b1320"; @@ -207,16 +210,13 @@ The Sankey Diagram can be exported to various image formats, including PNG, JPEG ## Key Considerations -* **Print Functionality:** The print feature relies on the browser's print capabilities. Ensure users have the necessary printer drivers and browser settings configured. - -* **Export Formats:** Choose the appropriate export format based on your needs. PNG and JPEG are suitable for raster images, while SVG and PDF are vector formats that offer scalability without loss of quality. - -* **File Names:** Provide meaningful file names to help users organize and identify exported charts. - -* **Event Handling:** The `PrintCompleted` and `ExportCompleted` events can be used to notify the user or perform actions after the respective operations finish. See the Events section of the Sankey Diagram documentation for more details. +* **Print Functionality**: Printing depends on browser capabilities. Ensure users have correctly configured printer drivers and settings. +* **Export Formats**: Select an appropriate format. PNG and JPEG are raster formats suitable for bitmaps, while SVG and PDF are vector formats that support lossless scaling. +* **File Naming**: Use descriptive filenames for exported charts to aid organization. +* **Event Handling**: `PrintCompleted` and `ExportCompleted` events can be used to provide feedback or trigger actions after an operation concludes. Refer to the Events section for more information. ## See also * [Nodes](./nodes) * [Links](./links) -* [Labels](./labels) \ No newline at end of file +* [Labels](./labels) diff --git a/blazor/sankey/title.md b/blazor/sankey/title.md index 8915658f4d..8afa86bb65 100644 --- a/blazor/sankey/title.md +++ b/blazor/sankey/title.md @@ -1,7 +1,7 @@ --- layout: post title: Title and Subtitle in Blazor Sankey Diagram | Syncfusion -description: Learn how to set and customize the title and subtitle in the Blazor Sankey Diagram from Syncfusion for better data representation. +description: Learn how to set and customize the title and subtitle in the Syncfusion Blazor Sankey Diagram for better data representation. platform: Blazor control: Sankey documentation: ug @@ -9,13 +9,11 @@ documentation: ug # Title and Subtitle in Blazor Sankey Diagram -The Syncfusion® Blazor Sankey Diagram allows you to add a title and subtitle to your chart, providing context and description for the data visualization. This topic covers how to set and customize the title and subtitle in the Sankey Diagram. +The Syncfusion® Blazor Sankey Diagram supports adding a title and subtitle to provide context and description for the data visualization. This topic explains how to set and customize the title and subtitle in the Sankey Diagram. ## Setting the Title and Subtitle -Adding a title and subtitle to your Sankey diagram helps provide context and clarity. Use the `Title` property for the main heading, representing the chart's purpose, and the `SubTitle` property for additional details like a specific time period or region. - -By utilizing these properties, your Sankey diagram becomes more informative and visually engaging. +Adding a title and subtitle helps convey purpose and scope. Use the `Title` property for the primary heading and the `SubTitle` property for supplemental details such as a time period or region. {% tabs %} {% highlight razor %} @@ -23,7 +21,6 @@ By utilizing these properties, your Sankey diagram becomes more informative and @using Syncfusion.Blazor; @using Syncfusion.Blazor.Sankey; - @code { @@ -91,13 +88,13 @@ By utilizing these properties, your Sankey diagram becomes more informative and {% endtabs %} -In this example, "Energy Flow" is set as the title, and "-2024" is set as the subtitle. +In this example, "Energy Flow" is configured as the title and "-2024" as the subtitle. ![Blazor Sankey Title](images/titles/sankey-title.png) ## Customizing Title and Subtitle -The **Blazor Sankey Diagram** allows you to visualize flow data with nodes and links. You can customize the appearance of the **title** and **subtitle** of your Sankey Diagram using the `SankeyTitleStyle` and `SankeySubtitleStyle` components. These components let you define font properties like `FontFamily`, `FontSize`, `FontStyle`, and `FontWeight` to match your design requirements. +The title and subtitle can be styled using `SankeyTitleStyle` and `SankeySubtitleStyle`. Set font properties such as `FontFamily`, `FontSize`, `FontStyle`, and `FontWeight` to match branding and readability requirements. {% tabs %} {% highlight razor %} @@ -105,12 +102,12 @@ The **Blazor Sankey Diagram** allows you to visualize flow data with nodes and l @using Syncfusion.Blazor; @using Syncfusion.Blazor.Sankey; - + @code { public List Nodes = new List(); public List Links = new List(); @@ -180,16 +177,13 @@ The **Blazor Sankey Diagram** allows you to visualize flow data with nodes and l ## Key Considerations -- Use meaningful and descriptive titles to give users a quick insight into the data represented in the Sankey Diagram. -- Keep titles and subtitles concise while providing enough context. -- Use the subtitle to provide additional details related to the data. -- Customize the font size, family, weight, and color to ensure the title and subtitle are visually appealing and readable. -- Ensure that the title and subtitle do not overshadow the actual chart data. - -By effectively utilizing the title and subtitle features of the Blazor Sankey Diagram, you can create more informative and user-friendly data visualizations that clearly communicate the purpose and context of your Sankey diagrams. +- Use concise, descriptive titles to communicate the diagram’s purpose quickly. +- Keep the subtitle brief and focused on contextual details. +- Configure font size, family, weight, and color for legibility without distracting from the diagram. +- Ensure the title and subtitle do not overpower the data visualization. ## See also * [Nodes](./nodes) * [Links](./links) -* [Labels](./labels) \ No newline at end of file +* [Labels](./labels) diff --git a/blazor/sankey/tooltip.md b/blazor/sankey/tooltip.md index e33842c13a..bc1d3f2cc8 100644 --- a/blazor/sankey/tooltip.md +++ b/blazor/sankey/tooltip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltips for Blazor Sankey Diagram | Syncfusion -description: Learn how to configure and customize tooltips in the Blazor Sankey Diagram to enhance data visualization and user interaction. +description: Learn how to configure and customize tooltips in the Syncfusion Blazor Sankey Diagram to enhance data visualization and user interaction. platform: Blazor control: Sankey documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Tooltips in Blazor Sankey Diagram -The **Blazor Sankey Diagram** is a powerful tool for visualizing energy flow, financial data, or any other system with nodes and links. The component allows you to display a flow diagram where nodes represent entities, and links represent the relationships or flows between them. +The Blazor Sankey Diagram visualizes flows between nodes and links. Tooltips surface contextual details for hovered elements without cluttering the diagram. -This guide provides step-by-step instructions on how to configure and customize tooltips within the **Blazor Sankey Diagram**. +This guide outlines how to enable and customize tooltips in the Blazor Sankey Diagram. ## Basic Tooltip Configuration -Tooltips can be added to your Sankey diagram using the `SankeyTooltipSettings`. Below is an example of how to configure tooltips in the Sankey Diagram: +Enable tooltips using `SankeyTooltipSettings`. {% tabs %} {% highlight razor %} @@ -26,9 +26,11 @@ Tooltips can be added to your Sankey diagram using the `SankeyTooltipSettings`. + @code { public List Nodes = new List(); - public List Links = new List(); + public List Links = new List(); + protected override void OnInitialized() { Nodes = new List() @@ -90,22 +92,21 @@ Tooltips can be added to your Sankey diagram using the `SankeyTooltipSettings`. {% endhighlight %} {% endtabs %} - ![Blazor Sankey Tooltip](images/tooltip/sankey-tooltip.png) ## Customizing Tooltip Appearance -The **Blazor Sankey Diagram** allows you to customize the appearance and behavior of tooltips through several properties. The tooltip settings allow for full control over how tooltips appear, including their background color, opacity, and animation effects for both nodes and links. +Adjust tooltip appearance and behavior using `SankeyTooltipSettings`. -- **`Enable`**: Controls whether tooltips are displayed. Default is `true`. -- **`Fill`**: Sets the background color of the tooltip. -- **`Opacity`**: Adjusts the tooltip opacity (0 to 1). Default is `0.75`. -- **`NodeFormat`**: Defines the format for node tooltips. -- **`LinkFormat`**: Specifies the format for link tooltips. -- **`EnableAnimation`**: Toggles tooltip animation. Default is `true`. -- **`Duration`**: Sets the duration (in milliseconds) for the tooltip animation. Default is `300`. -- **`FadeOutDuration`**: Specifies the fade-out duration for tooltips (in milliseconds). Default is `1000`. +- **Enable**: Shows or hides tooltips. +- **Fill**: Sets background color. +- **Opacity**: Controls transparency (0 to 1). The default value is 0.75. +- **NodeFormat**: Template string for node tooltips. +- **LinkFormat**: Template string for link tooltips. +- **EnableAnimation**: Toggles animation. Default: true. +- **Duration**: Animation duration in milliseconds. The default value is 300. +- **FadeOutDuration**: Fade‑out duration in milliseconds. The default value is 1000. {% tabs %} {% highlight razor %} @@ -113,7 +114,6 @@ The **Blazor Sankey Diagram** allows you to customize the appearance and behavio @using Syncfusion.Blazor; @using Syncfusion.Blazor.Sankey; - + @code { public List Nodes = new List(); - public List Links = new List(); + public List Links = new List(); + protected override void OnInitialized() { Nodes = new List() @@ -195,14 +197,13 @@ The **Blazor Sankey Diagram** allows you to customize the appearance and behavio {% endhighlight %} {% endtabs %} - ![Blazor Sankey Tooltip Customization](images/tooltip/sankey-tooltip-customization.png) ## Advanced Tooltip Configuration ### Custom Tooltip Templates -For more advanced customizations, you can use custom templates for both node and link tooltips by utilizing the `SankeyNodeTemplate` and `SankeyLinkTemplate` properties. This allows you to define HTML templates that customize the layout and content of the tooltips. +Customize tooltip content using `SankeyNodeTemplate` and `SankeyLinkTemplate` to render arbitrary HTML. {% tabs %} {% highlight razor %} @@ -255,6 +256,7 @@ For more advanced customizations, you can use custom templates for both node and + + @code { public List Nodes = new List(); - public List Links = new List(); + public List Links = new List(); + protected override void OnInitialized() { Nodes = new List() @@ -343,24 +347,24 @@ For more advanced customizations, you can use custom templates for both node and **Link Template** ![Blazor Sankey Link Tooltip Template](images/tooltip/sankey-tooltip-link-template.png) -These templates allow you to completely customize the content and appearance of tooltips for nodes and links. +Templates enable fully customized content and layout for node and link tooltips. ## Key Considerations -- Use clear and concise tooltip content to improve readability. -- Choose appropriate colors and opacity levels that contrast well with your Sankey diagram. -- Consider using custom templates for more complex tooltip designs or to include additional data. -- Adjust animation settings to ensure smooth transitions without being distracting. -- Use the `NodeFormat` and `LinkFormat` properties for quick customization of tooltip content without needing to create full templates. +- Keep tooltip text concise and scannable. +- Ensure sufficient contrast for tooltip text and background. +- Use templates for richer content or additional fields. +- Tune animation durations to balance responsiveness and polish. +- Prefer `NodeFormat` and `LinkFormat` for simple content customization without templates. ## Tooltip Interaction -Tooltips appear when users hover over nodes or links in the Sankey diagram. The `EnableAnimation` property, when set to true, allows for smooth transitions as the tooltip moves between different elements. +Tooltips appear on hover over nodes or links. When `EnableAnimation` is true, transitions are animated as focus changes between elements. -By effectively configuring and customizing tooltips in the Blazor Sankey Diagram, you can create more informative and interactive diagrams. Tooltips play a crucial role in helping users understand detailed information about specific nodes and links without cluttering the main diagram view. +Well‑designed tooltips improve comprehension of detailed values while keeping the main diagram clear. ## See also * [Nodes](./nodes) * [Links](./links) -* [Labels](./labels) \ No newline at end of file +* [Labels](./labels) From 570f31f89b19de935ed9f071e6592ec9bf32d4b4 Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Wed, 8 Oct 2025 16:14:32 +0530 Subject: [PATCH 2/2] 982808: Resolved the font matter error in the PR. --- blazor/sankey/links.md | 2 +- blazor/sankey/tooltip.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/sankey/links.md b/blazor/sankey/links.md index 0474321d4b..1dc889dcac 100644 --- a/blazor/sankey/links.md +++ b/blazor/sankey/links.md @@ -119,7 +119,7 @@ In a Sankey Diagram, links convey the flow of data between nodes. Their appearan - `SankeyColorType.Blend`: Blends source and target colors as a gradient. - `Opacity`: Sets overall link transparency (0.0 – 1.0). The default value is **0.8**. - `HighlightOpacity`: Opacity on hover for emphasis. The default value is **0.8**. -- `InactiveOpacity`: Opacity for non‑hovered links to de‑emphasize them. The default value is **0.2**. +- `InactiveOpacity`: Opacity for non‑hovered links to minimize visual prominence. The default value is **0.2**. Example configuration: diff --git a/blazor/sankey/tooltip.md b/blazor/sankey/tooltip.md index bc1d3f2cc8..4b92ad020c 100644 --- a/blazor/sankey/tooltip.md +++ b/blazor/sankey/tooltip.md @@ -351,7 +351,7 @@ Templates enable fully customized content and layout for node and link tooltips. ## Key Considerations -- Keep tooltip text concise and scannable. +- Keep tooltip text concise and readable. - Ensure sufficient contrast for tooltip text and background. - Use templates for richer content or additional fields. - Tune animation durations to balance responsiveness and polish.