Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
4 years ago

Add Legend to WordCloud Visual

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

 

Need Help
Tutorial Requests

3 Replies

  • Anonymous's avatar
    Anonymous
    Not applicable
    4 years ago

    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's avatar
        Anonymous
        Not applicable
        4 years ago

        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.