Forum Discussion
Solved
Custom Visual Area Chart problems
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 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
const area = d3.area<{ Category: string; Value: number}>()
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
const area = d3.area<{ Category: string; Value: number}>()