Hi, I've configured my settings.ts file as well. I'm able to get properties panel but the color change change is not reflected in UI.
UI Looks like this:
here is my code for settings.ts file
"use strict";
import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
class LabelsCardSetting extends formattingSettings.SimpleCard {
name: string = "labels"; // same as capabilities object name
displayName: string = "Labels";
// selector is not needed and has been removed
public fontFamily: formattingSettings.FontPicker = new formattingSettings.FontPicker({
name: "fontFamily", // same as capabilities property name
value: "Arial, sans-serif"
});
public fontSize: formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
name: "fontSize", // same as capabilities property name
value: 11
});
public bold: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
name: "bold", // same as capabilities property name
value: false
});
public italic: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
name: "italic", // same as capabilities property name
value: false
});
public underline: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
name: "underline", // same as capabilities property name
value: false
});
public font: formattingSettings.FontControl = new formattingSettings.FontControl({
name: "font", // must be unique within the same object
displayName: "Font",
fontFamily: this.fontFamily,
fontSize: this.fontSize,
bold: this.bold, //optional
italic: this.italic, //optional
underline: this.underline //optional
});
public slices: formattingSettings.Slice[] = [this.font];
}
// Slice color settings
class SlicesColorCardSetting extends formattingSettings.SimpleCard {
name: string = "sliceColors";
displayName: string = "Slice Colors";
public dynamicSliceColors: formattingSettings.ColorPicker[] = [];
private defaultColors: string[] = ['#AEDFF7', '#73C6F3', '#3498DB', '#2E86C1', '#1B4F72', '#154360'];
// Dynamically generate ColorPicker settings based on the number of slices
public updateSliceColors(sliceNames: string[], currentColors: Record<string, string> = {}) {
// Create a lookup for existing colors
const existingColors: Record<string, formattingSettings.ColorPicker> = {};
for (const colorPicker of this.dynamicSliceColors) {
existingColors[colorPicker.name] = {
name: colorPicker.name,
value: colorPicker.value,
};
}
// Map slice names to dynamic slice colors
const updatedSliceColors: formattingSettings.ColorPicker[] = [];
for (let i = 0; i < sliceNames.length; i++) {
const sliceName = sliceNames[i];
const colorName = `sliceColor${i + 1}`;
const defaultColor = this.defaultColors[i % this.defaultColors.length];
updatedSliceColors.push(
new formattingSettings.ColorPicker({
name: colorName,
displayName: `${sliceName} Color`,
value: typeof currentColors[colorName] === 'string' ? { value: currentColors[colorName] } : currentColors[colorName] || existingColors[colorName]?.value || defaultColor,
})
);
}
this.dynamicSliceColors = updatedSliceColors;
this.slices = this.dynamicSliceColors;
console.log("Updated Slice Colors:", this.dynamicSliceColors);
console.log("Retained Colors:", existingColors);
console.log("Dynamic Slice Colors After Update:", this.dynamicSliceColors);
}
public slices: formattingSettings.Slice[] = [];
}
export class VisualFormattingSettingsModel extends formattingSettings.Model {
updateSliceColors(sliceNames: string[]) {
throw new Error("Method not implemented.");
}
public labels: LabelsCardSetting = new LabelsCardSetting();
public sliceColors: SlicesColorCardSetting = new SlicesColorCardSetting();
public cards: formattingSettings.SimpleCard[] = [this.labels, this.sliceColors];
static parse: any;
// Bind font properties to DataLabels objects
public bindToDataLabels(dataLabels: any) {
dataLabels.fontFamily = this.labels.fontFamily.value;
dataLabels.fontSize = this.labels.fontSize.value;
dataLabels.bold = this.labels.bold.value;
dataLabels.italic = this.labels.italic.value;
dataLabels.underline = this.labels.underline.value;
console.log(dataLabels);
}
// }
public bindToSliceColors(sliceNames: string[], sliceColors: any[]) {
const currentColors = sliceNames.reduce((acc, sliceName, index) => {
acc[`sliceColor${index + 1}`] = sliceColors[index];
return acc;
}, {} as Record<string, string>);
this.sliceColors.updateSliceColors(sliceNames, currentColors);
this.sliceColors.dynamicSliceColors.forEach((colorPicker, index) => {
sliceColors[index] = colorPicker.value.value; // Assuming colorPicker.value is an object with a 'value' property
});
// public getSelectedSliceColors(): any[] {
// return this.sliceColors.dynamicSliceColors.map(colorPicker => colorPicker.value);
// }
}
}
Helpful resources
Power BI Dataviz World Championships
The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now!
Power BI Monthly Update - December 2025
Check out the December 2025 Power BI Holiday Recap!
FabCon Atlanta 2026
Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.
