PieSeries white box around values

Thread is closed for posting
5 posts, 0 answers
  1. Marcello
    Marcello avatar
    8 posts
    Member since:
    Mar 2017

    Posted 19 Apr 2017 Link to this post

    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>
  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 20 Apr 2017 Link to this post

    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 nativescript-ui-feedback 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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Marcello
    Marcello avatar
    8 posts
    Member since:
    Mar 2017

    Posted 20 Apr 2017 in reply to Nikolay Tsonev Link to this post

    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.

  4. Marcello
    Marcello avatar
    8 posts
    Member since:
    Mar 2017

    Posted 20 Apr 2017 in reply to Nikolay Tsonev Link to this post

    Also, when do you estimate that the issue will be solved?
  5. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 21 Apr 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top