Any sample with source for setting bar color by "Fx" in custom visual

[Aiya]

Is there any custom visual which has this settings and source code for reference ? 
or how to create this by code in the format panel ?

Thanks

[johnbasha33]

Hi  
Short answer: yes—use the Formatting Model API and enable conditional formatting (the “Fx” button) on a color property by setting the property’s instanceKind to ConstantOrRule, and wiring selectors correctly. Microsoft’s Sample Bar Chart shows this pattern, and the docs walk through it step-by-step.
capabilities.json — define a fill property (only color supports Fx)

{
"objects": {
"colorSelector": {
"displayName": "Data colors",
"properties": {
"fill": { "type": { "fill": { "solid": { "color": true } } } }
}
}
}
}

getFormattingModel — surface a ColorPicker that supports Fx



import powerbi from "powerbi-visuals-api";
import * as dataViewWildcard from "powerbi-visuals-utils-dataviewutils";

public getFormattingModel(): powerbi.visuals.FormattingModel {
const card: powerbi.visuals.FormattingCard = {
displayName: "Data colors",
uid: "dataColorsCard",
groups: [{ displayName: undefined, uid: "dataColorsGroup", slices: [] }]
};

this.barDataPoints.forEach((p, i) => {
(card.groups[0] as powerbi.visuals.FormattingGroup).slices.push({
uid: `color${i}`,
displayName: p.category, // label in the pane
control: {
type: powerbi.visuals.FormattingComponent.ColorPicker,
properties: {
descriptor: {
objectName: "colorSelector",
propertyName: "fill",
// Fx needs a wildcard selector + an alt selector per point:
selector: dataViewWildcard.createDataViewWildcardSelector(
dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals
),
altConstantValueSelector: p.selectionId.getSelector(),
// <- enables the Fx button next to the color swatch
instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
},
value: { value: p.color } // default color when no rule is set
}
}
});
});

return { cards: [card] };
}

This is the same pattern shown in Microsoft’s “Add conditional formatting” article and the SampleBarChart tutorial. Microsoft LearnGitHub

3. Reading the chosen color/rule
   If the user picks a constant color, you’ll get it back as usual via your formatting settings service or enumerateObjectInstances. If they set an Fx rule, Power BI evaluates it and your visual receives the computed color in the data view/objects for the matching data point (or via your settings service), so you just apply fill when drawing bars. Community and docs note that the wildcard/alt selectors are what bind rules to instances. Microsoft LearnStack Overflow

   Useful references (source + docs):

   • Docs: Add conditional formatting (Fx) to custom visuals (includes code using instanceKind and selectors). Microsoft Learn

   • Sample code: PowerBI-visuals-sampleBarChart → Tutorial/ConditionalFormatting.md and barChart.ts. GitHub

     Library: powerbi-visuals-utils-formattingmodel (recommended for the new Format pane). GitHubMicrosoft Learn+1



     Did I answer your question? Mark my post as a solution! Appreciate your Kudos !!

     @Aiya