Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
I've created a custom visual (combination scatter plot and dual-line graph) and am attempting to add tooltips. I used table databinding and followed an example I found here for assigning an Identity. For some reason, the tooltips are each only showing one line (employee ID) and the ID is the same for each tooltip.
import DataViewObjects = powerbi.extensibility.utils.dataview.DataViewObjects; module powerbi.extensibility.visual { "use strict"; interface DataPoint { grade: number; minimum: number; maximum: number; }; interface ViewModel { dataPoints: DataPoint[]; rangePenData: RangePoint[]; maxValue: number; minValue: number; maxGrade: number; minGrade: number; }; interface RangePoint { grade: number; rangePen: number; employeeID: string; tooltips: VisualTooltipDataItem[]; identity: ISelectionId[]; } export class Visual implements IVisual { private host: IVisualHost; private svg: d3.Selection<SVGElement>; private structureGroup: d3.Selection<SVGElement>; private yPadding: number = 0.1; private scatterGroup: d3.Selection<SVGElement>; private xAxisGroup: d3.Selection<SVGElement>; private yAxisGroup: d3.Selection<SVGElement>; private settings = { axis: { x: { padding: 25 }, y: { padding: 50 } }, border: { top: 10 } } constructor(options: VisualConstructorOptions) { this.host = options.host; this.svg = d3.select(options.element) .append("svg") .classed("vchart", true); this.structureGroup = this.svg.append("g") .classed("structure-group", true); this.scatterGroup = this.svg.append("g") .classed("scatter-group", true); this.xAxisGroup = this.svg.append("g") .classed("x-axis", true) this.yAxisGroup = this.svg.append("g") .classed("y-axis", true) } public update(options: VisualUpdateOptions) { let viewModel = this.getViewModel(options) let spread = Math.max(Math.abs(viewModel.minValue),Math.abs(viewModel.maxValue)) let width = options.viewport.width; let height = options.viewport.height; this.svg.attr({ width: width, height: height, }); let xScale = d3.scale.linear() .domain([spread*-1,spread]) .range([this.settings.axis.x.padding, width]); let xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .tickSize(1); this.xAxisGroup.call(xAxis) .attr({ transform: "translate(0, " + (height-this.settings.axis.x.padding) + ")" }); let yScale = d3.scale.linear() .domain([viewModel.maxGrade,viewModel.minGrade]) .range([0 + this.settings.border.top, height - this.settings.axis.x.padding]); let yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickSize(1); this.yAxisGroup .call(yAxis) .attr({ transform: "translate(" + (width + this.settings.axis.y.padding)/2 + ",0)" }) .selectAll("text") .style({ "text-anchor": "end", "font-size": "small" }); var valueline = d3.svg.line<DataPoint>() .x(function (d) { return xScale(d.minimum); }) .y(function (d) { return yScale(d.grade); }) var valueline2 = d3.svg.line<DataPoint>() .x(function (d) { return xScale(d.maximum); }) .y(function (d) { return yScale(d.grade); }) let minline = this.structureGroup .selectAll(".minline") .data([viewModel.dataPoints]); minline .enter() .append("path") .attr("class", "minline"); minline .attr("d", function (d) { return valueline(d); }) .style({ stroke: "green", fill: "none", "stroke-width": "3px", }); minline.exit() .remove(); let maxline = this.structureGroup .selectAll(".maxline") .data([viewModel.dataPoints]); maxline .enter() .append("path") .attr("class", "maxline"); maxline .attr("d", function (d) { return valueline2(d); }) .style({ stroke: "green", fill: "none", "stroke-width": "3px", }); maxline.exit() .remove(); let scatter = this.scatterGroup .selectAll(".rangePen") .data(viewModel.rangePenData) scatter .enter() .append("circle") .attr("class", "rangePen") scatter .attr("cx", d => xScale(d.rangePen)) .attr("cy", d => yScale(d.grade)) .attr("r", 5) .on("mouseover", (d) => { let mouse=d3.mouse(this.svg.node()); let x=mouse[0]; let y=mouse[1]; this.host.tooltipService.show({ dataItems: d.tooltips, identities: [d.identity], coordinates: [x, y], isTouchEvent: false }) }) scatter.exit() .remove(); } private getViewModel(options: VisualUpdateOptions): ViewModel { let dv = options.dataViews; let viewModel: ViewModel = { dataPoints: [], rangePenData: [], maxValue: 0, minValue: 0, maxGrade: 0, minGrade: 0, }; let view1 = dv[0].table; let view2 = dv[0]; for (let i = 0, len = view1.rows.length; i < len; i++) { viewModel.dataPoints.push({ grade: <number>view1.rows[i][1], minimum: <number>view1.rows[i][2]/-2, maximum: <number>view1.rows[i][2]/2, }); viewModel.rangePenData.push({ grade: <number>view1.rows[i][1], rangePen: <number>view1.rows[i][3], employeeID: <string>view1.rows[i][0], identity: this.getSelectionIds(view2, this.host), tooltips: [{ displayName: "Employee ID:", value: <string>view1.rows[i][0] }, { displayName: "Range Penetration:", value: <string>view1.rows[i][3] } ] }); } viewModel.maxValue = d3.max([d3.max(viewModel.dataPoints, d => d.maximum),d3.max(viewModel.rangePenData, d => d.rangePen)]); viewModel.minValue = d3.min([d3.min(viewModel.dataPoints, d => d.minimum),d3.min(viewModel.rangePenData, d => d.rangePen)]); viewModel.maxGrade = d3.max(viewModel.rangePenData, d => d.grade); viewModel.minGrade = d3.min(viewModel.rangePenData, d => d.grade); return viewModel; } public getSelectionIds(dataView: DataView, host: IVisualHost): ISelectionId[] { return dataView.table.identity.map((identity: DataViewScopeIdentity) => { const categoryColumn: DataViewCategoryColumn = { source: dataView.table.columns[0], values: null, identity: [identity] }; return host.createSelectionIdBuilder() .withCategory(categoryColumn, 0) .createSelectionId(); }) }; } }
Solved! Go to Solution.
It seems the issue is related to sending numbers as values to Tooltip API but numbers are not supported and numbers must be converted to string explicitly.
Please use this code snippet in the code:
viewModel.rangePenData.push({ grade: <number>view1.rows[i][1], rangePen: <number>view1.rows[i][3], employeeID: <string>view1.rows[i][0], identity: this.getSelectionIds(view2, this.host), tooltips: [{ displayName: "Employee ID:", value: `${view1.rows[i][0]}` }, { displayName: "Range Penetration:", value: `${view1.rows[i][3]}` } ] });
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
It seems the issue is related to sending numbers as values to Tooltip API but numbers are not supported and numbers must be converted to string explicitly.
Please use this code snippet in the code:
viewModel.rangePenData.push({ grade: <number>view1.rows[i][1], rangePen: <number>view1.rows[i][3], employeeID: <string>view1.rows[i][0], identity: this.getSelectionIds(view2, this.host), tooltips: [{ displayName: "Employee ID:", value: `${view1.rows[i][0]}` }, { displayName: "Range Penetration:", value: `${view1.rows[i][3]}` } ] });
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Check out the July 2025 Power BI update to learn about new features.
User | Count |
---|---|
6 | |
6 | |
3 | |
2 | |
2 |
User | Count |
---|---|
5 | |
5 | |
4 | |
4 | |
3 |