Visa Product Design System

The Visa Chart Components library (VCC) is maintained to provide charts that work alongside VPDS’s component libraries. You’ll also find guidelines including general principles on how to craft informative data experiences and how to select effective charts.

Learn about VCC

Visa Chart Components uses a feature-rich API to bring you accessible, framework-agnostic web components with robust accessibility configurations to enhance your workflow and ensure your product meet the latest standards. Learn about our approach below.

Accessibility first

Visa Chart Components are designed to make it easier for product teams to deliver accessible data experiences. We use Visa Global Accessibility Requirements (VGAR) to continuously assess and improve the accessibility of our data components.

Streamlined design

Our component APIs come with built-in design choices tailored for Visa products, reducing the need for developers to code detailed aspects like motion design into each chart. This intentional design choice may offer less flexibility than some other libraries, as VCC is not a low-level library.

Framework agnostic

Visa Chart Components leverage stencil.js, d3.js, and other open-source libraries to build custom web components that work with popular web frameworks like Angular, React, and Vanilla JavaScript. In short, you can use VCC almost anywhere you use JavaScript. At this time, the team doesn’t support mobile chart components yet, but can offer guidance on adjusting for mobile applications.

Unit tested

We’ve developed detailed, semi-automated unit testing to perform robust regression testing, ensuring consistent quality across our components. This helps ensure we’re continuously improving the breadth and depth of our testing coverage.

Learn to use our assets

Craft insightful, inclusive, and accessible data experiences following our data visualization guidelines.

Understand key principles and techniques for visualizing and communicating insights in Data visualization principles.
Explore how to choose the most effective chart for the information you need to communicate in Selecting the right chart.
Find usage, code and accessibility guidance for our data visualization components in Chart component library.
Find chart examples tailored to support common business scenarios and analysis tasks in Chart examples.

Complete your setup

To get started, visit React, Angular, and Vanilla Javascript for instructions on installation and building your first chart.

For designers: Get the Figma design kit

Start designing with VCC components, color palettes, and more with our Figma Data Visualization library (internal only).

For developers: Install the code library of your choice

Visa Chart Components can be used with React, Angular, Vanilla JavaScript, Python, and Vue. To get started, visit Angular, React, and Vanilla Javascript for instructions on installation and building your first chart.

Connect with us

Have questions or ideas? Visit our office hours, or join Data experience on Teams or get general VPDS help by visiting Support.