Start developing data visualizations

Step 1: Update React

Visa Chart Components (VCC) React library supports React 18 and up. Visit React’s guide on how to upgrade to React 18 for more.

Step 2: Install the library

You can install the Visa Chart Components (VCC) React library using the package manager of your choice. Below we’ve provided the most common: NPM, PNPM, Yarn, and Bun.

Note: Package managers can resolve dependencies differently and might not automatically install all required dependencies.

Step 2b: Install the types library (optional)

Next, install the accompanying types library to aid autocomplete features in IDEs and overall code quality.

Step 2c: Install the utilities library (optional)

Complete this step if you want to access optional functionalities of the Visa Chart Components, like internationalization.

Step 3: Use the chart components

You’re ready to use React chart components by copying and pasting the example code into your application. Check out Bar chart to give it a try.

Need help?

If you experience any issues while getting set up with Visa Charts Components, visit Support.