Start developing data visualizations

Step 1: Install the library

You can install the Visa Chart Components (VCC) Web Components 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 1b: Install the types library (optional)

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

Step 1c: Install the utilities library (optional)

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

Step 2: Set up the application

Step 2b: Import the package

Import the package to access charts provided by Visa Chart Components.

Step 2c: Dynamic prop assignment (optional)

Build a function for dynamic prop assignment to dynamically update object properties.

Example props object

Step 3: Use the chart components

We support Vanilla components, the Template method, and the Jquery method. Choose the one that suit your needs.

Step 3b: Declare a chart component

Declare any component to test a chart.

Step 3c: Use the chart components

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

Need help?

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