cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Brian_M
Responsive Resident
Responsive Resident

Dynamically define colour of bar/column graph - custom visualisation

Hi,

 

I'm looking to create bar or column charts with defined custom colours for each item in the legend.  Can anyone suggest a way to pass a data field containing color information such as #FF0000 to a custom visual?

 

Product 1 = Green

Product 2 = Orange

Product 3 = Light Purple

Product 4 = Red

 

The colour definitions themselves cannot be fixed, they would be part of the data.

 

 

 

 

1 ACCEPTED SOLUTION
itayrom
Resolver II
Resolver II

I'll first list the scenario I think you are talking about, to make sure I understand it correctly:

1. You are developing a custom bar/column chart visual.

2. The data-points' colors are to be specified in a column in your data, instead of using Power BI's color pallette, and will be passed to the visual via a "field well".

3. You're asking how to set the colors shown in the legend to the ones passed in the color "field well".

 

If this is in fact the scenario, then the solution is fairly simple-

ILegend's drawLegend() method is passed a LegendData object, which has a dataPoints property of the type LegendDataPoint[].

The dataPoints array is to be populated with LegendDataPoint objects, one for each data-point you want to show in the legend. One of LegendDataPoint's properties is the color property, in which(as its name suggests) you specify the data-point's legend color.

So basically, as you iterate through your DataView/ViewModel to populate the dataPoints array, you set the color property to that of the current data-point.

 

Hope this helps.

 

EDITED:

By the way, if you are asking about creating a modified version of one the existing visuals, say the column chart, notice that the LegendDataPoint[] array is created in its converter() method and populated using the data returned from the following function call: "converterStrategy.getLegend(colors, defaultLegendLabelColor, defaultDataPointColor);". Therefore, in order to change the way the data-points are colored in the legend, you'll have to write a modified version of the converterStrategy.getLegend() method.

Also, notice that if you modify an existing visual, then it might not function properly, since custom visuals are sandboxed, while the Microsoft-approved ones are not, and therefore have limited access to the visuals API.

View solution in original post

6 REPLIES 6
itayrom
Resolver II
Resolver II

I'll first list the scenario I think you are talking about, to make sure I understand it correctly:

1. You are developing a custom bar/column chart visual.

2. The data-points' colors are to be specified in a column in your data, instead of using Power BI's color pallette, and will be passed to the visual via a "field well".

3. You're asking how to set the colors shown in the legend to the ones passed in the color "field well".

 

If this is in fact the scenario, then the solution is fairly simple-

ILegend's drawLegend() method is passed a LegendData object, which has a dataPoints property of the type LegendDataPoint[].

The dataPoints array is to be populated with LegendDataPoint objects, one for each data-point you want to show in the legend. One of LegendDataPoint's properties is the color property, in which(as its name suggests) you specify the data-point's legend color.

So basically, as you iterate through your DataView/ViewModel to populate the dataPoints array, you set the color property to that of the current data-point.

 

Hope this helps.

 

EDITED:

By the way, if you are asking about creating a modified version of one the existing visuals, say the column chart, notice that the LegendDataPoint[] array is created in its converter() method and populated using the data returned from the following function call: "converterStrategy.getLegend(colors, defaultLegendLabelColor, defaultDataPointColor);". Therefore, in order to change the way the data-points are colored in the legend, you'll have to write a modified version of the converterStrategy.getLegend() method.

Also, notice that if you modify an existing visual, then it might not function properly, since custom visuals are sandboxed, while the Microsoft-approved ones are not, and therefore have limited access to the visuals API.

View solution in original post

Brian_M
Responsive Resident
Responsive Resident

That's a great help @itayromSmiley Happy, thanks.

 

Not sure if I'm thinking about this correctly, but what do we do at the UI for the user - i.e. where can we allow the user to 'place' the colour field, assuming they have dropped the product name field into the Legend box on the data field UI. Would they place  the colour field nested below the product name in the same Legend box?

Hi. I apologize for the delayed response.

You can nest the colors column in the legend field well, but a much better option would be to add another field well to take that column, and it's not very difficult:

 

You add a new "color" role to your dataRoles array in your capabilities object. It has to be of kind "Grouping" since you want to pass the color as a string. E.g:

{
        displayName: "Colors",
        name: 'colors',
        kind: powerbi.VisualDataRoleKind.Grouping,
}


And then, in you dataViewMappings array, you add the mappings for the new field in the  dataViewMappings[index].categorical.categories.select[] property. E.g:

dataViewMappings: [{
        categorical: {
                categories: {
                        select: [{for: { in: "category" }}, {for: { in: "colors"}}],
                },
                values: {
                        select: [{ for: { in: "values"}}]
                },
        },
}]

Notice that if you already set the "for" property in your categories object, instead of the "select" property, you'll have to replace it as shown in the example above.

 

Now, when you look inside the dataview object received by your visual, you should see that the categorical.categories[] array is populated with two objects, one for the category field well and one for the colors field well, both containing a values[] array of the same size and with corresponding indices.

 

EDITED:

And by "category" I mean "legend"...

konstantinos
Memorable Member
Memorable Member

I am not sure if I understand what you need.

 

Since the Products won't change dynamic colors you can select custom color from attributes and enter the #FF  value

 

When selecting any chart -> then click the paint brush icon -> scroll to Data colors - Custom

 

Capture.PNG

Konstantinos Ioannou
Brian_M
Responsive Resident
Responsive Resident

Thanks for the feedback @konstantinos Smiley Happy. In this case, we don't know how many products there are, or what there names are so I don't think we utilise the UI to choose a custom colour.

Brian_M
Responsive Resident
Responsive Resident

@gatapia do you have any links or suggestions on whether this is possible?

Helpful resources

Announcements
MBAS on Demand

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

July 2021 Update 768x460.png

Check it out!

Click here to read more about the July 2021 Updates

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Urdu Hindi D365 Bootcamp 768x460.png

Urdu Hindi D365 Bootcamp

Dont miss our very own April Dunnam’s The Developer Guide to the Galaxy! Find out what the Power Platform has to offer for the traditional developer.

Top Solution Authors