Synchronize color palette between Custom & Native visuals

[Anonymous]

Hi everyone, 

I'm requesting your help. I'm currently developping a custom visual using Plotly.JS library. 

Basically, it's a line chart but with a few more customized features.

My aim is to fit the color between my custom visual and the native line chart visuel integrated into PowerBI. 

To do that, I use the color palette as described in the official documentation: Add colors to your Power BI custom visuals - Power BI | Microsoft Learn 

The results are good: in the custom visual, colors for each catory are assigned in the order of the colors in the palette.

I'm using this code to assign a color to a category:

var category_color = this.host.colorPalette.getColor(category)

BUT, you're guessing that if I'm writing this message right now it's because I have a problem. 

When filtering with slicers, categories are not associated/mapped with a color in the same way between a default visual and a custom visual.

Example of my resultats:

What I understand I that:

In native/default visual: all categories are mapped to a color, and the color's mapping remains fixed even if the page filters change

In my custom visual:I associate each category I come across with a color, regardless of its appearance order, in order of the palette colors.

Result: I get different colors when the filters change

Can anyone explain the color assignment phenomenon for categories used in PowerBI captions? Also, is there any way I can get this color assignment to match the colors of my objects/legends in my custom visuals?

Of course, if what I've written today is too incomprehensible, please let me know and I'll add more graphic examples to explain this color problem in my captions.

Thank you in advance for taking the time to reply.

Best regards

[Anonymous]

@DallasBaba 

That is precisely what I do under my code, using the getColor() method from the colorPalette of the IVisualHost interface.

Here is an example:

I created a simple dataset: 4 different legends & 4 values.

On the left the native PBI bar chart and on the right a custom one (from the AppSource, I get the same behave when I develop my own)

The color assigned for the different categories are not the same.

Furthemore, if I select a legend on the left chart, the filtering on the other chart clearly show that the color attribution is not synchronized:

My opinion is that the customs are using the colorPalette and the getColor() method but that the native are using an other method to assign the color to the categories.

I hope I'm wrong, but I see this behavior between every native/custom that I'm using...

Thank you for your help ! 

[SKYViz]

@Anonymous Have you been able to solve the issue.

I have also gone through the same issue. When I click on any bar of the Barchart, initial color is populated on the custom visual.

Thank You!

[Anonymous]

Hello @SKYViz 

Unfortunatly, even though I manage to have selectors, even though I use the colorPalette and even though I use the colorHelper I still have the problem of "color synchronization"

[DallasBaba]

@Anonymous you can try the following steps:

1. Use the IVisualHost interface to get the color palette for the native line chart visual.
2. Use the same color palette in your custom visual by setting the colorPalette property of the IVisualHost interface to the color palette obtained in step 1.
3. Use the getColor method of the colorPalette service to get the color for each category in your custom visual.

This should ensure that the colors are consistent between the native line chart visual and your custom visual, even when filtering with slicers.

 Let me know if this works for you. @ me in replies, or I'll lose your thread!!!  
Note:

If this post is helpful, please mark it as the solution to help others find it easily. Also, if my answers contribute to a solution, show your appreciation by giving it a thumbs up!