Errors in generated SVG element of donut chart

[dtkri]

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.

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>

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:

It looks like a part of this donut chart:

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 

[v-xiaoyan-msft]

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]

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