Visa Chart Components

VCC Overview

Components Resources

GitHub

Components

Bundles

Also, don't miss out on our utilities and unit tests.

@visa/alluvial-diagram

A demonstration image of the default alluvial diagram component.

<alluvial-diagram
    accessibility = {...}
    linkData={[{ group: 'Group 1', cat: 'Team 1 2018', target: 'Team 2 2019', value: 1234 },{links}]}
    nodeData={[{ did: 'Team 1 2018' },{nodes}]} // optional, allows you to join more data to nodes
    sourceAccessor={'cat'}
    targetAccessor={'target'}
    groupAccessor={'group'}
    nodeIDAccessor={'did'} // required if you pass nodeData
    valueAccessor={'value'}
/>

Installation Steps

Using NPM:

$ npm i @visa/alluvial-diagram

Using Yarn:

$ yarn add @visa/alluvial-diagram

View API on GitHub

These materials are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. Any links to third party sites are for your information only and do not constitute endorsement by or affiliation with Visa. Visa has no insight into and/or control over third party content and code and disclaims all liability for any such components. Visa Chart Components code snippets printed on this page are licensed under the MIT license.