How to Create Custom Visuals in Microsoft Power BI

Edited 4 days ago by ExtremeHow Editorial Team

Microsoft Power BICustom VisualsData VisualizationWindowsMacPythonRAdvancedBusiness IntelligenceDevelopmentCustomization

Microsoft Power BI is a powerful tool for visualizing data and creating reports. It offers a wide range of default visuals, but in some cases, you may want to fine-tune your visuals to suit your needs. Creating custom visuals in Power BI allows you to go beyond the standard set of visuals and customize the visual representation of your data. This guide walks you through the process of creating custom visuals in Power BI in a step-by-step manner.

Launch

Before creating a custom visual, let’s understand the prerequisites required for the setup process. Power BI custom visuals are built using a technology stack that includes TypeScript, D3.js, Node.js, and other related tools. Here are the steps and requirements that you need to follow:

Prerequisites

• Install Node.js: Power BI custom visuals are built using Node.js, so make sure you have Node.js (version 10 or later) installed on your machine.
• Install Power BI Visuals Tools: This is the command-line interface (CLI) that helps you create and manage Power BI visuals. You can install it by running the command npm install -g powerbi-visuals-tools in your command prompt or terminal.
• Basic understanding of TypeScript and D3.js: These are the main technologies used in building Power BI custom visuals. Being familiar with these will be helpful in understanding and customizing your visuals.
• Power BI Desktop installed: This is where you will test and publish your custom visuals.

Install the development environment

To begin, you will need to set up your development environment. Open a command shell on your computer and create a directory where you plan to create your custom visuals. Navigate to this directory using cd command. Once in your directory, you will create a new custom visual project using the Power BI Visuals Tools:

pbiviz new <your-visual-name>

This command creates a new Power BI custom visual project with the default structure. It creates the files and directories required for your custom visual.

Understanding the project structure

The newly created project comes with a set of files and folders. Here is a basic description of what you can expect:

• Visual.ts: This file contains the main logic of your custom visual. This is where you will write the TypeScript code to create the visualization.
• Capabilities.json: This JSON file defines the capabilities of your custom visual, including data roles, data view mappings, and formatting options.
• VisualSettings.ts: This file defines the settings and properties that will be accessible to users when configuring your visual.
• Package.json: This file keeps track of the project configuration and dependencies.
• Resources: This folder contains assets such as icons and localization files.

Create a custom visual

Now that your project is set up, let's move on to creating custom visuals. The development of custom visuals involves several main steps:

1. Define capabilities

The capabilities.json file is very important because it defines what your visual can do. Here's a very simple example of what this file might look like:

{ "dataRoles": [ { "name": "category", "kind": "Grouping" }, { "name": "measure", "kind": "Measure" } ], "dataViewMappings": [ { "conditions": [ { "category": { "max": 1 }, "measure": { "max": 1 } } ], "categorical": { "categories": { "for": { "in": "category" } }, "values": { "for": { "in": "measure" } } } } ], "objects": { "general": { "displayName": "General", "properties": { "formatString": { "type": { "formatting": { "formatString": true } } } } } } }

In this example, the custom visual is set up to use a category and a measure, and hierarchical mapping is used to link them. Customizing this file allows you to define the fields and formats that the visual will understand.

2. Write the visualization logic

Most of the work happens in Visual.ts. Here's a very basic template of what your TypeScript class might look like:

export class Visual implements IVisual { private target: HTMLElement; constructor(options: VisualConstructorOptions) { this.target = options.element; this.target.innerHTML = '<div>This is my custom visual!</div>'; } public update(options: VisualUpdateOptions) { // Your data processing and rendering logic goes here } }

In constructor, we initialize the HTML element of our visual. update method is where you handle the logic related to getting new data and plotting it on the visual. Use D3.js or any other library of your choice to create your visual.

3. Style your visuals

The styles for your custom visual go in a CSS file, usually named visual.less. For example:

.myVisual { color: #333; background-color: #f5f5f5; padding: 10px; }

This will apply CSS styling to your custom visual. You can import such styling as a module into your Visual.ts or apply it directly through code.

4. Customizable settings

You can add customization options to your visual, which appear in the Format pane within Power BI. This involves editing VisualSettings.ts and capabilities file.

class VisualSettings extends DataViewObjectsParser { public general: GeneralSettings = new GeneralSettings(); } class GeneralSettings { public transparency: number = 70; }

"general": { "displayName": "General Settings", "properties": { "transparency": { "displayName": "Transparency", "type": { "numeric": true } } } }

This includes binding a custom property (such as transparency) and defining it in capabilities.json as well.

Testing and debugging

After developing your visual to a stable state, it's time to test and debug. Run the command:

pbiviz start

This will start a local server and open a live testing tool in your default browser. You can test your visual with the dataset to see how it performs. The live reload feature will automatically update the visualization when you save your changes.

To debug, use the web browser's debugging tools (e.g., Console, Network, and Source tabs) to isolate and fix problems in your code.

Packaging and deployment

Once you're satisfied with your custom visual, it's time to package it for use in Power BI Desktop or to share with others in an organization. Use the following command:

pbiviz package

The above command creates a .pbiviz file, which is a packaged visual. To use this visual in Power BI Desktop, go to the Developer tab and select "Import Custom Visual" to upload your .pbiviz file.

Sharing and publishing

To share within an organization, publish to the organizational visual repository in Power BI. This makes the visual accessible to users in your organization from their Power BI interface. Management, distribution, and version control can be handled consistently here.

Closing thoughts

Creating custom visuals in Power BI can greatly improve the way you communicate and interpret data in your reports. It opens up a vast avenue of customization that can help make your insights more intuitive and engaging. While the journey from idea to implementation involves understanding some development concepts, the resulting visuals can provide substantial value in uniquely representing complex data scenarios.

Start small and gradually explore more complex charts and graphics. Use the community forums and Power BI visual gallery as additional resources and inspirations. Enjoy the visualization!

  Share This Article

If you find anything wrong with the article content, you can request an update