Check your eligibility for this 50% exam voucher offer and join us for free live learning sessions to get prepared for Exam DP-700.
Get StartedDon'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.
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.
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Prices go up Feb. 11th.
Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.
User | Count |
---|---|
5 | |
2 | |
1 | |
1 | |
1 |