Forum Discussion
Custom visual - Grouped bar chart not working
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; })
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
3 Replies
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
