cancel
Showing results for 
Search instead for 
Did you mean: 

Errors in generated SVG element of donut chart

Hi,

 

We get errors while working with donut chart in a Power BI report embedded in a web application. Errors appear in a specific case, while playing with data filters.

dtkri_1-1669815731606.png

I've found out, that the error is raised by invoking this code:

{return function(e){this.setAttribute(t,n.call(this,e))}}

from file https://content.powerapps.com/resource/powerbiwfe/scripts/reportembed.externals.bundle.min.1fe2184df...

 

with following parameter values:
t = d
n = ƒ (t){for(var e,r=0;r<n;++r)u[(e=c[r]).i]=e.x(t);return u.join("")}
e = 0.9998536225273693
n.call(this,e) = M-19.431694292822748,82.06798246081908A85.43381399564576,85.43381399564576,0,0.006505519107956714,1,-75.10243077089386,39.98260453729223L-45.06145846253631,23.989562722375332A51.26028839738745,51.26028839738745,0,0.006505519107956714,0,-11.659016575693647,49.240789476491436Z
 
As a result embedded Power BI report has generated a wrong SVG element - incompatible with API.
If we put such attributes to a test SVG element, we got exactly the same error while trying to render it:
<svg viewBox="-20 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.538662322155488,85.31314842464582
A85.43381399564576,85.43381399564576,0,1.3107199858808372e-7,1,-65.83064561505337,54.45421480185696
L-39.498387369032,32.67252888111417
A51.26028839738745,51.26028839738745,0,1.3107199858808372e-7,0,2.7231973932932916,51.18788905478748Z" />
</svg>
dtkri_0-1669816072318.png
In the above example we see that large-arc-flag is close to zero (1.3107199858808372e-7) but only 0 or 1 is allowed. See reference in: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d.

When this flag is manually changed to 0, then the following part of donut chart is drawn:
dtkri_1-1669817986119.png

It looks like a part of this donut chart:

dtkri_2-1669818013915.png

Could you please check if your implementation is able to generate SVG incompatible with API? Maybe e.g. Math.round() is needed somewhere?

 

Kind regards,

@dtkri 

 

Status: Investigating

Hi @dtkri ,

 

This does not seem to be supported at the moment, you can search for similar ideas here

Search (powerbi.com)

 

You may also check

How to create an interactive donut chart using SVG | by Mustapha AOUAS | Medium

Building custom Data Bars in Power BI using SVG measures – Random Procrastination (gosbell.com)

 

 

Best regards.
Community Support Team_ Caitlyn

Comments
v-caitlyn-mstf
Community Support
Status changed to: Investigating

Hi @dtkri ,

 

This does not seem to be supported at the moment, you can search for similar ideas here

Search (powerbi.com)

 

You may also check

How to create an interactive donut chart using SVG | by Mustapha AOUAS | Medium

Building custom Data Bars in Power BI using SVG measures – Random Procrastination (gosbell.com)

 

 

Best regards.
Community Support Team_ Caitlyn

dtkri
Regular Visitor

Hi,

 

I do not try to create any SVG element by myself. I just embed Power BI reports in a web application. The point is that Power BI generates SVG elements which are errornous.

 

Best regards,

@dtkri