PieSeries shows only stroke color when one value is 100% of total

[VukMNE]

I am experiencing a strange behaviour of RadPieChart and PieSeries.

PieSeries is showing only a thin line when one value represents 100% of total.

If my description is not clear, bellow are images to illustrate the problem I am facing. First image shows regular behaviour of PieSeries, and the second one shows the problematic

Image 1

behaviour. Image 2

The code for both charts is identical. These charts are dynamic, and they display different data regarding the parameters user typed in. However, bellow is the code for both charts.

<RadPieChart *ngIf="!noDataFound" tkExampleTitle tkToggleNavButton minHeight="200" allowAnimation="true" row="0">
        <PieSeries tkPieSeries
            seriesName="collectPie"
            selectionMode="None"
            expandRadius="0.4"
            outerRadiusFactor="0.7"
            valueProperty="amountCollected"
            legendLabel="nameForLabel"
            showLabels="true"
            showPercentage="false"
            [items]="pieSource">
            <PointLabelStyle tkPieLabelStyle margin="15" textFormat="%.2f €"></PointLabelStyle>
        </PieSeries>
        <Palette tkPiePalette seriesName="collectPie">
            <PaletteEntry tkPiePaletteEntry fillColor="#1B998B" strokeColor="#1B998B"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#97C8EB" strokeColor="#97C8EB"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#001F54" strokeColor="#001F54"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#2B193D" strokeColor="#2B193D"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#484D6D" strokeColor="#484D6D"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#2C365E" strokeColor="#2C365E"></PaletteEntry>
        </Palette>

        <RadLegendView tkPieLegend position="Top" width="100%"></RadLegendView>
      </RadPieChart>

And here is for the other chart

<RadPieChart *ngIf="!noDataFound" tkExampleTitle tkToggleNavButton minHeight="200" allowAnimation="true" row="0">
        <PieSeries tkPieSeries
            seriesName="collectPie"
            selectionMode="None"
            expandRadius="0.4"
            outerRadiusFactor="0.7"
            valueProperty="amountSpent"
            legendLabel="nameForLabel"
            showLabels="true"
            showPercentage="false"
            [items]="pieSource">
            <PointLabelStyle tkPieLabelStyle margin="15" textFormat="%.2f €"></PointLabelStyle>
        </PieSeries>
        <Palette tkPiePalette seriesName="collectPie">
            <PaletteEntry tkPiePaletteEntry fillColor="#1B998B" strokeColor="#1B998B"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#97C8EB" strokeColor="#97C8EB"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#001F54" strokeColor="#001F54"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#2B193D" strokeColor="#2B193D"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#484D6D" strokeColor="#484D6D"></PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#2C365E" strokeColor="#2C365E"></PaletteEntry>
        </Palette>

        <RadLegendView tkPieLegend position="Top" width="100%"></RadLegendView>
      </RadPieChart>

If I am missing something, please let me know. I tried searching for a solution on stack overflow, but I couldn't find anything similar.

[tommaso-sebastianelli]

Same issue for me.

Here's my template:

 <RadPieChart [@pop]="chartPop" allowAnimation="true">
            <DonutSeries *ngFor="let c of categories" tkPieSeries seriesName="customPalette"
                        selectionMode="none" expandRadius="0.4" outerRadiusFactor="0.8" innerRadiusFactor="0.4"
                        valueProperty="amount" legendLabel="name" [items]="source">
            </DonutSeries>
            <Palette tkPiePalette seriesName="customPalette">
                    <PaletteEntry *ngFor="let c of categories" tkPiePaletteEntry strokeWidth="0"
                            [fillColor]="c.color">
                    </PaletteEntry>
            </Palette>
</RadPieChart>

Woring smoothly when source has 2+ items.

[NickIliev]

@VukMNE @tommaso-sebastianelli confirming that the issue is reproducible on my side - it looks like a bug in the PieChart series.

Steps to reproduce the bug - use this Playground demo and notice the behavior when one of the items is represented with a hundred percent of the values (and the other is 0)

You could try as a workaround to replace the 0 value with some really really small value behind the decimal point (e.g., in this case, a 0.0001 does the trick)

[tommaso-sebastianelli]

@NickIliev thank you, the preview is working fine. I will go for it in my project too.

[VukMNE]

@NickIliev Thank you for your response, and for dedicating your time for solving this issue. However, the workaround with adding a very small value ( something like 0.0001) is not very convenient if you choose to display labels.

[mytc]

@NickIliev Do you find any solution for this? This is already 1 year old bug, still not fixed yet? I tried with small value, but it will add a line in across the chart.