Add Legend to WordCloud Visual

[Anonymous]

Dear Community

I would like to do the following:

I am a very beginner but I could already add the place for the legend in capabilities.json but I could not find any website that shows me how to add a legend to a costum visual (That I could understand). On top of that it needs to be able to change the position like I can do in for example the Stacked bar chart.

Thank you in advance,

Dominik

[Anonymous]

HI @Anonymous,

AFAIK, current the word cloud custom visual does not support the legends field. Perhaps you can contact to power bi custom visual team to ask them to add the legend support in this visual.

Regards,

Xiaoxin Sheng

[Anonymous]

Dear Mr. Sheng

Thank you for your answer.

The CloudWord Visual does not have a legend support so far.

I need to implement it but I found very few information how to do that.

https://docs.microsoft.com/en-us/power-bi/developer/visuals/utils-chart#legend-service

I found the link above, maybe someone can explain me where and how to use this functions in a custom Visual. 

Thank you in advance,

Dominik

[Anonymous]

Dear Community,

I could create a legend but now I would like to connect my created legend with the legend field.

I have installed the 'powerbi-visuals-utils-chartutils'

I added the following imports:

import { legendInterfaces, legend } from 'powerbi-visuals-utils-chartutils';
import createLegend = legend.createLegend;
import ILegend = legendInterfaces.ILegend;
import LegendDataPoint = legendInterfaces.LegendDataPoint;
import LegendPosition = legendInterfaces.LegendPosition;
import MarkerShape = legendInterfaces.MarkerShape;

In my Class I added the following:

private target: HTMLElement;
private set: VisualSettings;
private legend: ILegend;
private host: IVisualHost;

In the Constructor I added the following:

public constructor(options: VisualConstructorOptions) {
    this.target = options.element;
    this.host = options.host;
    this.legend = createLegend(this.target, false, null, true, LegendPosition.Top);

And finally in the update function:

public update(visualUpdateOptions: VisualUpdateOptions): void {
    this.set = WordCloud.parseSettings(visualUpdateOptions && visualUpdateOptions.dataViews && 
    visualUpdateOptions.dataViews[0]);
    let categoryRole = visualUpdateOptions.dataViews[0].categorical.categories[0];
    let myLegendDataPoints: LegendDataPoint[] = categoryRole.values.map(
            (c, i) => (
                {
                    label: <string>c,
                    color: this.host.colorPalette.getColor(<string>c).value,
                    identity: this.host.createSelectionIdBuilder()
                        .withCategory(categoryRole, i)
                        .createSelectionId(),
                    selected: false,
                    markerShape: MarkerShape.circle
                }
            )
        );   
        this.legend.drawLegend(
            {
                title: `Test Legend`,
                fontSize: 10,
                dataPoints: myLegendDataPoints
            },
            visualUpdateOptions.viewport
        );

Now every time when I start my visual the legend is already visible and the values are the same as in the Category field.

I would like to connect my legend field with my current legend. I am pretty sure that I need to change my implementation from my current legend to achieve my goal.

How do I need to do that?

I hope my question is understandable.

Thank you in advance.