Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

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
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.