Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Try your skills in the Power BI Dataviz World Championship! Round one ends June 26. Join now

Reply
anandsoftweb
Advocate V
Advocate V

Create Custom visuals - Set bar color

Hello All,

 

I am developing custome visual for Stack bar chart and I am facing issue while implementing color palette, 

 

I have added color palette successfully but not able to save its value and retrive it in bar. 

 

Once we select color from palette it will again set as default.

 

Below is my code snipet from custom visual.

 

let colorPalette: IColorPalette = hst.colorPalette;
            if (this.ColumnValues.length > 0 ) 
            {
                for(var i=0; i < this.ColumnValues.length; i++) 
                {
                    let defaultColor: Fill = {
                        solid: {
                            color: colorPalette.getColor(this.ColumnValues[i] + '').value
                        }
                    };
                    var objn  = { FieldName: this.ColumnValues[i] };
                    
                    objn["Color"] = Visual.getCategoricalObjectValue<Fill>(this.ColumnValues[i], i, 'colorSelector', 'fill', defaultColor).solid.color,
                    objn["LegendLabel"] = this.ColumnValues[i];
                    objn["selectionId"] = Visual.getSelectionIds(element.dataViews[0],hst)
                    this.stackOriginalFields.push(objn);
                }
            }
			
			*ColumnValues = Two Different Value of Catehory
			
			public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
            let objectName = options.objectName;
            let objectEnumeration: VisualObjectInstance[] = [];                
            var c = this.stackOriginalFields;
            
			 switch(objectName) {
			 case 'colorSelector':
                    for (let barDataPoint of c) {
                        
                        objectEnumeration.push({
                            objectName: objectName,
                            displayName: barDataPoint.LegendLabel ,
                            properties: {
                                fill: {
                                    solid: {
                                        Color: barDataPoint.Color
                                    }
                                }
                            },
                            //selector: barDataPoint.LegendLabel
							//selector:barDataPoint.selectionId.getSelector() //Its not working						
                            selector:barDataPoint.selectionId
                        });
                    }
                    break;
			 };        
            
            return objectEnumeration;
			}
			
			
			
			public static getCategoricalObjectValue<T>(category: DataViewCategoryColumn, index: number, objectName: string, propertyName: string, defaultValue: T): T {
            let categoryObjects = category.objects;
            if (categoryObjects) {
                
                let categoryObject: DataViewObject = categoryObjects[index];
                if (categoryObject) {                    
                    let object = categoryObject[objectName];
                    if (object) {
                        console.log("object"+object)
                        let property: T = <T>object[propertyName];
                        if (property !== undefined) {
                            return property;
                        }
                    }
                }
            }
            return defaultValue;
        }

        private static getSelectionIds(
            dataView: DataView,
            host: IVisualHost
        😞 powerbi.visuals.ISelectionId[] {
            const queryName: string = dataView.table.columns[0].queryName;

            return dataView.table.identity.map((identity: DataViewScopeIdentity) => {
                const categoryColumn: DataViewCategoryColumn = {
                    source: {
                        queryName,
                        displayName: null
                    },
                    values: null,
                    identity: [identity]
                };

                return host.createSelectionIdBuilder()
                    .withCategory(categoryColumn, 0)
                    .withMeasure(queryName)
                    .createSelectionId();
            });
        }
			
			
	*In Capabilities.json file
	dataViewMappings": [
      {
        "table": {
          "rows": {
            "select": [
              { "for": { "in": "Columnvalues" }}
            ]
          }
        }
      }
    ]

Thanks In Advance

1 REPLY 1
v-viig
Community Champion
Community Champion

It seems this issue is related to:

selector:barDataPoint.selectionId

But Power BI host expects a Selector not SelectionId. To fix this issue we would recommned to use:

selector:barDataPoint.selectionId.getSelector()

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
Fabric Data Days is here Carousel

Data Days 2026

Don't miss out on Data Days, June 15 through August 7. Learn Fabric, Power BI, SQL, AI and more.

May Power BI Update Carousel

Power BI Monthly Update - May 2026

Check out the May 2026 Power BI update to learn about new features.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.