custom visual format

Anonymous — Sat, 21 Dec 2024 23:57:45 GMT

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 }

Re: custom visual format

Anonymous — Mon, 23 Dec 2024 06:02:14 GMT

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.

topic Re: custom visual format in Developer

custom visual format

Re: custom visual format