Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!
Hi,
I'm pretty new creating custom visuals. I try to create something like the following image, then I will add more elements
At the moment I'm trying to create the background areachart but I always get error at the same point. I have followed the barchart tutorial and I have looked at the d3 documentation but I can't solve it.
At the time of creating a line or an area it gives me an error. Below I put the code that I use for the barchart that works well:
this.barSelection = this.barContainer
.selectAll('.bar')
.data(viewModel.DataPoints);
const barSelectionMerged = this.barSelection
.enter()
.append('rect')
.merge(<any>this.barSelection)
.classed('bar', true);
barSelectionMerged
.attr("x", (dataPoint: BarchartDataPoint) => xScale(dataPoint.Category))
.attr("y", (dataPoint: BarchartDataPoint) => yScale(Number(dataPoint.Value)))
.attr("width", xScale.bandwidth())
.attr("height", (dataPoint: BarchartDataPoint) => (plotArea.height -yScale(Number(dataPoint.Value))))
.style("fill", (dataPoint: BarchartDataPoint) => viewModel.BarColor);
below the code that I use to create the areachart that does not work
this.barContainer.append("path")
.datum(viewModel.DataPoints)
.attr("fill", "#cce5df")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 1.5)
.attr("d", d3.area()
.x((dataPoint: BarchartDataPoint) => xScale(dataPoint.Category))
.y0(y(0))
.y1((dataPoint: BarchartDataPoint) => yScale(Number(dataPoint.Value)))
)
The error is in the line .x and the line .y1 it tells me that the arguments are not of the expected type, I have tried it with several options but it does not seem to work for me.
I am using the following project , I am simply trying to change the lines of code mentioned abovE:
Please I would appreciate if someone can help me thanks 🙂
Solved! Go to Solution.
I have found the solution, it would be done as follows:
const area = d3.area<{ Category: string; Value: number}>()
.curve(d3.curveCardinal)
.x(function(d){return xScale(d.Category);})
.y0(yScale(0))
.y1(function(d){return yScale(d.Value);});
console.log(area);
this.barContainer.append("path")
.datum(viewModel.DataPoints)
.attr("fill", viewModel.AreaColor)
.attr("d", area);
The declaration in area is the most important since it is where I have had the most problems
I have found the solution, it would be done as follows:
const area = d3.area<{ Category: string; Value: number}>()
.curve(d3.curveCardinal)
.x(function(d){return xScale(d.Category);})
.y0(yScale(0))
.y1(function(d){return yScale(d.Value);});
console.log(area);
this.barContainer.append("path")
.datum(viewModel.DataPoints)
.attr("fill", viewModel.AreaColor)
.attr("d", area);
The declaration in area is the most important since it is where I have had the most problems
HI @CristinaD,
So you mean you totally not sure how to design an area chart? If that is the case, I'd like to suggest you find an area chart sample first.
Here are the links of a 'stacked area' chart and outdated power bi visual code project, you can take a look at them if helps:
In addition, if you did not require so many effects, script-based visuals(e.g. R, Python)should be a better choice of custom visual graphic designs. They do not require you to familiar with 'typescript' codes and you can find a lot of code samples of them.
Create Power BI visuals using R - Power BI | Microsoft Docs
Create an R-powered Power BI visual - Power BI | Microsoft Docs
Create Power BI visuals using Python in Power BI Desktop - Power BI | Microsoft Docs
Regards,
Xiaoxin Sheng
User | Count |
---|---|
15 | |
2 | |
1 | |
1 | |
1 |
User | Count |
---|---|
18 | |
11 | |
5 | |
4 | |
3 |