Forum Discussion
Continued ContributorDynamically define colour of bar/column graph - custom visualisation
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.
Resolver III'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.
Continued ContributorThat's a great help itayrom:smileyhappy:, 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?
- itayrom
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"...