dennisadriaans/vue-chrts

Overview

This skill builds SankeyChart components for Vue 3 to visualize flows, conversions, and resource distribution between stages. It maps nodes and links into an intuitive flow diagram where link width represents quantity. Use it to explain user funnels, energy flows, budget allocations, and other staged transfers.

How this skill works

You provide a data object with nodes (id, optional label) and links (source, target, value). The component computes layout columns, positions nodes, and draws links whose widths scale with link.value. Props let you control height, node sizing, alignment, coloring, sorting, legend behavior, and layout iterations.

When to use it

• Visualizing conversion funnels or user journeys (drop-off and flow)
• Showing resource or energy distribution between sources and sinks
• Explaining budget or spend allocation across departments
• Tracing multi-step processes where magnitude between stages matters
• When you need a compact, columnar view of many-to-many flows

Best practices

• Provide unique string ids for every node and ensure links reference those ids exactly
• Supply a label accessor for readable node text and a linkValue accessor if your value field is nonstandard
• Use nodeColor and linkColor accessors to encode categories or highlight important sinks/sources
• Choose nodeAlign ('left', 'right', 'justify') to match the narrative flow: left/right for directional emphasis, justify to spread columns
• Increase iterations for denser graphs to improve bundle separation; tune nodeWidth/nodePadding to avoid overlap

Example use cases

• Identify where users drop out of a multi-step sign-up funnel and quantify recovery opportunities
• Map energy flows from fuels to generation and end-use sectors for reports or presentations
• Show how total revenue splits across salaries, marketing, operations, and profit
• Display supply chain flows from raw materials through processing to distribution centers
• Compare channel conversions by coloring links to highlight high- or low-performing paths