Power BI is turning 10, and we’re marking the occasion with a special community challenge. Use your creativity to tell a story, uncover trends, or highlight something unexpected.
Get startedJoin us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.
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
}
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.
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.
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Check out the June 2025 Power BI update to learn about new features.
User | Count |
---|---|
11 | |
6 | |
4 | |
2 | |
2 |
User | Count |
---|---|
4 | |
3 | |
3 | |
3 | |
3 |