Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
I'm trying to replicate a grouped bar chart from the below link but getting errors. I resolved few type errors but cannot resolve a data related error.
https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad
The example uses a JSON file. I have removed that part and stored the JSON data in a variable. My code works fine in an HTML file but gives an error in Visual.ts file. The error is in the line
.attr("x", function(d) { return x1(d.rate); })
The error is [ts] Property 'rate' does not exist on type '{}'. Looks like the below line is not detecting any data.
.data(function(d) { return d.values; })
Solved! Go to Solution.
Looks like this issue is related to TypeScript types.
Can you share all of files that are in the your custom visual (pbiviz.json, /src, tsconfig.json, etc.)?
What version of pbiviz tools do you use?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Looks like this issue is related to TypeScript types.
Can you share all of files that are in the your custom visual (pbiviz.json, /src, tsconfig.json, etc.)?
What version of pbiviz tools do you use?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Thanks for the solution @v-viig. The solution was
1. To create an interface like this
export interface DataValue {
value: number;
rate: string;
}
2. Then edit the bar chart code to this
const slice: d3.Selection<Data> = svg.selectAll(".slice")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function (d) { return "translate(" + x0(d.categorie) + ",0)"; });
slice.selectAll("rect")
.data<DataValue>((d) => { return d.values; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function (d) { return x1(d.rate).toString(); })
.style("fill", function (d) { return color(d.rate).toString() })
.attr("y", function (d) { return +y(d.value); })
.attr("height", function (d) { return height - (+y(d.value)); });
I'm not sure why simple D3 code cannot work here. why it has to be so hard?
The issue actually was related to TypeScript types that must be specified.
We'd recommend you to take a look at TypeScript Handbook to find out more about type system.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
16 | |
2 | |
2 | |
1 | |
1 |