Query: Power BI Custom Visual API Block – GPT/Gemini Integration Issue
I’m working on integrating ChatGPT or Google Gemini into Power BI using a custom visual to enable interactive AI responses directly from the report, based on the dataset contents. Everything works fine when I test the API in Postman, but Power BI blocks the API call from the custom visual due to security restrictions, most likely related to Content Security Policy (CSP) or cross-origin (CORS) issues. I’ve Tried So Far Built a custom visual in Power BI using React and TypeScript Integrated OpenAI/Gemini API logic inside the visual Created a proxy API server to forward the API requests Used tunneling tools like: Localtunnel ngrok Cloudflare Tunnel But unfortunately, the API calls are still being blocked when the custom visual is rendered inside Power BI Desktop I Need Help With How can I successfully connect Power BI custom visual to OpenAI/Gemini API through a proxy or tunnel? Is there a recommended tunneling or reverse proxy approach that works with Power BI visuals? Any other approaches to solve the problem. Please share your thoughts. Any guidance or step-by-step solution would be greatly appreciated! Thanks!
Need Month-Year Granularity in Free Gantt Visual for Power BI
Hi Team, I’m working on a project timeline visualization in Power BI. My goal is to show projects across months (MMM-YYYY) with managers clearly visible. Current challenges: The Microsoft Gantt visual only supports duration units like Days, Hours, Minutes, Seconds. There’s no option to format the timeline axis as MMM-YYYY or set granularity to Month. Most advanced Gantt visuals (MAQ, PowerGraph, xViz) require paid subscriptions, which is a blocker for many users. What I need: A free Gantt visual that supports Month-Year granularity and custom date formatting. Ability to group by Manager and show project bars spanning start and end dates. Why this matters: Monthly timelines are critical for project planning and reporting. Many organizations rely on Power BI’s free visuals for accessibility and cost control. Could Microsoft consider adding these features to the default Gantt visual or provide a free alternative? Project Manager / Lead Lead PM Region 2nd PM Client Name UPA account No. Project Name (free text) Project/Displacement Overview (free text) Project Type Customer Sector LDA customer? Project Region Scope Annual Recurring Revenue (GBP) Once off Cost Planned Project Start Date Original project End Date Revised Project end date (if applicable) Project Phase Phase Status Supporting comments for Project phase (Free text) % Complete (manual) RAG ID Project Ref Manager 1 APAC PeerPM 1 Client 1 ACC-1000 Project 1 [redacted] Strategic - Execution FX Yes [EMEA] 06-03-2025 19-12-2025 Execution Technical issue [redacted] 46% Red 1 PRJ-1 Manager 2 APAC PeerPM 2 Client 2 ACC-1001 Project 2 [redacted] New Business IB Yes [APAC] 26-02-2025 03-05-2025 Execution On track [redacted] 43% Amber 2 PRJ-2 Manager 3 AMERS PeerPM 3 Client 3 ACC-1002 Project 3 [redacted] Displacement FX No [AMERS] 04-04-2025 24-08-2025 Execution Client Delay [redacted] 93% Red 3 PRJ-3 Manager 4 APAC PeerPM 4 Client 4 ACC-1003 Project 4 [redacted] Displacement IB No [APAC] 31-03-2025 31-03-2026 Execution On track [redacted] 73% Green 4 PRJ-4 Manager 5 AMERS PeerPM 5 Client 5 ACC-1004 Project 5 [redacted] New Business FX Yes [AMERS] 17-06-2025 13-12-2025 Execution Technical issue [redacted] 95% Amber 5 PRJ-5 Manager 6 EMEA PeerPM 6 Client 6 ACC-1005 Project 6 [redacted] New Business Cross Asset No [APAC] 20-07-2025 15-07-2026 Execution Technical issue [redacted] 20% Red 6 PRJ-6 Manager 7 APAC PeerPM 7 Client 7 ACC-1006 Project 7 [redacted] New Business Equities Yes [AMERS] 05-10-2025 23-05-2026 Execution Client Delay [redacted] 51% Red 7 PRJ-7 Manager 8 APAC PeerPM 8 Client 8 ACC-1007 Project 8 [redacted] Displacement FX No [EMEA] 30-03-2025 19-06-2025 Execution Technical issue [redacted] 38% Amber 8 PRJ-8 Manager 9 AMERS PeerPM 9 Client 9 ACC-1008 Project 9 [redacted] Displacement FX No [AMERS] 10-09-2025 26-07-2026 Execution Technical issue [redacted] 37% Red 9 PRJ-9 Manager 10 AMERS PeerPM 10 Client 10 ACC-1009 Project 10 [redacted] Displacement Equities Yes [EMEA] 18-09-2025 10-03-2026 Execution Technical issue [redacted] 88% Amber 10 PRJ-10 Manager 11 EMEA PeerPM 11 Client 11 ACC-1010 Project 11 [redacted] New Business FX Yes [AMERS] 09-09-2025 28-02-2026 Execution Client Delay [redacted] 56% Red 11 PRJ-11 Manager 12 AMERS PeerPM 12 Client 12 ACC-1011 Project 12 [redacted] New Business Cross Asset No [AMERS] 26-11-2025 28-01-2026 Execution Client Delay [redacted] 48% Amber 12 PRJ-12 Manager 13 APAC PeerPM 13 Client 13 ACC-1012 Project 13 [redacted] New Business Cross Asset Yes [EMEA] 01-01-2025 15-11-2025 Execution Client Delay [redacted] 93% Green 13 PRJ-13 Manager 14 APAC PeerPM 14 Client 14 ACC-1013 Project 14 [redacted] New Business IB No [AMERS] 09-12-2025 14-07-2026 Execution Client Delay [redacted] 80% Red 14 PRJ-14 Manager 15 APAC PeerPM 15 Client 15 ACC-1014 Project 15 [redacted] New Business Cross Asset No [APAC] 02-04-2025 29-06-2025 Execution Technical issue [redacted] 31% Green 15 PRJ-15
Line Chart Error Band Color Formatting
Hi Power BI Community, I Created a Line Chart and I have two Lines date on the X-axis and values on the Y axis. To show the difference between the two lines I turned on the error bands to show the shaded area as the difference between the two lines but the issue is when the second line goes above the first line that area is also getting shaded in green. I only want to shade the area till the dotted line. I tried to solve this by setting the upper bound for the second line as the dotted line value but it does not solve the issue and is there any way to color the area which is above the dotted line in red. Please Let me know if there is any other way to achieve this. Regards, Ibrahim.How to create a Clustered, Stacked Column Chart
Hi Power Bi Community, I Created a clustered and stacked column chart with a measure and a category table. but there is one issue with it I have to add a column in the X axis field and it shows in the visual vertically which i don't like. Is their any other alternative method to create a cluster and stacked column chart. This is the clustered and stacked column chart that i created below. I only want the Phase labels but because of the group column the Payable and Receivable label is also getting displayed in the visual for each phase, which i want to remove. Please provide a solution for this. Thank you. Regards, Ibrahim.
PowerBI custom visual "hidden" options in format panel
Hello, I'm playing around with custom visuals and I'm trying to understant how they work. So I reach a point where I have added 3 blades to the format panel, X-axis, Y-axis, and gridlines. X/Y Axis work but when I added the blade for gridlines all the format panel options dissapear. As for what I understant that means that something is wrong with gridlines. Okey, so here is the "odd" thing. I'm debuggin the custom visual. I can see that VisualFormattingSettingsModel is being populated, not only that but I can also use parameters from grindlines. The problem is that those confs do not appear on the formatting panel, it feels like they are there but they are hidden... To be honest I was specting that VisualFormattingSettingsModel would be empty because idk, I mess up with something in settings.ts or capabilities.json. But the variables exist and at least I can use them. Any help is appreciated, Thanks. BTW, do not worrie about the data shown in the graphics. Is one of the sample datasets
Fix Filtering | Custom Visual
Dear Community, I'm developing a little custom visual that consists of two dropdowns. Problem 1: Currently my dropdowns are successfully populated with data and I can select values. I want to add filtering functionality to the dropdowns. As you can see in code, I have tried to implement it myself but I can't make it work as intended. Any selections in the first dropdown don't do anything. Selections in the second dropdown filter data in the page to selected value but don't affect avalible options in the first dropdown. Problem 2: I want to create little eraser icons near both dropdowns. Clicking them clears selection and removes filters in corresponding dropdown. Logic is implemented in visual.ts : import powerbi from "powerbi-visuals-api"; import "./../style/visual.less"; import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import IVisual = powerbi.extensibility.visual.IVisual; import DataView = powerbi.DataView; import * as d3 from "d3"; import { BasicFilter, IFilterColumnTarget } from "powerbi-models"; import IFilter = powerbi.IFilter; import FilterAction = powerbi.FilterAction; export class AALCalculatorVisual implements IVisual { // Visual elements private svgRoot: d3.Selection<SVGElement, {}, HTMLElement, any>; private dropdowns: d3.Selection<HTMLSelectElement, {}, HTMLElement, any>[] = []; // Parameters private visualHost: powerbi.extensibility.visual.IVisualHost; private currentDataView: DataView | null = null; private postalCode: string = ""; private lob: string = ""; constructor(options: VisualConstructorOptions) { this.visualHost = options.host; this.svgRoot = d3.select(options.element).append("svg") .style("background", "rgb(0, 82, 164)"); // Dropdowns (moved above input fields) const dropdownNames = ["Postal Code", "LOB"]; dropdownNames.forEach((name, index) => { this.svgRoot.append("text") .text(name + ":") .attr("x", 10) .attr("y", 80 + index * 40) .style("font-size", "16px") .style("fill", "white"); const dropdown = d3.select(options.element) .append("select") .attr("class", "dropdown-box") .style("position", "absolute") .style("top", `${70 + index * 40}px`) .style("left", "150px") .style("width", "130px") .style("padding", "8px") .style("border", "1px solid rgb(0, 122, 197)") .style("border-radius", "6px") .style("background", "white") .style("color", "black") .on("change", (event) => this.handleDropdownChange(index, event)); this.dropdowns.push(dropdown); }); } private handleDropdownChange(index: number, event: any): void { const value = event.target.value; if (index === 0) { this.postalCode = value; } else if (index === 1) { this.lob = value; } if (this.currentDataView) { this.applyFilter(this.currentDataView); } } public update(options: VisualUpdateOptions) { this.currentDataView = options.dataViews[0]; // Save the DataView to a class property this.svgRoot .attr("width", options.viewport.width) .attr("height", options.viewport.height); let dataView: DataView = this.currentDataView; let table = dataView.table; let postalCodeIndex = table.columns.findIndex(col => col.roles["PostalCode"]); let lobIndex = table.columns.findIndex(col => col.roles["LOB"]); if (postalCodeIndex !== -1) { let postalCodes = Array.from(new Set(table.rows.map(row => String(row[postalCodeIndex])))); this.populateDropdown(this.dropdowns[0], postalCodes, this.postalCode); } if (lobIndex !== -1) { let lobs = Array.from(new Set(table.rows.map(row => String(row[lobIndex])))); this.populateDropdown(this.dropdowns[1], lobs, this.lob); } console.log("DataView Columns: ", dataView.metadata.columns); } private populateDropdown(dropdown: d3.Selection<HTMLSelectElement, {}, HTMLElement, any>, values: string[], selectedValue: string): void { dropdown.selectAll("option").remove(); // Clear existing options // Preserve existing selection let isSelectedValueInList = values.includes(selectedValue); // Add options dynamically values.forEach(value => { dropdown.append("option") .text(value) .attr("value", value) .attr("selected", value === selectedValue ? "selected" : null); // Keep previous selection }); if (!isSelectedValueInList) { dropdown.property("value", ""); // Reset only if the selection is invalid } } private applyFilter(dataView: DataView): void { if (!this.visualHost) { console.error("Visual Host is not initialized properly."); return; } const filterValues: string[] = []; let targets: IFilterColumnTarget[] = []; if (this.postalCode) filterValues.push(this.postalCode); if (this.lob) filterValues.push(this.lob); if (dataView?.metadata?.columns) { dataView.metadata.columns.forEach(column => { console.log("Checking Column:", column.displayName, "Query Name:", column.queryName); if (column.displayName === "Postal Code" && this.postalCode) { targets.push({ table: column.queryName.split('.')[0], column: column.displayName }); } if (column.displayName === "LOB" && this.lob) { targets.push({ table: column.queryName.split('.')[0], column: column.displayName }); } }); } console.log("Targets:", targets); console.log("Filter Values:", filterValues); if (targets.length > 0 && filterValues.length > 0) { const filters: IFilter[] = targets.map((target, index) => new BasicFilter(target, "In", [filterValues[index]]) // Use index instead of shift() ); filters.forEach(filter => { this.visualHost.applyJsonFilter(filter, "general", "filter", FilterAction.merge); }); console.log("Filters Applied: ", filters); } else { this.visualHost.applyJsonFilter(null, "general", "filter", FilterAction.merge); console.log("Filters Cleared."); } } } Here is my capabilities.json: { "dataRoles": [ { "name": "PostalCode", "kind": "Grouping", "displayName": "Postal Code" }, { "name": "LOB", "kind": "Grouping", "displayName": "LOB" } ], "dataViewMappings": [ { "table": { "rows": { "select": [ { "for": { "in": "PostalCode" }, "dataReductionAlgorithm": { "singleCategory": {} } }, { "for": { "in": "LOB" }, "dataReductionAlgorithm": { "singleCategory": {} } } ] } }, "conditions": [ { "PostalCode": { "max": 1, "min": 0 }, "LOB": { "max": 1, "min": 0 } } ] } ], "objects": { "general": { "displayName": "General", "properties": { "filter": { "type": { "filter": true } } } } }, "privileges": [] } Thank you very much in advance! Kind regards, Artem
Issue with Easy SPC chart
I have data Headcount reportdate 1000 2022-01-01 2000 2022-02-01 3000 2022-03-01 4000 2022-04-01 To represent the Easy SPC chart, I dragged headcount data into the measure section, and in the dates section, I used the report date column. then click on Run chart option, I am able to see the data When i am representing count type of data chart is showing correctly but, when i have data perc reportdate 0.002 2022-01-01 0.53 2022-02-01 0.62 2022-03-01 0.63 2022-04-01 This decimal values is not showing as it is in the tooltip , it is showing for all the data points as 1 , i am not able to figure where to fix that
npm run lint error--Invalid option '--ext' - perhaps you meant '-c'?
Hi, I encountered en error when I excuted : npm run lint It shows > lint > npx eslint . --ext .js,.jsx,.ts,.tsx Invalid option '--ext' - perhaps you meant '-c'? You're using eslint.config.js, some command line flags are no longer available. Please see https://eslint.org/docs/latest/use/command-line-interface for details. My package.json file My eslint.config.mjs file I checked this because we want to get certivication from Microsoft for our custom visual . I checked file requirements as below. Get your Power BI visuals certified - Power BI | Microsoft Learn Best Regards
Conditional Distinct Count of Values
In a working Deneb visual that displays survey data, I have a relatively flat dataset structured this way: When aggregating this data, I want a count of distinct values for "person" - ONLY for rows where "complete" = 0. Also, I do not want to filter the data to achieve this, because I need the filtered rows later for other purposes. My first strategy was to calculate a new column called "distinctPerson" that listed the person column value if "complete" == 1 and showed null otherwise, but the "distinct" count sees 'null' as a distinct value rather than ignoring it. Here is a link to the example in the vega editor. As you can see from the chart, "null" values - which are cases where there is no value in the person column because "complete" = 0 - are counted as distinct values: How can I remove these null values from the count (not the chart, the actual aggregation in the background) without filtering the dataset to "datum.Completed == 1" since this would remove necessary information for later? I have tried the following concepts without success: Perform transforms within a lookup (this doesn't seem to work - maybe I'm missing something?) Define and transform an additional data object that references my initial named dataset and join onto original (I haven't figured out a way to get this working) If I'm missing something major, please let me know - or if one of the two failed attempts I listed is likely to work, and I'm just using the wrong syntax, let me know and I can provide more info. Thanks in advance! giammariam UPDATE: pbix containning the visual and dataset here.Deneb: implicitly calculated columns messing up x axis positioning for labels
I have a Deneb visual using vega lite. I used transforms to calculate a field for the x-axis position of labels (a text mark in the same layer object) hovering above bar marks - the field is called "DifferenceHalf": Relevant code snippet below: { "sort": [{"field": "PromoterCategoryLabelMathSort", "order": "ascending"}], "window": [ { "op": "lag", "field": "PromoterCategoryPercent", "as": "PriorPromoterCategoryPercent" } ], "groupby": ["Series"] }, { "calculate": "datum.PriorPromoterCategoryPercent == null ? 0 : datum.PriorPromoterCategoryPercent", "as": "PriorPromoterCategoryPercent" }, { "calculate": "1 - (datum.PromoterCategoryPercent + datum.PriorPromoterCategoryPercent) + (datum.PromoterCategoryPercent / 2)", "as": "DifferenceHalf" } The transforms implicitly calculated two columns ending in "_start" and "_end": Since these values go beyond the max column size of 1, I'm guessing they are causing the formatting errors. I found very little information on the _start and _end columns when googling. I could not find any reference in the docs. Can anyone explain why these columns were generated and why Vega Lite is referencing them implicitly in my label positioning? Ideally, I'd love to just use the field I calculated and not have Vega Lite implicitly reference these other columns.
