cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
CristinaD
Frequent Visitor

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

CristinaD_0-1640253981786.png

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 🙂


 

1 ACCEPTED SOLUTION
CristinaD
Frequent Visitor

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}>()

View solution in original post

2 REPLIES 2
CristinaD
Frequent Visitor

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}>()
v-shex-msft
Community Support
Community Support

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

Community Support Team _ Xiaoxin
If this post helps, please consider accept as solution to help other members find it more quickly.

Helpful resources

Announcements
June 2022 update 768X460.jpg

Check it out!

Click here to read more about the June 2022 updates!

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power BI Dev Camp Session 23 768x460.jpg

Check it Out!

Mark your calendars and join us on Thursday, June 30 at 11a PDT for a great session with Ted Pattison!

June 20 episode 7 with aka link 768x460.jpg

The Power BI Community Show

Join us on June 20 at 11 am PDT when Kim Manis shares the latest on Azure Synapse analytics, the Microsoft Intelligent Data Platform, and notable Power BI Updates from Microsoft Build 2022.