Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

v-xinruzhu-msft

How to customize open-sourced custom visual.

Scenario:   

There are various types of visuals in Power BI that we can use to create a beautiful report to get business insights from data. However, sometimes a visual may not be able to satisfy some certain requirements. If it is an open-sourced visual, you may have a choice to modify its code to meet your specific requirement. In this article, I will take Gantt 2.2.3 chart as an example.  

customer recently used Gantt 2.2.3 charts in Power BI Desktop and the customer noticed that the maximum number of its tooltips was 3. When trying to put more fields in it, it shows yellow lines and it doesn't seem to allow any more fields to be added to it. Below I will explore how to overcome this limitation for this visual.  

 

How it happens:  

I created a Gantt chart 2.2.3 visual in desktop, adding the following fields to its tooltips: 

vxinruzhumsft_0-1709539472828.png

We can see that we can only place a maximum of three fields in the tooltip, so why can only three fields be placed in the tooltip of the Gantt chart 2.2.3 visual object, and is there a way to lift this restriction? 

First for the Gantt 2.2.3 chart tooltip, I looked at the design code for the Gantt 2.2.3 custom visual object and I found that when he originally designed it, the maximum limit was 3. This is the cause of the limitation.  

vxinruzhumsft_1-1709539486609.png

 

How to overcome it: 

Based on the limit we found in above section, I have two solutions to overcome it.  

Solution1: 

First, we can directly change the number limit in the custom visual object's capabilities.json file and subsequently repackage it as a .pbiviz file. The steps are as follows: 

  • Download custom code about Gantt chart 2.2.3 from GitHub  

GitHub - microsoft/powerbi-visuals-gantt: upon data values. 

  • Modify the number of tooltip-related fields in the capabilities.json file, the default value is 3, you can change it to the value we need 
  • In PowerShell, enter the following command to generate the .pbiviz filevxinruzhumsft_4-1709539512554.png
  • We import the generated file into power bi desktop  vxinruzhumsft_5-1709539512556.png 

The final result of our modified Gantt chart 2.2.3 into desktop is shown below: 

vxinruzhumsft_6-1709539612618.png

 

 

Solution2: 

The second method you can also try is to create calculated columns, merge the columns you want to put in the tooltip and display them together: 

 

 

Column 2 = 'Table'[date]&" - "&'Table'[date1]&" - "&'Table'[Column] 

 

 

The final result is as follows: 

vxinruzhumsft_7-1709539621694.png

 

Summary:  

Gantt Chart 2.2.3 is a very useful visual object, but there is a limit to the number of tooltips, if you want unlimited or more fields available, you can customize the generation of the visual object by following this link. However, there are some possible effects of modifying a custom visual, such as slow loading, poor performance or even failures, etc. And issues caused by customizing a custom visual will become out of Microsoft support. I hope that you will take these into account if you want to modify the code of an open-sourced visual. 
Develop custom visuals in Power BI - Power BI | Microsoft Learn 

 

 

Author: Xianda Tang 

Reviewer: Ula and Kerry 

 

Comments

Hi @v-xinruzhu-msft , I am trying to modify the visual through coding.

I was wondering what version of pbiviz were you using, since I am having some errors when I try and package it.

Thanks,

 

Josef

These are the errors I am getting:

joseftantawi_0-1713437119996.png

 

HI @v-xinruzhu-msft 

After Modifying the number of tooltip-related fields in the capabilities.json it works in Power BI desktop, but after I publish the file in Power BI service it gives me the error" Too many columns in tooltip buckets. Please remove some"