Start developing data visualizations

Step 1: Update Angular

Visa Chart Components (VCC) Angular library supports Angular v16 and up. Visit Angular’s guide on how to update Angular to v16 or update Angular to v17.

Step 2: Install the library

You can install the Visa Chart Components (VCC) Angular 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

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: Set up the application

Step 3b: Update compilerOptions

Add paths in your tsconfig.

Step 3c: Import the Visa Chart Components (VCC) Angular library

Next, import the Visa Chart Components (VCC) Angular library for full access to our chart components.

Step 4: Use the components

Step 4b: Update your components.ts

Update your components type script file to incorporate the minimal example props and data.

Step 4c: Use the chart components

You’re ready to use Angular 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.