visa bar chart component with sample data.

Figure 1: A demonstration of a bar chart developed with Visa Chart Components.

Inclusive Data Experiences

Visa Chart Components (VCC) is an accessibility focused, framework agnostic set of data experience design system components for the web. VCC attempts to provide a toolset to enable developers to build equal data experiences for everyone, everywhere.

Key Elements of Visa Chart Components

Design System Icon

A design system approach to data visualization

Accessibility Icon

A focus on the accessibility of each component’s end user experience

Code Fork Icon

Multi-framework “build once, use everywhere” implementation

Leveraged in Visa's Products

We built Visa Chart Components so that we could leverage them across a number of our internal and client facing applications, working to bring more insightful and more accessible data experiences to our information consumers. Below, we see VCC delivering impactful analytics to our clients through an upcoming release of Visa Analytics Platform (VAP). Please note, the data represented in these images, is not real data; is for illustrative and demonstrative purposes only and is not indicative of financial performance.

Cardholders Reducing Spend

An example of a more complex analysis, focusing on movement of cardholders across spend bands:

Alluvial flow diagram demonstration of spend bands changing between 2018 and 2019 focusing on decreasing bands. Excerpt from Visa Analytics Platform.

Here, Visa Analytics Platform leverages VCC's alluvial diagram component to help clients gain insight from the flow of their cardholders from one year to the next. 

Spend Per Active

Our clients often want to see how their performance, or growth, compares to competitive industry benchmarks over time.

Line and bar chart demonstration of active trend of year over year growth for the past year. Excerpt from Visa Analytics Platform.

Here we see how Visa Chart Components is used to bring this analysis to life within Visa Analytics Platform.

Built in Features

Visa Chart Components brings with it a feature-rich API, which includes a robust and ever improving accessibility configuration for each chart, helping your product meet today’s ever improving standards.

accessibility icon

Accessibility First

Visa Chart Components are designed to make it easier for developers to deliver accessible data experiences. We leverage Visa’s Global Accessibility Requirements to continuously assess and improve the accessibility of our data experience components. We aim to provide developers a powerful toolset which will enable them to meet our own VGAR standards.

git like code fork icon

Framework Agnostic

VCC leverages stencil.js, d3.js and other open source libraries to build custom web components which can be used in many of the popular web frameworks of today (e.g., React and Angular), and likely those of tomorrow. In short, you can use VCC (almost) anywhere that you can use JavaScript.

dashboard screen with a checkmark icon


Our component APIs have been built with a design systems approach tailored to Visa products. This can reduce the burden on the developer to code detailed aspects (e.g., motion design) into each chart.

As a result, and by design, there may be less flexibility than other libraries for certain features. VCC is not a low level library in this sense.

a bug with a line going through it icon

Unit Tested

Detailed, semi-automated unit testing has been developed to perform robust regression testing across our components. We are constantly working to improve the breadth and depth of our testing coverage in order to help ensure consistent quality across our components.

Have something to say?

We welcome your comments and feedback, however; it's important to remember that VCC is designed to work for Visa products and you may find that a specific requirement doesn't work for your specific situation. We're happy to talk about it and have been known to make updates based on feedback, but we maintain these components for our own use, with the hope that they will be useful for others as well.

All that said, feel free to use the "I Have Feedback!" button to get in touch by submitting an issue, feature and/or idea request on our GitHub repository.

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.