[Solved] PieSeries white box around values

[Marcello]

Hi, I'm trying to show some pie charts with their values(%) inside the chart but when I set showLabels="true" it also adds a white box around the value.

I'd like to remove these boxes but the strokeColor and strokeWidth properties doesn't seem to work. Is there any workaround for this?

Also tried showPercentage but nothing seems to happen.

Also, would be possible to add "R$" before the values on the legend labels in Android?

<RadPieChart height="300">
    <PieSeries tkPieSeries seriesName="attendance" outerRadiusFactor="0.8"
        showLabels="true"
        [items]="anticipated" valueProperty="value" legendLabel="healthPlanName">
        <PointLabelStyle tkPieLabelStyle fillColor="Transparent" textSize="18"></PointLabelStyle>
    </PieSeries>

    <Palette tkPiePalette seriesName="attendance">
        <PaletteEntry tkPiePaletteEntry strokeWidth="1" fillColor="#0BAD3E" strokeColor="#ccc"></PaletteEntry>
        <PaletteEntry tkPiePaletteEntry strokeWidth="1" fillColor="#33E76A" strokeColor="#ccc"></PaletteEntry>
        <PaletteEntry tkPiePaletteEntry strokeWidth="1" fillColor="#6CEC93" strokeColor="#ccc"></PaletteEntry>
    </Palette>

    <RadLegendView tkPieLegend position="Right" offsetOrigin="TopRight" width="120"></RadLegendView>
</RadPieChart>

[Nikolay Tsonev]

Hello,

Thank you for your interest in UI for NativeScirpt.
I reviewed this case and I found that at the moment there is an issue with changing the strokeColor for the Chart's PointLabel for Android.
For your convenience, I have logged a new issue in repository.  For further info and for a possible fix you could keep track on the issue.

Regarding the second question about adding "R$", could you provide some more info about what you are trying to achieve?

Regards,
nikolay.tsonev
Telerik by Progress

[Marcello]

Hi, regarding the "R$" there are two pictures attached to the original post, one is the expected result and the other is what I could set up until now.

I would like to add "R$" as  prefix of the legend.

[Marcello]

Also, when do you estimate that the issue will be solved?

[Nikolay Tsonev]

Hi Marcello,

Regarding the first question, the prefix for the labels in the legend should be added to the data that will be loaded in the Pie Chart. The legendLabel property will load the string as it has been set in the data.
For example:
HTML

<ActionBar title="My App" class="action-bar">
</ActionBar>
<GridLayout rows="" columns="">
    <RadPieChart height="300">
    <PieSeries tkPieSeries  seriesName="attendance" outerRadiusFactor="0.8"
        showLabels="true"
        [items]="anticipated" valueProperty="value" legendLabel="healthPlanName">
        <PointLabelStyle tkPieLabelStyle fillColor="red" strokeColor="blue" textColor="yellow" textSize="18"></PointLabelStyle>
    </PieSeries>

    <Palette tkPiePalette seriesName="attendance">
        <PaletteEntry tkPiePaletteEntry strokeWidth="1" fillColor="#0BAD3E" strokeColor="#ccc"></PaletteEntry>
        <PaletteEntry tkPiePaletteEntry strokeWidth="1" fillColor="#33E76A" strokeColor="#ccc"></PaletteEntry>
        <PaletteEntry tkPiePaletteEntry strokeWidth="1" fillColor="#6CEC93" strokeColor="#ccc"></PaletteEntry>
    </Palette>

    <RadLegendView tkPieLegend position="Right" offsetOrigin="TopRight" width="120"></RadLegendView>
</RadPieChart>
</GridLayout>

TypeScript

import { Component, OnInit } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
    items: Item[];
    anticipated=[{healthPlanName:"R$ test1", value:10}, {healthPlanName:"R$ test2", value:9}, {healthPlanName:"R$ test3", value:30}]

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
        this.items = this.itemService.getItems();
    }
}

In the above-given sample code, the healthPlanName property will contain the string value in the wanted structure, that will be load in the legend.

About the second question for strokeColor, I can not commit to the exact timeframe, where the fix will be available. Perhaps this will happen for some of the next releases after 2.0.

Bear in mind that in general the issue's status is upgraded when there is a progress and you could keep track on the issue for more info.

Hope this helps.

Regards,
nikolay.tsonev
Telerik by Progress