custom visual format

[Anonymous]

Issue: Trying to create a custom gauge visual but unable to add custom settings.
Tried adding the "FillColor" parameter, but only the default settings are displayed.

capabilities.json

{
    "dataRoles": [
        {
            "name": "measure",
            "kind": "Measure",
            "displayName": "Current Value"
        },
        {
            "name": "maxMeasure",
            "kind": "Measure",
            "displayName": "Maximum Value"
        },
        {
            "name": "minMeasure",
            "kind": "Measure",
            "displayName": "Minimum Value"
        }
    ],
    "dataViewMappings": [
        {
            "categorical": {
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "measure"
                            }
                        },
                        {
                            "bind": {
                                "to": "maxMeasure"
                            }
                        },
                        {
                            "bind": {
                                "to": "minMeasure"
                            }
                        }
                    ]
                }
            }
        }
    ],
    "objects": {
        "gauge": {
            "displayName": "Gauge Settings",
            "properties": {
                "backgroundColor": {
                    "displayName": "Background Color",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "textColor": {
                    "displayName": "Text Color",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "fontSize": {
                    "displayName": "Font Size",
                    "type": {
                        "numeric": true
                    }
                },
                "maxValue": {
                    "displayName": "Maximum Value",
                    "type": {
                        "numeric": true
                    }
                },
                "minValue": {
                    "displayName": "Minimum Value",
                    "type": {
                        "numeric": true
                    }
                },
                "fillColor": {
                    "displayName": "Fill Color",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        }
    },
    "privileges": []
}

settings.ts

"use strict";

import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";



export class VisualSettings extends dataViewObjectsParser.DataViewObjectsParser {
    public gauge: GaugeSettings = new GaugeSettings();

    public static parse<T>(dataView: powerbi.DataView): T {
        const settings = new VisualSettings();
        const objects = dataView.metadata.objects;

        if (objects) {
            settings.gauge.backgroundColor = this.getString(objects, "gauge", "backgroundColor", settings.gauge.backgroundColor);
            settings.gauge.textColor = this.getString(objects, "gauge", "textColor", settings.gauge.textColor);
            settings.gauge.fontSize = this.getNumber(objects, "gauge", "fontSize", settings.gauge.fontSize);
            settings.gauge.maxValue = this.getNumber(objects, "gauge", "maxValue", settings.gauge.maxValue);
            settings.gauge.minValue = this.getNumber(objects, "gauge", "minValue", settings.gauge.minValue);
            settings.gauge.fillColor = this.getString(objects, "gauge", "fillColor", settings.gauge.fillColor);
        }

        return settings as T;
    }

    private static getString(objects: any, objectName: string, propertyName: string, defaultValue: string): string {
        const value = objects[objectName]?.[propertyName];
        return typeof value === 'string' ? value : defaultValue;
    }

    private static getNumber(objects: any, objectName: string, propertyName: string, defaultValue: number): number {
        const value = objects[objectName]?.[propertyName];
        if (typeof value === 'number') {
            return value;
        }
        if (typeof value === 'string') {
            const parsedValue = parseFloat(value);
            return isNaN(parsedValue) ? defaultValue : parsedValue;
        }
        return defaultValue;
    }
}
export class GaugeSettings {
    public backgroundColor: string = "#e6e6e6"; // Background color
    public textColor: string = "#000000"; // Text color
    public fontSize: number = 24; // Font size
    public maxValue: number = 100; // Maximum value
    public minValue: number = 0; // Minimum value
    public fillColor: string = "#00FF00"; // Fill color
}

[Anonymous]

Hi, @Anonymous 
Thanks for reaching out to the Microsoft fabric community forum.

1.In Power BI custom visuals, you can make colours selectable by using the colorPalette service.
 

2.You can combine it with ColorHelper. Below is a screenshot of the relevant documentation for ColorHelper:

Here is a simple example:

this.colorHelper = new ColorHelper(this.visualHost.colorPalette);

The ColorHelper class is typically used to simplify colour management, especially when you need to dynamically set colours based on data. It can fetch colours from the colorPalette and adjust them as needed.

For more details, please refer to:

Add colors to your Power BI custom visuals - Power BI | Microsoft Learn
 

3.Below is the relevant documentation for your issue, which I hope will be helpful:

 Format objects directly API in Power BI Visuals - Power BI | Microsoft Learn
Add formatting options to a Power BI custom visual - Power BI | Microsoft Learn
Customize the format pane in Power BI custom visuals - Power BI | Microsoft Learn

4.Of course, Microsoft also provides a lot of sample files, please refer to the following for details:

Examples of Power BI visuals - Power BI | Microsoft Learn

If you have any new discoveries or questions, please feel free to get in touch with us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.