topic Custom Visual Area Chart problems in Developer

Custom Visual Area Chart problems

CristinaD — Thu, 23 Dec 2021 10:26:53 GMT

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 🙂

Re: Custom Visual Area Chart problems

Anonymous — Mon, 27 Dec 2021 02:25:52 GMT

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. Often used to display values over time.

GitHub - lumeltech/PowerBI-visuals-core: [DEPRECATED] This library contains the Power BI visuals such as the Bar chart, Column chart etc and the visual framework.

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

Re: Custom Visual Area Chart problems

CristinaD — Mon, 27 Dec 2021 10:33:34 GMT

I have found the solution, it would be done as follows:

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