Custom Visual Area Chart problems

[CristinaD]

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 🙂

[CristinaD · Accepted 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 

const area =  d3.area<{ Category: string; Value: number}>()

[Anonymous]

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:

GitHub - microsoft/powerbi-visuals-streamgraph: A stacked area chart with smooth interpolation. Ofte...

GitHub - lumeltech/PowerBI-visuals-core: [DEPRECATED] This library contains the Power BI visuals suc...

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