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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
Anonymous
Not applicable

What format is returned from colorPalette.getColor ()? Hex, RGB etc

Hi there

 

I am attempting to change one line in pbiviz.json file to update the color:

 

Change json code from:

 

var m = e.getColor(h.toString());

(above works and cycles through the different colours in the colour pallette)

 

 

To (does not work):

 

var m=\"#ED1C24\";

or

var m=\"ED1C24\";

or

var m=\"red\";

 

None of the above works, and the visual always comes out black, irrespective of the hex code / color name used.

 

My query is then what does e.getColor(String) return? 

 

Thank you

2 ACCEPTED SOLUTIONS
v-viig
Community Champion
Community Champion

The getColor method returns an instance of IColorInfo.

 

To fix the issue you should return an object like this:

 

{
  value: "#ED1C24"
}

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

Anonymous
Not applicable

Great, thanks @v-viig!

 

More details ....

 

getColor (string) returns IColorInfo in the format:

{ value: '#FFFFFF' }

 

See line 39 of:

 

https://github.com/Microsoft/PowerBI-visuals-core/blob/master/src/Clients/Visuals/dataColorPalette.t...

 

For example, JSON in Power BI visual is updated from:

 

 

m = e.getColor(h.toString());

 

 

 

To:

 

 

m={value:'#009EEC'};

 

 

 

to override the colour in the visual.

 

IColorPalette -> https://github.com/maqsoftware/PowerBI-visuals/blob/master/src/CustomVisuals/Published/JSONGrid/src/...

 

Power BI uses D3 for colour management: https://github.com/d3/d3/wiki

 

And ordinal scales in particular:

https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#ordinal

 

Process to edit a legacy .pbiviz file, eg the great Acquarium Visual https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104381112?tab=Overview

 

  1. Download Winrar or similar zip utility
  2. Download the visual .pbiviz file
  3. Within Winrar, navigate to the .pbiviz file
  4. Click on the .pbiviz file within Winrar (this is a zip file) and Winrar should open the file and show:
    1. resources (folder)
    2. packages.json (file)
  5. Click on resources folder within Winrar (don't extract yet)
  6. Copy the .pbiv.json file from within resources, eg: Aquarium1442671919353.pbiviz.json to another windows folder
  7. Edit Aquarium1442671919353.pbiviz.json in a text editor as required
  8. Do a find and replace within Aquarium1442671919353.pbiviz.json and change '1442671919353' to another unique number, eg: '1442671919354'
  9. Save as a new filename eg: Aquarium1442671919354.pbiviz.json which matches your 'find and replace' in step 8.
  10. Copy  Aquarium1442671919354.pbiviz.json back into the resources folder within Winrar (recommend that you keep Winrar window open for easy copying of files back into the .pbiviz file)
  11. Extract packages.json and edit in a text editor.  Do a find and replace within packages.json as per step 8.  Eg Find 1442671919353 and replace with 1442671919354
  12. Save package.json and copy back into Winrar overriding the existing packages.json
  13. Import the custom visual into Power Bi as normal.  If Power BI gives an error, double check that all the renaming of the .pbiviz.json filename and contents within .pbiviz.json and within package.json are consistent.  Also check that the JSON edits in step 7 are correct

 

In my experience, the following didn't work:

  1. Extract .pbiviz file to another windows folder
  2. Make changes to files
  3. Zip the folder again and rename extension to .pbiviz

I had to keep the .pbiviz folder open within Winrar and copy the edited files back into the Winrar window.

View solution in original post

2 REPLIES 2
v-viig
Community Champion
Community Champion

The getColor method returns an instance of IColorInfo.

 

To fix the issue you should return an object like this:

 

{
  value: "#ED1C24"
}

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Anonymous
Not applicable

Great, thanks @v-viig!

 

More details ....

 

getColor (string) returns IColorInfo in the format:

{ value: '#FFFFFF' }

 

See line 39 of:

 

https://github.com/Microsoft/PowerBI-visuals-core/blob/master/src/Clients/Visuals/dataColorPalette.t...

 

For example, JSON in Power BI visual is updated from:

 

 

m = e.getColor(h.toString());

 

 

 

To:

 

 

m={value:'#009EEC'};

 

 

 

to override the colour in the visual.

 

IColorPalette -> https://github.com/maqsoftware/PowerBI-visuals/blob/master/src/CustomVisuals/Published/JSONGrid/src/...

 

Power BI uses D3 for colour management: https://github.com/d3/d3/wiki

 

And ordinal scales in particular:

https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#ordinal

 

Process to edit a legacy .pbiviz file, eg the great Acquarium Visual https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104381112?tab=Overview

 

  1. Download Winrar or similar zip utility
  2. Download the visual .pbiviz file
  3. Within Winrar, navigate to the .pbiviz file
  4. Click on the .pbiviz file within Winrar (this is a zip file) and Winrar should open the file and show:
    1. resources (folder)
    2. packages.json (file)
  5. Click on resources folder within Winrar (don't extract yet)
  6. Copy the .pbiv.json file from within resources, eg: Aquarium1442671919353.pbiviz.json to another windows folder
  7. Edit Aquarium1442671919353.pbiviz.json in a text editor as required
  8. Do a find and replace within Aquarium1442671919353.pbiviz.json and change '1442671919353' to another unique number, eg: '1442671919354'
  9. Save as a new filename eg: Aquarium1442671919354.pbiviz.json which matches your 'find and replace' in step 8.
  10. Copy  Aquarium1442671919354.pbiviz.json back into the resources folder within Winrar (recommend that you keep Winrar window open for easy copying of files back into the .pbiviz file)
  11. Extract packages.json and edit in a text editor.  Do a find and replace within packages.json as per step 8.  Eg Find 1442671919353 and replace with 1442671919354
  12. Save package.json and copy back into Winrar overriding the existing packages.json
  13. Import the custom visual into Power Bi as normal.  If Power BI gives an error, double check that all the renaming of the .pbiviz.json filename and contents within .pbiviz.json and within package.json are consistent.  Also check that the JSON edits in step 7 are correct

 

In my experience, the following didn't work:

  1. Extract .pbiviz file to another windows folder
  2. Make changes to files
  3. Zip the folder again and rename extension to .pbiviz

I had to keep the .pbiviz folder open within Winrar and copy the edited files back into the Winrar window.

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.