Kendo UI for Vue
Vue Sankey Diagram
- Easily create diagrams that visualize changing flows and their distribution between domains.
- Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, learning resources and more!
-
Overview
Тhe Kendo UI for Vue Sankey Chart enables you to easily create diagrams that visualize changing flows and their distribution between domains. It is ideal for a variety of use cases, including website traffic, budget breakdowns, energy flow, and more.
The component includes a variety of customizable elements, including:
- Nodes
- Links
- Labels
- Legend
- Title
- Tooltip
-
Customization
You can customize the Kendo UI for Vue Sankey diagram in the following ways:
- By configuring the properties for all elements
- By using the dataNodes and dataLinks properties to apply the desired styles only to specific instances
- By using the style property to apply component-wide styles
-
Export Options
The Sankey diagram includes built-in support for Image, PDF, and SVG export.
-
Auto-Layout
The component automatically rearranges the nodes and their corresponding links for improved visual appearance and readability.
-
Events
The Kendo UI for Vue Sankey diagram emits various events that enable you to tailor the component behavior based on your specific needs:
- onNodeenter – fires when the user enters a node
- onNodeleave – fires when a user leaves a node
- onLinkenter – fires when the user enter a given link
- onLinkleave – fires when the user leaves a link
- onNodeclick – fires when the user clicks a node
- onLinkclick – fires when the user clicks a link
-
Accessibility
The Sankey Diagram comes with built-in accessibility support, enabling users with disabilities to fully utilize its capabilities. The component is compliant with WCAG 2.2 AA standards and Section 508 requirements.
-
Keyboard Navigation
The Kendo UI for Vue Sankey Chart supports keyboard navigation enabled out of the box, so the main interactive parts of the component are reachable through the keyboard.
Get Started with Kendo UI for Vue
