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

Don't miss out! 2025 Microsoft Fabric Community Conference, March 31 - April 2, Las Vegas, Nevada. Use code MSCUST for a $150 discount. Prices go up February 11th. Register now.

Reply
AntenPuzl
Frequent Visitor

custom visual format

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
}

 

1 REPLY 1
v-linyulu-msft
Community Support
Community Support

Hi, @AntenPuzl 
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.
 

vlinyulumsft_0-1734933553245.png

 

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

vlinyulumsft_1-1734933553246.png

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

I
f 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.

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Prices go up Feb. 11th.

Jan25PBI_Carousel

Power BI Monthly Update - January 2025

Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.

Jan NL Carousel

Fabric Community Update - January 2025

Find out what's new and trending in the Fabric community.