How to Create Custom Visuals in Power BI

While Power BI's standard charts are great, sometimes they just don't cut it for the story you're trying to tell. If you've ever felt limited by the default visualizations, you're in the right place. This article will show you two powerful ways to create and use custom visuals in Power BI, from a simple search-and-click method to building one from scratch.

Why Go Beyond Standard Power BI Visuals?

The built-in charts and graphs in Power BI are workhorses for a reason - they handle most common data scenarios effectively. But your data, your brand, and your business questions are often unique. Standard visuals might not always capture the specific nuances you need to highlight.

Here's why you might want to create or use a custom visual:

• Tell a More Specific Story: Your data might be better represented by a Sankey diagram, a word cloud, or a custom calendar heatmap - visuals that aren't included out-of-the-box. Custom visuals let you choose the perfect format to convey insights clearly.

• Incorporate Branding: Want your dashboards to reflect your company's colors, fonts, and style? Custom visuals can be designed to match your brand guidelines perfectly, creating a more professional and cohesive look.

• Visualize Niche Data: If you work in a specialized industry like manufacturing, logistics, or biotech, you may need specific diagrams like Gantt charts with advanced features, infographics, or custom maps that standard options can't provide.

• Enhance Functionality: Custom visuals can include interactive features not found in standard charts, such as advanced filtering, data highlighting, or animations, making your reports more engaging for your audience.

In short, custom visuals give you the creative freedom to break free from the constraints of default templates and build reports that are more insightful, on-brand, and impactful.

Two Paths to Custom Visuals: The Marketplace vs. DIY

When it comes to using custom visuals in Power BI, you have two primary options, each catering to different needs and skill levels.

1. Using AppSource (The Easy, No-Code Route): This is the quickest and easiest way to expand your visual library. Microsoft AppSource is a marketplace filled with hundreds of pre-built visuals - many of them free - created by Microsoft and third-party developers. If you need a specific chart type like a word cloud, timeline, or advanced funnel chart, there's a good chance someone has already built it.

Who is this for? Anyone! From beginners to advanced users who need a specific visual without wanting to spend time coding it themselves.

2. Developing Your Own Visual (The Professional, Code-It-Yourself Route): For complete control and truly unique visualizations, you can build your own custom visual from the ground up. This involves using the Power BI Visuals SDK (Software Development Kit), which requires knowledge of web development technologies like TypeScript, CSS, and D3.js. This path offers unlimited flexibility, allowing you to create a visual that does exactly what you need it to.

Who is this for? Developers, data analysts with coding skills, or teams with dedicated development resources who need a bespoke solution for their reporting.

How to Use AppSource Visuals: A Step-by-Step Guide

Using a pre-built visual from AppSource is straightforward and can be done directly within Power BI Desktop. Let’s walk through the process of finding and adding a "Word Cloud" visual to a report.

Step 1: Get More Visuals from AppSource

In your Power BI Desktop report, look at the Visualizations pane on the right. Below the standard icons, you'll see three dots (...). Click these dots and select "Get more visuals."

Step 2: Find and Add the Visual You Want

A new window will open, displaying the Power BI Visuals marketplace (AppSource). You can browse by category or use the search bar to find what you need. In the search bar, type "Word Cloud" and press Enter.

Several options will appear. Find the one by Microsoft Corporation and click on it. This page gives you a description, reviews, and a preview of the visual. To add it to your Power BI Desktop, simply click the blue "Add" button.

Step 3: Use the New Visual in Your Report

After you click "Add," you'll see a small message confirming that the visual was imported successfully. Look back at your Visualizations pane, and you will now see a new icon for the Word Cloud below the default icons.

Click on this new icon to add the word cloud to your report canvas. Now, all you have to do is drag your data fields into the appropriate buckets. For a word cloud, you might drag a text field (like product names or customer feedback keywords) into the Category field and a numeric field (like sales or frequency) into the Values field to determine the size of the words.

That’s it! You have successfully added and used a custom visual from AppSource in just a few clicks, with no coding required.

Building Your Own Custom Visual: The Developer's Guide

If you can't find what you need in AppSource or if you want full control over your visual's appearance and functionality, it's time to build it yourself. This process is more technical but incredibly rewarding. Here's a high-level overview of how to do it.

Prerequisites for Development

Before you start, you’ll need to set up your development environment. This requires installing a few key tools:

• Node.js: This is a JavaScript runtime that Power BI's tools are built on. Download it from the official Node.js website.

• Code Editor: A robust code editor like Visual Studio Code is highly recommended.

• Power BI Visuals Tools: This is a command-line tool you'll install using npm (Node Package Manager), which comes with Node.js. Open a command prompt or terminal and run this command:

Step 1: Create a New Visual Project

With the tools installed, you can now create a new project. Navigate to the folder where you want to store your project in your terminal and run the following command:

This command creates a new folder named 'MyFirstVisual' containing all the template files you need to get started. Key files include:

• visual.ts: The main TypeScript file where you will write your visual's logic (how it renders, responds to data, etc.).

• capabilities.json: A configuration file that tells Power BI what kind of data your visual expects, what formatting options it supports, and more.

• pbiviz.json: The project’s metadata file, containing information like its name, author, and description.

Step 2: Develop and Code Your Visual

This is where the magic happens. You’ll open the project folder in VS Code and start editing the 'visual.ts' file. By default, it contains a simple visual that displays the count of updates.

Most complex Power BI visuals are built using the D3.js library for data visualization, as it excels at creating dynamic, data-driven graphics. You'll primarily work within the 'update' method in 'visual.ts'. This method is called whenever data or formatting changes, so this is where you write the code to draw or redraw your visual.

You’ll also need to configure your 'capabilities.json' file to define the data roles for your visual. For example, if you were building a bar chart, you might define two data roles: one for "Category" (like product names) and one for "Measure" (like total sales).

Step 3: Test Your Visual in Real Time

The Power BI Visuals Tools come with a fantastic feature: a live development server. To use it, you first need to enable developer mode in the Power BI service (the web version).

1. Log in to app.powerbi.com.

2. Go to Settings > Settings > Developer and check the box to "Enable developer visual for testing."

Now, go back to your terminal, navigate into your project folder, and run:

This command compiles your TypeScript code and starts a local server. In the Power BI service, open a report and add the special "Developer Visual" from the Visualizations pane. This visual will connect to your local server, allowing you to see your custom visual update instantly every time you save your code. This live feedback loop makes debugging much faster.

Step 4: Package and Import Your Visual

Once you are happy with how your visual looks and functions, stop the local server (with Ctrl+C in the terminal) and run the packaging command:

This command bundles all your code, assets, and configurations into a single '.pbiviz' file located in a new 'dist' folder. This is the file you’ll import into Power BI Desktop or the Power BI service just like you would an AppSource visual, except you'll choose the "Import a visual from a file" option.

Final Thoughts

Custom visuals unlock a new level of creativity and analytical power in your Power BI reports. Whether you’re grabbing a pre-built visual from AppSource in a matter of seconds or coding an entirely new one from scratch, you have the flexibility to create dashboards that communicate your data’s story with precision and clarity.

Often, the drive to build custom reports comes from the friction of working within the confines of traditional tools. At Graphed, we’ve taken a different approach. We believe getting insights shouldn’t require you to become a developer or spend hours tweaking charts. Our platform lets you connect all your marketing and sales data sources and create entire real-time dashboards just by describing what you want to see in plain English. Instead of learning to code a visual, you can just ask, and our AI data analyst builds it for you in seconds.