Get certified for free when you join Fabric Data Days 2026 and dive into Fabric, Power BI, SQL, AI, and other essential data skills.
Join nowJuly 7 - July 17 | Round 2 of the Power BI Dataviz World Championships. Don't miss your chance! Learn more
I've installed everything for creating custom visuals, as the "Update: X" visual displays properly. However, when trying to display a visual with static data, the visual is blank. I have added values to both Category & Measure field wells.
The code I'm using is the static bar chart: https://github.com/Microsoft/PowerBI-visuals-sampleBarChart/blob/master/Tutorial/StaticVisual.md
Code:
/*
* Power BI Visual CLI
*
* Copyright (c) Microsoft Corporation
* All rights reserved.
* MIT License
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the ""Software""), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
module powerbi.extensibility.visual {
interface dataPoint {
category: string;
value: number;
}
interface ViewModel {
dataPoints: dataPoint[];
maxValue: number;
};
"use strict";
export class Visual implements IVisual {
private host: IVisualHost;
private svg: d3.Selection<SVGElement>;
private barGroup: d3.Selection<SVGElement>;
private xPadding: number = 0.1;
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.svg = d3.select(options.element)
.append("svg")
.classed("barchart", true);
this.barGroup = this.svg
.append("g")
.classed("barGroup", true);
}
public update(options: VisualUpdateOptions) {
let sample: dataPoint[] = [
{category: 'apples', value: 5},
{category: 'bananas', value: 10},
{category: 'oranges', value: 15}
];
let viewModel: ViewModel = {
dataPoints: sample,
maxValue: d3.max(sample, x => x.value)
};
let width = options.viewport.width;
let height = options.viewport.height;
this.svg.attr({
width: width,
height: height
});
let yScale = d3.scale.linear().domain([0, viewModel.maxValue]).range([height, 0]);
let xScale = d3.scale.ordinal().domain(viewModel.dataPoints.map(d => d.category)).rangeRoundBands([0,width], this.xPadding);
let bars = this.barGroup
.selectAll(".bar")
.data(viewModel.dataPoints);
bars.enter()
.append("rect")
.classed("bar", true);
bars.attr({
width: xScale.rangeBand(),
height: d => height - yScale(d.value),
y: d => yScale(d.value),
x: d => xScale(d.category)
});
bars.exit()
.remove();
};
/**
private static parseSettings(dataView: DataView): VisualSettings {
return VisualSettings.parse(dataView) as VisualSettings;
}
* This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
* objects and properties you want to expose to the users in the property pane.
*
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
*/
}
}Join us in Barcelona for FabCon and SQLCon, the Fabric, Power BI, SQL, and AI community event. Save €200 with code FABCMTY200.
Join Data Days 2026: 60 days of free live/on-demand sessions, challenges, study groups, and certification opportunities.
| User | Count |
|---|---|
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 |
| User | Count |
|---|---|
| 4 | |
| 3 | |
| 2 | |
| 2 | |
| 1 |