PieChart StrokeWidth not complete and legend svg support

When the <RadzenPieSeries StrokeWidth=2 ...> and the stroke color is different than the fill color, the border doesn't go all the way around the pie chart piece. In the example below, the red stroke color was expected to go all the way around the blue pie piece. Is this a bug, or is stroke not supported for pie charts?

radzenpiechart-strokewidth

Secondly, does the chart legend support svg icons instead of the circle, squares, etc... We use custom SVG icons in our legends as shown below. I think the answer is no because Radzen Chart doesn't support a legend template at this time. Is this correct?
image

thanks
Rob
Radzen Blazor Studio Professional owner

Hi @TheRHogue,

I tested with our online demo and it looks like this:

The code is this:

<RadzenPieSeries StrokeWidth="2" Strokes=@(new [] { "red" }) Data="@revenue" Title="Revenue" CategoryProperty="Quarter" ValueProperty="Revenue">

Basically we render a <path> element and set its stroke and stroke-width attributes. The rest is what the browser renders. Here is an example taken from the screenshot above:

<path d="M 199.5 0 A 118 118 0 0 1 294.9640053362438 48.641340229488165 L 199.5 118 A 0 0 0 0 0 199.5 118" style="stroke: red;stroke-width: 2;"></path>

No, this and legend templates are not supported.

It looks like the pie chart fill piece needs to be smaller to account for the strokewidth and therefore the left border is drawing over the right border which is not expected.

image

I just tested the most popular JS charting library and it seems to behave in the exact same way when it comes to pie slice borders (they overlap as in RadzenChart):

To be honest I am not sure having double borders would look better. Here is a simulated rendering:

Is that appearance what you are after?

Thank you for the response. I spoke with our designer, they mainly want "spacing" between the pie chart pieces. We tried to achieve this using one color and controlling stroke thickness.

note: the margin option on "RadzenColumnOptions Margin="8" to space out the bars.

The designer wants:
image

and I am getting the following (double border at the end, and the middle some artifacts:

image

This is indeed a glitch and we will fix it with the next release of Radzen.Blazor. Here is how it should look with the fix:


Here is the current behavior (with the glitch):

1 Like

Thank you very much for the attention to this topic. I have let our designer know, and we all appreciate your efforts.