background

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!
Sankey Chart Header
  • 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  

    See the Vue Sankey Chart Overview Demo 
     

    Sankey Chart Overview
  • 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

    See the Vue Sankey Diagram Customization demo  

  • Export Options

    The Sankey diagram includes built-in support for Image, PDF, and SVG export.  

    See the Vue Sankey Diagram Export Demo 

     

  • Auto-Layout

    The component automatically rearranges the nodes and their corresponding links for improved visual appearance and readability.  

    See the Vue Sankey Diagram Auto-Layout Demo  
     

  • 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

    See the Vue Sankey Diagram Events demo  
     

  • 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.  

    See the Vue Sankey Diagram Accessibility demo  

    Accessibility 2024
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka