Edit

How to add external libraries

  • Article

This article describes how to use external libraries in Power BI visuals. This article also describes how to install, import, and call external libraries from a Power BI visual's code.

JavaScript libraries

  1. Install an external JavaScript library by using a package manager, such as npm or yarn.
  2. Import the required modules into the source files using the external library.

Note

To add typings to your JavaScript library, and get Intellisense and compile-time safety, make sure that you install the appropriate package.

Installing the D3 library

This section provides an example of installing the D3 library and the @types/d3 package using npm in the code of a Power BI visual.

For a full example, see the Power BI visualizations code.

  1. Install the d3 package and the @types/d3 package.

    npm install d3@5 --save
npm install @types/d3@5 --save

  2. Import the d3 library in the files that use it, such as visual.ts.

    import * as d3 from "d3";

CSS framework

  1. Install an external CSS framework by using any package manager, such as npm or yarn.
  2. In the .less file of the visual, include the import statement.

Installing bootstrap

This section provides an example of installing bootstrap using npm.

For a full example, see the Power BI visualizations code.

  1. Install the bootstrap package.

    npm install bootstrap --save

  2. Include the import statement in visual.less.

    @import (less) "node_modules/bootstrap/dist/css/bootstrap.css";

Related content

Set up your environment for developing a Power BI visual